Pastel Artist Balance Color Palette for Creative Brands

Pastel Artist Balance Color Palette

This palette blends soft pastels and warm neutrals inspired by the image, creating a harmonious system that feels inviting, balanced, and artistic with distinct button and text contrasts for usability.

MonochromaticCreativepastelwarmbalancedinviting

Main (Brand) Colors

The main colors form an analogous harmony from warm peachy tones to soft coral and gentle orange, creating a warm, artistic flow recognized with ease.

PrimaryPeach

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Peach offers a warm and friendly foundation that evokes creativity and approachability.

HEX#F9B384

RGB249, 179, 132

HSL24, 91, 75

CMYK0, 28, 47, 2

SecondaryCoral

RolesBtn Secondary Bg, Headline

Coral adds energy and vibrance, stimulating engagement and visual interest.

HEX#F37C6A

RGB243, 124, 106

HSL8, 85, 68

CMYK0, 49, 56, 5

TertiaryBurnt Orange

Burnt Orange provides a strong yet warm contrast for primary button text ensuring readability.

HEX#E96E3E

RGB233, 110, 62

HSL17, 80, 58

CMYK0, 53, 73, 9

Support Colors

The support colors extend the palette with soft pink and muted plum, balancing the warm main hues with cool, subtle accents that remain visually subordinate.

Soft Pink

RolesIcon, Border, Divider, Outline

Soft Pink complements main warm tones with a gentle, muted touch offering visual softness.

HEX#E3B8B1

RGB227, 184, 177

HSL8, 47, 79

CMYK0, 19, 22, 11

Muted Plum

Muted Plum adds depth and cool balance, enhancing overall palette harmony without overpowering.

HEX#A37482

RGB163, 116, 130

HSL342, 20, 55

CMYK0, 29, 20, 36

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

RolesBg Dark

HEX#F6F4F3

RGB246, 244, 243

HSL20, 14, 96

CMYK0, 1, 1, 4

Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#4E4A48

RGB78, 74, 72

HSL20, 4, 29

CMYK0, 5, 8, 69

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Peach", "hex": "#F9B384", "role": "main", "cmyk": { "c": 0, "m": 28, "y": 47, "k": 2, "source": "colorfly" } }, { "name": "Coral", "hex": "#F37C6A", "role": "main", "cmyk": { "c": 0, "m": 49, "y": 56, "k": 5, "source": "colorfly" } }, { "name": "Burnt Orange", "hex": "#E96E3E", "role": "main", "cmyk": { "c": 0, "m": 53, "y": 73, "k": 9, "source": "colorfly" } }, { "name": "Soft Pink", "hex": "#E3B8B1", "role": "support", "cmyk": { "c": 0, "m": 19, "y": 22, "k": 11, "source": "colorfly" } }, { "name": "Muted Plum", "hex": "#A37482", "role": "support", "cmyk": { "c": 0, "m": 29, "y": 20, "k": 36, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F6F4F3", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 1, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#4E4A48", "role": "neutral", "cmyk": { "c": 0, "m": 5, "y": 8, "k": 69, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-peach: #F9B384; --color-coral: #F37C6A; --color-burnt-orange: #E96E3E; --color-soft-pink: #E3B8B1; --color-muted-plum: #A37482; --color-white: #FFFFFF; --color-ivory: #F6F4F3; --color-charcoal: #4E4A48; }

:root { --role-logo: #F9B384; --role-link: #F9B384; --role-btn-primary-bg: #F9B384; --role-btn-outlined-border: #F9B384; --role-btn-outlined-text: #F9B384; --role-btn-secondary-bg: #F37C6A; --role-headline: #F37C6A; --role-icon: #E3B8B1; --role-border: #E3B8B1; --role-divider: #E3B8B1; --role-outline: #E3B8B1; --role-bg-light: #FFFFFF; --role-bg-dark: #F6F4F3; --role-text: #4E4A48; --role-btn-primary-text: #4E4A48; --role-btn-secondary-text: #4E4A48; }

{ "peach": "#F9B384", "coral": "#F37C6A", "burnt-orange": "#E96E3E", "soft-pink": "#E3B8B1", "muted-plum": "#A37482", "white": "#FFFFFF", "ivory": "#F6F4F3", "charcoal": "#4E4A48" }

<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: #F9B384; --gradient-partner: #BD8864; --gradient-accent: #D3B099; --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: #866147; --gradient-text-b: #BD8864; --gradient-text-c: #725F53; 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>