Golden Blue Education Color Palette for Reliable and Intellectual Brn...

Golden Blue Education Color Palette

This brand palette uses warm golden yellows and a rich, clear blue to evoke reliability, intellect, and energy inspired by the image's color contrasts. The support colors provide softer, complementary tones that balance the vibrancy while the neutrals ensure clean, readable text and interface elements.

ComplementaryEducationeducationknowledgeintellectreliable

Main (Brand) Colors

The main colors combine a golden yellow and a crisp blue, creating a vibrant complementary contrast that is both energizing and trustworthy for educational branding.

PrimaryGolden Yellow

RolesLogo, Btn Primary Bg, Btn Outlined Border

Golden Yellow brings warmth and energy, symbolizing enthusiasm and optimism essential for engaging education brands.

HEX#F7B733

RGB247, 183, 51

HSL40, 92, 58

CMYK0, 26, 79, 3

SecondaryRoyal Blue

RolesLink, Btn Secondary Bg, Btn Outlined Text

Royal Blue evokes intelligence and reliability, providing a professional and trustworthy tone to balance the vibrant yellow.

HEX#2F2FA2

RGB47, 47, 162

HSL240, 55, 41

CMYK71, 71, 0, 36

Support Colors

Support colors extend the palette with a range of purples and softer blues, providing visual depth and balance without distracting from the main complementary colors.

Soft Purple

RolesHeadline, Icon, Border, Divider, Outline

Soft Purple adds an approachable, academic nuance that complements both yellow and blue, gently bridging the two main colors.

HEX#8A7BC9

RGB138, 123, 201

HSL252, 42, 64

CMYK31, 39, 0, 21

Muted Indigo

Muted Indigo reinforces the blue family with a softer tone, supporting interface elements and providing subtle contrast.

HEX#5B5DC3

RGB91, 93, 195

HSL239, 46, 56

CMYK53, 52, 0, 24

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Soft Ivory

RolesBg Dark

HEX#F0F0F3

RGB240, 240, 243

HSL240, 11, 95

CMYK1, 1, 0, 5

Charcoal Black

RolesText, Btn Primary 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": "Golden Yellow", "hex": "#F7B733", "role": "main", "cmyk": { "c": 0, "m": 26, "y": 79, "k": 3, "source": "colorfly" } }, { "name": "Royal Blue", "hex": "#2F2FA2", "role": "main", "cmyk": { "c": 71, "m": 71, "y": 0, "k": 36, "source": "colorfly" } }, { "name": "Soft Purple", "hex": "#8A7BC9", "role": "support", "cmyk": { "c": 31, "m": 39, "y": 0, "k": 21, "source": "colorfly" } }, { "name": "Muted Indigo", "hex": "#5B5DC3", "role": "support", "cmyk": { "c": 53, "m": 52, "y": 0, "k": 24, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Soft Ivory", "hex": "#F0F0F3", "role": "neutral", "cmyk": { "c": 1, "m": 1, "y": 0, "k": 5, "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-golden-yellow: #F7B733; --color-royal-blue: #2F2FA2; --color-soft-purple: #8A7BC9; --color-muted-indigo: #5B5DC3; --color-pure-white: #FFFFFF; --color-soft-ivory: #F0F0F3; --color-charcoal-black: #1A1A1A; }

:root { --role-logo: #F7B733; --role-btn-primary-bg: #F7B733; --role-btn-outlined-border: #F7B733; --role-link: #2F2FA2; --role-btn-secondary-bg: #2F2FA2; --role-btn-outlined-text: #2F2FA2; --role-headline: #8A7BC9; --role-icon: #8A7BC9; --role-border: #8A7BC9; --role-divider: #8A7BC9; --role-outline: #8A7BC9; --role-bg-light: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F0F0F3; --role-text: #1A1A1A; --role-btn-primary-text: #1A1A1A; }

{ "golden-yellow": "#F7B733", "royal-blue": "#2F2FA2", "soft-purple": "#8A7BC9", "muted-indigo": "#5B5DC3", "pure-white": "#FFFFFF", "soft-ivory": "#F0F0F3", "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: #F7B733; --gradient-partner: #BC8B27; --gradient-accent: #8A7BC9; --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: #85631C; --gradient-text-b: #BC8B27; --gradient-text-c: #8A7BC9; 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>