Coral Cream Energetic Color Palette for Creative Brands

Coral Cream Energetic Color Palette

This palette is inspired by the warm and energetic gradients of coral, highlighted by soft apricot and a touch of cream, offset with grounding charcoal and deep neutral shades to ensure readability and balance. It combines vibrant main colors with complementary soft accents to create a friendly and inviting yet professional brand identity.

MonochromaticCreativecoralcreamapricotcharcoal

Main (Brand) Colors

The coral, apricot, and soft peach main colors create a warm and inviting analogous color scheme that conveys energy and friendliness with harmonious progression.

PrimaryCoral

RolesLogo, Link, Btn Primary Bg

Coral provides vibrant energy and draws immediate attention ideal for logos and primary call-to-actions.

HEX#FF5E57

RGB255, 94, 87

HSL3, 100, 67

CMYK0, 63, 66, 0

SecondaryApricot

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Apricot complements coral with warmth but provides a softer background for secondary buttons and accents.

HEX#FF9F80

RGB255, 159, 128

HSL15, 100, 75

CMYK0, 38, 50, 0

TertiarySoft Peach

RolesHeadline

Soft Peach offers a gentle but visible hue for headlines, supporting the primary colors without overwhelming.

HEX#FFBCAB

RGB255, 188, 171

HSL12, 100, 84

CMYK0, 26, 33, 0

Support Colors

Support colors extend the warmth and balance of the main palette with subtle creamy tones and contrasting deep charcoal for structure and usability.

Cream

RolesBg Light

Cream functions as a light, neutral background providing warmth without glare, enhancing legibility against text.

HEX#FFEBE7

RGB255, 235, 231

HSL10, 100, 95

CMYK0, 8, 9, 0

Charcoal

RolesIcon, Border, Divider, Outline

Charcoal anchors the palette with a strong dark contrast used for borders and icons, balancing the warm hues and ensuring clarity.

HEX#332726

RGB51, 39, 38

HSL5, 15, 17

CMYK0, 24, 25, 80

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

White

RolesBg Dark

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

HEX#FAF6F3

RGB250, 246, 243

HSL26, 41, 97

CMYK0, 2, 3, 2

Rich Black

RolesText, Btn Primary Text, Btn Secondary Text

HEX#1B1B1B

RGB27, 27, 27

HSL0, 0, 11

CMYK0, 0, 0, 89

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Coral", "hex": "#FF5E57", "role": "main", "cmyk": { "c": 0, "m": 63, "y": 66, "k": 0, "source": "colorfly" } }, { "name": "Apricot", "hex": "#FF9F80", "role": "main", "cmyk": { "c": 0, "m": 38, "y": 50, "k": 0, "source": "colorfly" } }, { "name": "Soft Peach", "hex": "#FFBCAB", "role": "main", "cmyk": { "c": 0, "m": 26, "y": 33, "k": 0, "source": "colorfly" } }, { "name": "Cream", "hex": "#FFEBE7", "role": "support", "cmyk": { "c": 0, "m": 8, "y": 9, "k": 0, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#332726", "role": "support", "cmyk": { "c": 0, "m": 24, "y": 25, "k": 80, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#FAF6F3", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 3, "k": 2, "source": "colorfly" } }, { "name": "Rich Black", "hex": "#1B1B1B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 89, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-coral: #FF5E57; --color-apricot: #FF9F80; --color-soft-peach: #FFBCAB; --color-cream: #FFEBE7; --color-charcoal: #332726; --color-white: #FFFFFF; --color-ivory: #FAF6F3; --color-rich-black: #1B1B1B; }

