#FCF7B5 + #FFE49A + #D5C280 + #9CA77F + #5E8978 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FCF7B5

Fresh Green · Bisque · Lemon Cream

HEX

#FCF7B5

RGB

rgb(252, 247, 181)

HSL

hsl(56, 92%, 85%)

HSB

hsb(56, 28%, 99%)

CMYK

cmyk(0%, 2%, 28%, 1%)

Oklch

oklch(96.5% 0.084 104.2)

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

#FFE49A

Goose Yellow · Khaki · Lemon Cream

HEX

#FFE49A

RGB

rgb(255, 228, 154)

HSL

hsl(44, 100%, 80%)

HSB

hsb(44, 40%, 100%)

CMYK

cmyk(0%, 11%, 40%, 0%)

Oklch

oklch(92.5% 0.097 90.2)

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

#D5C280

Ginger · BurlyWood · Sunflower

HEX

#D5C280

RGB

rgb(213, 194, 128)

HSL

hsl(47, 50%, 67%)

HSB

hsb(47, 40%, 84%)

CMYK

cmyk(0%, 9%, 40%, 16%)

Oklch

oklch(81.5% 0.088 93.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#9CA77F

Grass Green · DarkSeaGreen · Olive Green

HEX

#9CA77F

RGB

rgb(156, 167, 127)

HSL

hsl(76, 19%, 58%)

HSB

hsb(76, 24%, 65%)

CMYK

cmyk(7%, 0%, 24%, 35%)

Oklch

oklch(70.9% 0.057 120.4)

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

#5E8978

Mineral Blue · SlateGray · Olive Green

HEX

#5E8978

RGB

rgb(94, 137, 120)

HSL

hsl(156, 19%, 45%)

HSB

hsb(156, 31%, 54%)

CMYK

cmyk(31%, 0%, 12%, 46%)

Oklch

oklch(59.3% 0.054 167.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCF7B5

B6BAFC

Analogous

FCD4B6

FCF7B5

DDFCB6

Triadic

FCF7B5

B6FCF7

F7B6FC

Split-Comp.

FCF7B5

B6DDFC

D4B6FC

Tetradic

FCF7B5

B6FCD4

B6BAFC

FCB6DD

Contrast Matrix WCAG 2.1 Contrast

FCF7B5	FFE49A	D5C280	9CA77F	5E8978
—	1.1 Fail	1.6 Fail	2.3 Fail	3.6 AA Large
1.1 Fail	—	1.4 Fail	2.0 Fail	3.2 AA Large
1.6 Fail	1.4 Fail	—	1.4 Fail	2.2 Fail
2.3 Fail	2.0 Fail	1.4 Fail	—	1.5 Fail
3.6 AA Large	3.2 AA Large	2.2 Fail	1.5 Fail	—

White BG

1.1Fail

1.2Fail

1.8Fail

2.5Fail

3.9AA Large

Black BG

19.1AAA

16.8AAA

11.9AAA

8.2AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAC5

F3F3AC

CDCD90

A1A189

71717C

Deuteranopia

FAFAC9

F5F7B0

CECF94

A09F8B

6E6B7D

Tritanopia

FCD2D4

FEBABD

D49D9F

9D9092

607F80

Achromatopsia

F1F1F1

E4E4E4

C0C0C0

9F9F9F

7A7A7A

Shades & Tints Shades & Tints

#FCF7B5

Dark

Light

#FFE49A

Dark

Light

#D5C280

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcf7b5;
  --color-2: #ffe49a;
  --color-3: #d5c280;
  --color-4: #9ca77f;
  --color-5: #5e8978;
}

SCSS

$color-1: #fcf7b5;
$color-2: #ffe49a;
$color-3: #d5c280;
$color-4: #9ca77f;
$color-5: #5e8978;

TAILWIND

colors: {
  'brand-1': '#fcf7b5',
  'brand-2': '#ffe49a',
  'brand-3': '#d5c280',
  'brand-4': '#9ca77f',
  'brand-5': '#5e8978',
}

RGB Array

[252, 247, 181], [255, 228, 154], [213, 194, 128], [156, 167, 127], [94, 137, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FCF7B5, #FFE49A, #D5C280, #9CA77F, #5E8978 is ideal for: health products, baby brands, fresh-style blogs. 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: #fcf7b5; --color-2: #ffe49a; --color-3: #d5c280; --color-4: #9ca77f; --color-5: #5e8978. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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