← Back to Editor

#331406 · #FFFAF0 · #C3C579 · #B0C71C · #CFDC00

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#331406

Tangerine · Black · Cinnamon

HEX
#331406
RGB
rgb(51, 20, 6)
HSL
hsl(19, 79%, 11%)
HSB
hsb(19, 88%, 20%)
CMYK
cmyk(0%, 61%, 88%, 80%)
Oklch
oklch(23.5% 0.055 44.0)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#FFFAF0

Goose Yellow · SeaShell · Lemon Cream

HEX
#FFFAF0
RGB
rgb(255, 250, 240)
HSL
hsl(40, 100%, 97%)
HSB
hsb(40, 6%, 100%)
CMYK
cmyk(0%, 2%, 6%, 0%)
Oklch
oklch(98.6% 0.014 84.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#C3C579

Fresh Green · Tan · Sunflower

HEX
#C3C579
RGB
rgb(195, 197, 121)
HSL
hsl(62, 40%, 62%)
HSB
hsb(62, 39%, 77%)
CMYK
cmyk(1%, 0%, 39%, 23%)
Oklch
oklch(80.5% 0.098 109.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#B0C71C

Autumn Sage · GoldenRod · Honey Gold

HEX
#B0C71C
RGB
rgb(176, 199, 28)
HSL
hsl(68, 75%, 45%)
HSB
hsb(68, 86%, 78%)
CMYK
cmyk(12%, 0%, 86%, 22%)
Oklch
oklch(78.5% 0.177 117.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#CFDC00

Autumn Sage · Gold · Honey Gold

HEX
#CFDC00
RGB
rgb(207, 220, 0)
HSL
hsl(64, 100%, 43%)
HSB
hsb(64, 100%, 86%)
CMYK
cmyk(6%, 0%, 100%, 14%)
Oklch
oklch(85.5% 0.192 114.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

331406
062432

Analogous

32060E
331406
322A06

Triadic

331406
063214
140632

Split-Comp.

331406
06322A
060E32

Tetradic

331406
0E3206
062432
2A0632

Contrast Matrix WCAG 2.1 Contrast

331406
FFFAF0
C3C579
B0C71C
CFDC00
—
16.2
AAA
9.3
AAA
8.9
AAA
11.2
AAA
16.2
AAA
—
1.7
Fail
1.8
Fail
1.5
Fail
9.3
AAA
1.7
Fail
—
1.0
Fail
1.2
Fail
8.9
AAA
1.8
Fail
1.0
Fail
—
1.3
Fail
11.2
AAA
1.5
Fail
1.2
Fail
1.3
Fail
—
White BG
16.9AAA
1.0Fail
1.8Fail
1.9Fail
1.5Fail
Black BG
1.2Fail
20.2AAA
11.6AAA
11.0AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

262509
FDFDF2
C4C48B
BABA45
D5D535

Deuteranopia

272A0A
FDFEF3
C4C490
B9B74F
D4D342

Tritanopia

310C0D
FFF4F5
C39A9D
B1666D
D05F69

Achromatopsia

1C1C1C
FAFAFA
BCBCBC
ADADAD
BFBFBF

Shades & Tints Shades & Tints

#331406

Dark
Light

#FFFAF0

Dark
Light

#C3C579

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #331406;
  --color-2: #fffaf0;
  --color-3: #c3c579;
  --color-4: #b0c71c;
  --color-5: #cfdc00;
}

SCSS

$color-1: #331406;
$color-2: #fffaf0;
$color-3: #c3c579;
$color-4: #b0c71c;
$color-5: #cfdc00;

TAILWIND

colors: {
  'brand-1': '#331406',
  'brand-2': '#fffaf0',
  'brand-3': '#c3c579',
  'brand-4': '#b0c71c',
  'brand-5': '#cfdc00',
}

RGB Array

[51, 20, 6], [255, 250, 240], [195, 197, 121], [176, 199, 28], [207, 220, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #331406, #FFFAF0, #C3C579, #B0C71C, #CFDC00 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #331406; --color-2: #fffaf0; --color-3: #c3c579; --color-4: #b0c71c; --color-5: #cfdc00. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color