:root { --role-logo: #FF5E57; --role-link: #FF5E57; --role-btn-primary-bg: #FF5E57; --role-btn-secondary-bg: #FF9F80; --role-btn-outlined-border: #FF9F80; --role-btn-outlined-text: #FF9F80; --role-headline: #FFBCAB; --role-bg-light: #FFEBE7; --role-icon: #332726; --role-border: #332726; --role-divider: #332726; --role-outline: #332726; --role-bg-dark: #FFFFFF; --role-text: #1B1B1B; --role-btn-primary-text: #1B1B1B; --role-btn-secondary-text: #1B1B1B; }

{ "coral": "#FF5E57", "apricot": "#FF9F80", "soft-peach": "#FFBCAB", "cream": "#FFEBE7", "charcoal": "#332726", "white": "#FFFFFF", "ivory": "#FAF6F3", "rich-black": "#1B1B1B" }

<div class="colorfly-moving-gradient-bg"> <span class="colorfly-gradient-spark" aria-hidden="true"></span> <div> <small>Motion gradient</small> <h2>Gradient background</h2> <p>A moving brand gradient built from your palette.</p> </div> </div> <style> .colorfly-moving-gradient-bg { --gradient-anchor: #FF5E57; --gradient-partner: #FFA6A3; --gradient-accent: #FFEBE7; --gradient-text: #000000; position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; padding: 42px; color: var(--gradient-text); border-radius: 28px; background: radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%), linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor)); background-size: 160% 160%, 180% 180%, 240% 240%; animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg > div { position: relative; z-index: 1; max-width: 640px; text-align: center; } .colorfly-moving-gradient-bg::before, .colorfly-moving-gradient-bg::after, .colorfly-gradient-spark { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; } .colorfly-moving-gradient-bg::before { left: -10%; top: -18%; width: min(520px, 72%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%), radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%); opacity: .86; animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg::after { right: -12%; bottom: -24%; width: min(620px, 82%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%), radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%); opacity: .78; animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-spark { left: 42%; top: 44%; width: min(360px, 54%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%); opacity: .46; animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite; } @keyframes colorfly-gradient-bg { 0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; } 18% { background-position: 44% 88%, 58% 12%, 34% 22%; } 39% { background-position: 86% 38%, 18% 74%, 86% 64%; } 63% { background-position: 26% 16%, 84% 92%, 42% 100%; } 82% { background-position: 68% 68%, 32% 30%, 100% 34%; } } @keyframes colorfly-gradient-orb-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(78%, 22%, 0) scale(1.12); } 47% { transform: translate3d(44%, 86%, 0) scale(.92); } 72% { transform: translate3d(112%, 56%, 0) scale(1.2); } } @keyframes colorfly-gradient-orb-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 19% { transform: translate3d(-48%, -18%, 0) scale(.9); } 53% { transform: translate3d(-92%, -62%, 0) scale(1.14); } 79% { transform: translate3d(-22%, -86%, 0) scale(.98); } } @keyframes colorfly-gradient-spark { 0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); } 28% { transform: translate3d(52%, -34%, 0) scale(1.08); } 58% { transform: translate3d(-44%, 38%, 0) scale(.96); } 84% { transform: translate3d(20%, 28%, 0) scale(1.18); } } </style>

<div class="colorfly-gradient-text-card"> <small>Gradient type</small> <h2>Gradient on text</h2> <p>A moving text gradient built from your palette.</p> </div> <style> .colorfly-gradient-text-card { --gradient-text-a: #FF5E57; --gradient-text-b: #8A5A58; --gradient-text-c: #998D8B; position: relative; display: grid; place-items: center; min-height: 310px; overflow: hidden; padding: 42px; text-align: center; border-radius: 28px; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%), linear-gradient(135deg, #fff, #fbfbfd); } .colorfly-gradient-text-card::before, .colorfly-gradient-text-card::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); } .colorfly-gradient-text-card::before { left: 9%; top: 15%; width: min(330px, 48%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%); animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite; } .colorfly-gradient-text-card::after { right: 7%; bottom: 6%; width: min(360px, 52%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%); animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-text-card small, .colorfly-gradient-text-card p { position: relative; z-index: 1; color: #65616d; } .colorfly-gradient-text-card h2 { position: relative; z-index: 1; margin: 10px 0 12px; color: transparent; font-size: clamp(42px, 8vw, 96px); line-height: .92; background: radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%), radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%), linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a)); background-size: 220% 220%, 240% 240%, 280% 100%; -webkit-background-clip: text; background-clip: text; animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite; } @keyframes colorfly-gradient-text-shift { 0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; } 27% { background-position: 78% 18%, 28% 82%, 42% 50%; } 61% { background-position: 36% 92%, 86% 24%, 100% 50%; } 84% { background-position: 92% 48%, 18% 40%, 58% 50%; } } @keyframes colorfly-gradient-text-glow-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(.92); } 42% { transform: translate3d(80%, 32%, 0) scale(1.12); } 72% { transform: translate3d(28%, 86%, 0) scale(.98); } } @keyframes colorfly-gradient-text-glow-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 36% { transform: translate3d(-62%, -18%, 0) scale(.9); } 76% { transform: translate3d(-36%, -78%, 0) scale(1.12); } } </style>