Sunset Sky Vivid Color Palette for Creative Brands

Sunset Sky Vivid Color Palette

This palette draws from the rich, vivid sunset hues and contrasting deep blues of the sky, creating a dynamic yet harmonious system. The main colors capture the dramatic and emotional essence of the colorful sky, with support colors reflecting the softer midtones to balance intensity, and neutrals providing the necessary grounding for text and backgrounds.

CustomCreativesunsetskyvividblue

Main (Brand) Colors

The main colors create a bold and recognizable triadic harmony by combining deep blue with vibrant orange and a rich purple, evoking the energy and drama of a sunset sky.

PrimaryRoyal Blue

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

Royal Blue brings a strong, trustworthy presence that represents calm and reliability.

HEX#2A3D9A

RGB42, 61, 154

HSL230, 57, 38

CMYK73, 60, 0, 40

SecondaryCoral Orange

RolesBtn Secondary Bg

Coral Orange adds warmth and energetic vibrancy, stimulating attention without overwhelming.

HEX#EA6A47

RGB234, 106, 71

HSL13, 80, 60

CMYK0, 55, 70, 8

TertiaryDeep Lavender

Deep Lavender offers a sophisticated depth and emotional balance between the blue and orange hues.

HEX#6B3F8F

RGB107, 63, 143

HSL273, 39, 40

CMYK25, 56, 0, 44

Support Colors

The support colors extend the main palette with softer, harmonious tones that echo the sky’s natural gradient, balancing vibrancy with subtlety.

Muted Lavender

RolesIcon, Border, Divider, Outline

Muted Lavender supports the palette with a gentle tone that complements Deep Lavender and softens the overall palette.

HEX#8C7AA9

RGB140, 122, 169

HSL263, 21, 57

CMYK17, 28, 0, 34

Soft Apricot

Soft Apricot offers a lighter, more subdued warmth that balances the intensity of Coral Orange while maintaining a cohesive look.

HEX#F6A983

RGB246, 169, 131

HSL20, 86, 74

CMYK0, 31, 47, 4

Neutral Colors

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

Ivory White

RolesBg Light, Btn Primary Text

HEX#FCFCFC

RGB252, 252, 252

HSL0, 0, 99

CMYK0, 0, 0, 1

Light Gray

RolesBg Dark

HEX#E4E4E4

RGB228, 228, 228

HSL0, 0, 89

CMYK0, 0, 0, 11

Charcoal

RolesText, Btn Secondary Text

HEX#1C1C1C

RGB28, 28, 28

HSL0, 0, 11

CMYK0, 0, 0, 89

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Royal Blue", "hex": "#2A3D9A", "role": "main", "cmyk": { "c": 73, "m": 60, "y": 0, "k": 40, "source": "colorfly" } }, { "name": "Coral Orange", "hex": "#EA6A47", "role": "main", "cmyk": { "c": 0, "m": 55, "y": 70, "k": 8, "source": "colorfly" } }, { "name": "Deep Lavender", "hex": "#6B3F8F", "role": "main", "cmyk": { "c": 25, "m": 56, "y": 0, "k": 44, "source": "colorfly" } }, { "name": "Muted Lavender", "hex": "#8C7AA9", "role": "support", "cmyk": { "c": 17, "m": 28, "y": 0, "k": 34, "source": "colorfly" } }, { "name": "Soft Apricot", "hex": "#F6A983", "role": "support", "cmyk": { "c": 0, "m": 31, "y": 47, "k": 4, "source": "colorfly" } }, { "name": "Ivory White", "hex": "#FCFCFC", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 1, "source": "colorfly" } }, { "name": "Light Gray", "hex": "#E4E4E4", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 11, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#1C1C1C", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 89, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-royal-blue: #2A3D9A; --color-coral-orange: #EA6A47; --color-deep-lavender: #6B3F8F; --color-muted-lavender: #8C7AA9; --color-soft-apricot: #F6A983; --color-ivory-white: #FCFCFC; --color-light-gray: #E4E4E4; --color-charcoal: #1C1C1C; }

:root { --role-logo: #2A3D9A; --role-link: #2A3D9A; --role-btn-primary-bg: #2A3D9A; --role-btn-outlined-border: #2A3D9A; --role-btn-outlined-text: #2A3D9A; --role-headline: #2A3D9A; --role-btn-secondary-bg: #EA6A47; --role-icon: #8C7AA9; --role-border: #8C7AA9; --role-divider: #8C7AA9; --role-outline: #8C7AA9; --role-bg-light: #FCFCFC; --role-btn-primary-text: #FCFCFC; --role-bg-dark: #E4E4E4; --role-text: #1C1C1C; --role-btn-secondary-text: #1C1C1C; }

{ "royal-blue": "#2A3D9A", "coral-orange": "#EA6A47", "deep-lavender": "#6B3F8F", "muted-lavender": "#8C7AA9", "soft-apricot": "#F6A983", "ivory-white": "#FCFCFC", "light-gray": "#E4E4E4", "charcoal": "#1C1C1C" }

<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: #2A3D9A; --gradient-partner: #8A94C7; --gradient-accent: #8C7AA9; --gradient-text: #FFFFFF; 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: #2A3D9A; --gradient-text-b: #8A94C7; --gradient-text-c: #8C7AA9; 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>