China Flag Inspired Color Palette for Brand and UI Design

China Flag Inspired Color Palette

This palette channels the assertive red-and-gold energy of the China flag while keeping the system practical for modern branding and UI. The bright crimson establishes recognition, the warm gold adds ceremonial emphasis, and the neutral foundation keeps the result usable across interfaces without losing symbolic clarity.

AnalogousNonechina flag inspiredcrimsongoldnational energy

Main (Brand) Colors

The main colors pair a vivid ceremonial red with a warm gold accent, creating a recognizably China flag inspired system that feels bold, symbolic, and immediately legible. The relationship is crisp rather than decorative, which keeps the palette strong for logos, campaigns, and interface highlights.

PrimaryNational Crimson

RolesLogo, Btn Primary Bg

This red delivers the strongest flag reference and gives the brand immediate authority and recognition.

HEX#DE2910

RGB222, 41, 16

HSL7, 87, 47

CMYK0, 82, 93, 13

SecondaryCeremonial Gold

RolesLink, Btn Secondary Bg, Headline

This gold adds contrast, prestige, and a warm highlight that keeps the palette from feeling one-note.

HEX#F2C230

RGB242, 194, 48

HSL45, 88, 57

CMYK0, 20, 80, 5

Support Colors

The support colors extend the flag-inspired palette with quieter, more usable accents that reinforce the red-gold system instead of competing with it. They soften transitions, improve interface hierarchy, and give the palette room to breathe in practical applications.

Deep Banner Red

RolesBtn Outlined Border, Icon

This deeper red strengthens borders and icons while staying visually aligned with the primary crimson.

HEX#B11F17

RGB177, 31, 23

HSL3, 77, 39

CMYK0, 82, 87, 31

Old Silk Gold

RolesBtn Outlined Text, Border, Divider, Outline

This muted gold balances the brighter accent tone and works well for understated UI structure and outline treatments.

HEX#D9A11E

RGB217, 161, 30

HSL42, 76, 48

CMYK0, 26, 86, 15

Neutral Colors

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

Pure White

RolesBtn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Rice Paper

RolesBg Light

HEX#F6F2EA

RGB246, 242, 234

HSL40, 40, 94

CMYK0, 2, 5, 4

Ink Black

RolesBg Dark, Text, Btn Secondary Text

HEX#141414

RGB20, 20, 20

HSL0, 0, 8

CMYK0, 0, 0, 92

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "National Crimson", "hex": "#DE2910", "role": "main", "cmyk": { "c": 0, "m": 82, "y": 93, "k": 13, "source": "colorfly" } }, { "name": "Ceremonial Gold", "hex": "#F2C230", "role": "main", "cmyk": { "c": 0, "m": 20, "y": 80, "k": 5, "source": "colorfly" } }, { "name": "Deep Banner Red", "hex": "#B11F17", "role": "support", "cmyk": { "c": 0, "m": 82, "y": 87, "k": 31, "source": "colorfly" } }, { "name": "Old Silk Gold", "hex": "#D9A11E", "role": "support", "cmyk": { "c": 0, "m": 26, "y": 86, "k": 15, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Rice Paper", "hex": "#F6F2EA", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 5, "k": 4, "source": "colorfly" } }, { "name": "Ink Black", "hex": "#141414", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 92, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-national-crimson: #DE2910; --color-ceremonial-gold: #F2C230; --color-deep-banner-red: #B11F17; --color-old-silk-gold: #D9A11E; --color-pure-white: #FFFFFF; --color-rice-paper: #F6F2EA; --color-ink-black: #141414; }

:root { --role-logo: #DE2910; --role-btn-primary-bg: #DE2910; --role-link: #F2C230; --role-btn-secondary-bg: #F2C230; --role-headline: #F2C230; --role-btn-outlined-border: #B11F17; --role-icon: #B11F17; --role-btn-outlined-text: #D9A11E; --role-border: #D9A11E; --role-divider: #D9A11E; --role-outline: #D9A11E; --role-btn-primary-text: #FFFFFF; --role-bg-light: #F6F2EA; --role-bg-dark: #141414; --role-text: #141414; --role-btn-secondary-text: #141414; }

{ "national-crimson": "#DE2910", "ceremonial-gold": "#F2C230", "deep-banner-red": "#B11F17", "old-silk-gold": "#D9A11E", "pure-white": "#FFFFFF", "rice-paper": "#F6F2EA", "ink-black": "#141414" }

<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: #DE2910; --gradient-partner: #ED897C; --gradient-accent: #B11F17; --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: #DE2910; --gradient-text-b: #ED897C; --gradient-text-c: #B11F17; 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>