#F0D0A1 + #E8C199 + #C4BF99 + #94B092 + #5D735E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0D0A1

Goose Yellow · Wheat · Peach Orange

HEX

#F0D0A1

RGB

rgb(240, 208, 161)

HSL

hsl(36, 72%, 79%)

HSB

hsb(36, 33%, 94%)

CMYK

cmyk(0%, 13%, 33%, 6%)

Oklch

oklch(87.3% 0.071 77.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E8C199

Goose Yellow · BurlyWood · Warm Sun

HEX

#E8C199

RGB

rgb(232, 193, 153)

HSL

hsl(30, 63%, 75%)

HSB

hsb(30, 34%, 91%)

CMYK

cmyk(0%, 17%, 34%, 9%)

Oklch

oklch(83.5% 0.069 67.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#C4BF99

Fresh Green · Tan · Sunflower

HEX

#C4BF99

RGB

rgb(196, 191, 153)

HSL

hsl(53, 27%, 68%)

HSB

hsb(53, 22%, 77%)

CMYK

cmyk(0%, 3%, 22%, 23%)

Oklch

oklch(79.9% 0.052 101.2)

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

#94B092

Celadon · DarkSeaGreen · Apple Green

HEX

#94B092

RGB

rgb(148, 176, 146)

HSL

hsl(116, 16%, 63%)

HSB

hsb(116, 17%, 69%)

CMYK

cmyk(16%, 0%, 17%, 31%)

Oklch

oklch(72.8% 0.053 143.2)

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

#5D735E

Celadon · DimGray · Olive Green

HEX

#5D735E

RGB

rgb(93, 115, 94)

HSL

hsl(123, 11%, 41%)

HSB

hsb(123, 19%, 45%)

CMYK

cmyk(19%, 0%, 18%, 55%)

Oklch

oklch(53.1% 0.042 146.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0D0A1

A3C2F0

Analogous

F0ABA3

F0D0A1

E8F0A3

Triadic

F0D0A1

A3F0D1

D1A3F0

Split-Comp.

F0D0A1

A3E8F0

ABA3F0

Tetradic

F0D0A1

A3F0AB

A3C2F0

F0A3E8

Contrast Matrix WCAG 2.1 Contrast

F0D0A1	E8C199	C4BF99	94B092	5D735E
—	1.1 Fail	1.3 Fail	1.6 Fail	3.5 AA Large
1.1 Fail	—	1.1 Fail	1.4 Fail	3.1 AA Large
1.3 Fail	1.1 Fail	—	1.3 Fail	2.8 Fail
1.6 Fail	1.4 Fail	1.3 Fail	—	2.2 Fail
3.5 AA Large	3.1 AA Large	2.8 Fail	2.2 Fail	—

White BG

1.5Fail

1.7Fail

1.9Fail

2.4Fail

5.1AA

Black BG

14.2AAA

12.5AAA

11.3AAA

8.9AAA

4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E2AC

D7D7A3

C2C2A2

A0A099

676763

Deuteranopia

E4E6AF

D9DCA5

C2C3A4

9F9C9B

656464

Tritanopia

EEB5B7

E6AAAC

C4A9AB

959FA0

5E6768

Achromatopsia

D4D4D4

C8C8C8

BCBCBC

A4A4A4

6A6A6A

Shades & Tints Shades & Tints

#F0D0A1

Dark

Light

#E8C199

Dark

Light

#C4BF99

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0d0a1;
  --color-2: #e8c199;
  --color-3: #c4bf99;
  --color-4: #94b092;
  --color-5: #5d735e;
}

SCSS

$color-1: #f0d0a1;
$color-2: #e8c199;
$color-3: #c4bf99;
$color-4: #94b092;
$color-5: #5d735e;

TAILWIND

colors: {
  'brand-1': '#f0d0a1',
  'brand-2': '#e8c199',
  'brand-3': '#c4bf99',
  'brand-4': '#94b092',
  'brand-5': '#5d735e',
}

RGB Array

[240, 208, 161], [232, 193, 153], [196, 191, 153], [148, 176, 146], [93, 115, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0D0A1, #E8C199, #C4BF99, #94B092, #5D735E 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: #f0d0a1; --color-2: #e8c199; --color-3: #c4bf99; --color-4: #94b092; --color-5: #5d735e. 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