← Back to Editor

#FCE09D · #B6C5A4 · #80A37E · #70775A · #66422E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FCE09D

Goose Yellow · Khaki · Lemon Cream

HEX
#FCE09D
RGB
rgb(252, 224, 157)
HSL
hsl(42, 94%, 80%)
HSB
hsb(42, 38%, 99%)
CMYK
cmyk(0%, 11%, 38%, 1%)
Oklch
oklch(91.5% 0.090 87.8)

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

#B6C5A4

Willow Green · Silver · Apple Green

HEX
#B6C5A4
RGB
rgb(182, 197, 164)
HSL
hsl(87, 22%, 71%)
HSB
hsb(87, 17%, 77%)
CMYK
cmyk(8%, 0%, 17%, 23%)
Oklch
oklch(80.3% 0.048 127.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#80A37E

Celadon · DarkSeaGreen · Olive Green

HEX
#80A37E
RGB
rgb(128, 163, 126)
HSL
hsl(117, 17%, 57%)
HSB
hsb(117, 23%, 64%)
CMYK
cmyk(21%, 0%, 23%, 36%)
Oklch
oklch(67.9% 0.066 143.4)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#70775A

Grass Green · DimGray · Olive Green

HEX
#70775A
RGB
rgb(112, 119, 90)
HSL
hsl(74, 14%, 41%)
HSB
hsb(74, 24%, 47%)
CMYK
cmyk(6%, 0%, 24%, 53%)
Oklch
oklch(55.5% 0.044 118.9)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#66422E

Tangerine · DarkOliveGreen · Amber Brown

HEX
#66422E
RGB
rgb(102, 66, 46)
HSL
hsl(21, 38%, 29%)
HSB
hsb(21, 55%, 40%)
CMYK
cmyk(0%, 35%, 55%, 60%)
Oklch
oklch(41.5% 0.059 49.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCE09D
9CB9FC

Analogous

FCAF9C
FCE09D
E9FC9C

Triadic

FCE09D
9CFCDF
DF9CFC

Split-Comp.

FCE09D
9CE9FC
AF9CFC

Tetradic

FCE09D
9CFCAF
9CB9FC
FC9CE9

Contrast Matrix WCAG 2.1 Contrast

FCE09D
B6C5A4
80A37E
70775A
66422E
—
1.4
Fail
2.2
Fail
3.6
AA Large
6.8
AA
1.4
Fail
—
1.5
Fail
2.6
Fail
4.8
AA
2.2
Fail
1.5
Fail
—
1.7
Fail
3.1
AA Large
3.6
AA Large
2.6
Fail
1.7
Fail
—
1.9
Fail
6.8
AA
4.8
AA
3.1
AA Large
1.9
Fail
—
White BG
1.3Fail
1.8Fail
2.8Fail
4.7AA
8.8AAA
Black BG
16.3AAA
11.5AAA
7.5AAA
4.5AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0AD
BCBDAC
8F8F87
737361
565633

Deuteranopia

F2F4B1
BCBBAE
8D8B89
737263
595B34

Tritanopia

FBBABD
B7B2B4
828E90
706768
643738

Achromatopsia

E1E1E1
BDBDBD
949494
727272
4A4A4A

Shades & Tints Shades & Tints

#FCE09D

Dark
Light

#B6C5A4

Dark
Light

#80A37E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fce09d;
  --color-2: #b6c5a4;
  --color-3: #80a37e;
  --color-4: #70775a;
  --color-5: #66422e;
}

SCSS

$color-1: #fce09d;
$color-2: #b6c5a4;
$color-3: #80a37e;
$color-4: #70775a;
$color-5: #66422e;

TAILWIND

colors: {
  'brand-1': '#fce09d',
  'brand-2': '#b6c5a4',
  'brand-3': '#80a37e',
  'brand-4': '#70775a',
  'brand-5': '#66422e',
}

RGB Array

[252, 224, 157], [182, 197, 164], [128, 163, 126], [112, 119, 90], [102, 66, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FCE09D, #B6C5A4, #80A37E, #70775A, #66422E 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: #fce09d; --color-2: #b6c5a4; --color-3: #80a37e; --color-4: #70775a; --color-5: #66422e. 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