← Back to Editor

#F9F9F1 · #C4E2E0 · #BCB020 · #524229 · #787167

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F9F9F1

Fresh Green · SeaShell · Lemon Cream

HEX
#F9F9F1
RGB
rgb(249, 249, 241)
HSL
hsl(60, 40%, 96%)
HSB
hsb(60, 3%, 98%)
CMYK
cmyk(0%, 0%, 3%, 2%)
Oklch
oklch(98.0% 0.011 106.6)

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

#C4E2E0

Jade · LightGray · Glacier Blue

HEX
#C4E2E0
RGB
rgb(196, 226, 224)
HSL
hsl(176, 34%, 83%)
HSB
hsb(176, 13%, 89%)
CMYK
cmyk(13%, 0%, 1%, 11%)
Oklch
oklch(89.0% 0.032 191.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#BCB020

Autumn Sage · GoldenRod · Honey Gold

HEX
#BCB020
RGB
rgb(188, 176, 32)
HSL
hsl(55, 71%, 43%)
HSB
hsb(55, 83%, 74%)
CMYK
cmyk(0%, 6%, 83%, 26%)
Oklch
oklch(74.4% 0.150 104.3)

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

#524229

Ochre · DarkOliveGreen · Cinnamon

HEX
#524229
RGB
rgb(82, 66, 41)
HSL
hsl(37, 33%, 24%)
HSB
hsb(37, 50%, 32%)
CMYK
cmyk(0%, 20%, 50%, 68%)
Oklch
oklch(38.9% 0.044 78.0)

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

#787167

Ochre · DimGray · Warm Gray

HEX
#787167
RGB
rgb(120, 113, 103)
HSL
hsl(35, 8%, 44%)
HSB
hsb(35, 14%, 47%)
CMYK
cmyk(0%, 6%, 14%, 53%)
Oklch
oklch(55.2% 0.017 77.0)

Traditional「Ochre」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9F9F1
F1F1F9

Analogous

F9F5F1
F9F9F1
F5F9F1

Triadic

F9F9F1
F1F9F9
F9F1F9

Split-Comp.

F9F9F1
F1F5F9
F5F1F9

Tetradic

F9F9F1
F1F9F5
F1F1F9
F9F1F5

Contrast Matrix WCAG 2.1 Contrast

F9F9F1
C4E2E0
BCB020
524229
787167
—
1.3
Fail
2.1
Fail
9.1
AAA
4.6
AA
1.3
Fail
—
1.6
Fail
7.1
AAA
3.5
AA Large
2.1
Fail
1.6
Fail
—
4.3
AA Large
2.2
Fail
9.1
AAA
7.1
AAA
4.3
AA Large
—
2.0
Fail
4.6
AA
3.5
AA Large
2.2
Fail
2.0
Fail
—
White BG
1.1Fail
1.4Fail
2.2Fail
9.7AAA
4.8AA
Black BG
19.8AAA
15.3AAA
9.4AAA
2.2Fail
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9F3
D1D1E0
B7B743
4B4B2F
757569

Deuteranopia

F9F9F3
CFCDE1
B8B84B
4C4D31
75766A

Tritanopia

F9F4F5
C6E1E1
BB5E64
513435
786B6C

Achromatopsia

F8F8F8
D9D9D9
A3A3A3
444444
727272

Shades & Tints Shades & Tints

#F9F9F1

Dark
Light

#C4E2E0

Dark
Light

#BCB020

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9f9f1;
  --color-2: #c4e2e0;
  --color-3: #bcb020;
  --color-4: #524229;
  --color-5: #787167;
}

SCSS

$color-1: #f9f9f1;
$color-2: #c4e2e0;
$color-3: #bcb020;
$color-4: #524229;
$color-5: #787167;

TAILWIND

colors: {
  'brand-1': '#f9f9f1',
  'brand-2': '#c4e2e0',
  'brand-3': '#bcb020',
  'brand-4': '#524229',
  'brand-5': '#787167',
}

RGB Array

[249, 249, 241], [196, 226, 224], [188, 176, 32], [82, 66, 41], [120, 113, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9F9F1, #C4E2E0, #BCB020, #524229, #787167 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f9f9f1; --color-2: #c4e2e0; --color-3: #bcb020; --color-4: #524229; --color-5: #787167. 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 tech, SaaS, healthcare, eco industries. 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