Violet, Golden Yellow, and Cyan Creative Color Palette with Dark Blue...

Violet Golden Yellow Color Palette

This palette combines a bold violet, a warm golden yellow, and a vibrant cyan as the main colors, creating a dynamic and energetic system. The support colors extend this palette with a softer blue and a refined dark blue tone for balance and visual interest, complemented by a classic neutral range for strong contrast and readability.

Split ComplementaryCreativevioletgolden yellowcyancreative

Main (Brand) Colors

The combination of violet, golden yellow, and cyan main colors creates a vibrant and identifiable brand with energetic, warm, and refreshing notes that work well together while standing out distinctively.

PrimaryDeep Violet

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

Deep Violet evokes creativity and sophistication, providing a strong foundation for brand recognition.

HEX#5829B7

RGB88, 41, 183

HSL260, 63, 44

CMYK52, 78, 0, 28

SecondaryGolden Yellow

RolesLink, Btn Secondary Bg, Headline

Golden Yellow brings warmth and positivity, energizing the palette with a welcoming appeal.

HEX#FDAE1E

RGB253, 174, 30

HSL39, 98, 55

CMYK0, 31, 88, 1

TertiaryVibrant Cyan

Vibrant Cyan adds a refreshing, modern accent that complements both the violet and yellow hues.

HEX#00A3E0

RGB0, 163, 224

HSL196, 100, 44

CMYK100, 27, 0, 12

Support Colors

The support colors provide depth and balance with softer blue and dark blue tones that complement the main colors while remaining visually subordinate.

Muted Blue

RolesIcon, Border, Divider, Outline

Muted Blue offers calm accents that harmonize with Vibrant Cyan, stabilizing the palette's energy.

HEX#395CAD

RGB57, 92, 173

HSL222, 50, 45

CMYK67, 47, 0, 32

Dark Blue

Dark Blue introduces refined depth that complements Deep Violet and balances the warmth of Golden Yellow.

HEX#1B2F5B

RGB27, 47, 91

HSL221, 54, 23

CMYK70, 48, 0, 64

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory White

RolesBg Dark

HEX#F7F6F4

RGB247, 246, 244

HSL40, 16, 96

CMYK0, 0, 1, 3

Charcoal Black

RolesText, Btn Secondary Text

HEX#1A1A1A

RGB26, 26, 26

HSL0, 0, 10

CMYK0, 0, 0, 90

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Deep Violet", "hex": "#5829B7", "role": "main", "cmyk": { "c": 52, "m": 78, "y": 0, "k": 28, "source": "colorfly" } }, { "name": "Golden Yellow", "hex": "#FDAE1E", "role": "main", "cmyk": { "c": 0, "m": 31, "y": 88, "k": 1, "source": "colorfly" } }, { "name": "Vibrant Cyan", "hex": "#00A3E0", "role": "main", "cmyk": { "c": 100, "m": 27, "y": 0, "k": 12, "source": "colorfly" } }, { "name": "Muted Blue", "hex": "#395CAD", "role": "support", "cmyk": { "c": 67, "m": 47, "y": 0, "k": 32, "source": "colorfly" } }, { "name": "Dark Blue", "hex": "#1B2F5B", "role": "support", "cmyk": { "c": 70, "m": 48, "y": 0, "k": 64, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory White", "hex": "#F7F6F4", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 1, "k": 3, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#1A1A1A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-deep-violet: #5829B7; --color-golden-yellow: #FDAE1E; --color-vibrant-cyan: #00A3E0; --color-muted-blue: #395CAD; --color-dark-blue: #1B2F5B; --color-pure-white: #FFFFFF; --color-ivory-white: #F7F6F4; --color-charcoal-black: #1A1A1A; }

:root { --role-logo: #5829B7; --role-btn-primary-bg: #5829B7; --role-btn-outlined-border: #5829B7; --role-btn-outlined-text: #5829B7; --role-link: #FDAE1E; --role-btn-secondary-bg: #FDAE1E; --role-headline: #FDAE1E; --role-icon: #395CAD; --role-border: #395CAD; --role-divider: #395CAD; --role-outline: #395CAD; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #F7F6F4; --role-text: #1A1A1A; --role-btn-secondary-text: #1A1A1A; }

{ "deep-violet": "#5829B7", "golden-yellow": "#FDAE1E", "vibrant-cyan": "#00A3E0", "muted-blue": "#395CAD", "dark-blue": "#1B2F5B", "pure-white": "#FFFFFF", "ivory-white": "#F7F6F4", "charcoal-black": "#1A1A1A" }

<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: #5829B7; --gradient-partner: #A389D7; --gradient-accent: #395CAD; --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: #5829B7; --gradient-text-b: #A389D7; --gradient-text-c: #395CAD; 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>

Violet Golden Yellow Color Palette

Violet Golden Yellow Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system

Palette workspace

Violet Golden Yellow Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system