#F8C076 + #ECC581 + #DFC98B + #D3CE96 + #CBD09C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8C076

Goose Yellow · BurlyWood · Warm Sun

HEX

#F8C076

RGB

rgb(248, 192, 118)

HSL

hsl(34, 90%, 72%)

HSB

hsb(34, 52%, 97%)

CMYK

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

Oklch

oklch(84.3% 0.112 73.0)

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

#ECC581

Goose Yellow · BurlyWood · Warm Sun

HEX

#ECC581

RGB

rgb(236, 197, 129)

HSL

hsl(38, 74%, 72%)

HSB

hsb(38, 45%, 93%)

CMYK

cmyk(0%, 17%, 45%, 7%)

Oklch

oklch(84.2% 0.097 80.7)

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

#DFC98B

Goose Yellow · BurlyWood · Sunflower

HEX

#DFC98B

RGB

rgb(223, 201, 139)

HSL

hsl(44, 57%, 71%)

HSB

hsb(44, 38%, 87%)

CMYK

cmyk(0%, 10%, 38%, 13%)

Oklch

oklch(84.0% 0.084 90.8)

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

#D3CE96

Fresh Green · Tan · Sunflower

HEX

#D3CE96

RGB

rgb(211, 206, 150)

HSL

hsl(55, 41%, 71%)

HSB

hsb(55, 29%, 83%)

CMYK

cmyk(0%, 2%, 29%, 17%)

Oklch

oklch(84.2% 0.074 103.6)

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

#CBD09C

Fresh Green · Tan · Sunflower

HEX

#CBD09C

RGB

rgb(203, 208, 156)

HSL

hsl(66, 36%, 71%)

HSB

hsb(66, 25%, 82%)

CMYK

cmyk(2%, 0%, 25%, 18%)

Oklch

oklch(84.1% 0.069 112.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8C076

77AFF8

Analogous

F88077

F8C076

EFF877

Triadic

F8C076

77F8C0

C077F8

Split-Comp.

F8C076

77EFF8

8077F8

Tetradic

F8C076

77F880

77AFF8

F877EF

Contrast Matrix WCAG 2.1 Contrast

F8C076	ECC581	DFC98B	D3CE96	CBD09C
—	1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

1.6Fail

Black BG

12.8AAA

12.9AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0DF88

DBDB91

D5D59A

D1D1A4

CDCDA9

Deuteranopia

E3E78C

DDE095

D7D89E

D1D2A7

CDCDAC

Tritanopia

F59699

EA9EA1

DEA6A8

D3AEB1

CBB3B5

Achromatopsia

C8C8C8

C9C9C9

Shades & Tints Shades & Tints

#F8C076

Dark

Light

#ECC581

Dark

Light

#DFC98B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8c076;
  --color-2: #ecc581;
  --color-3: #dfc98b;
  --color-4: #d3ce96;
  --color-5: #cbd09c;
}

SCSS

$color-1: #f8c076;
$color-2: #ecc581;
$color-3: #dfc98b;
$color-4: #d3ce96;
$color-5: #cbd09c;

TAILWIND

colors: {
  'brand-1': '#f8c076',
  'brand-2': '#ecc581',
  'brand-3': '#dfc98b',
  'brand-4': '#d3ce96',
  'brand-5': '#cbd09c',
}

RGB Array

[248, 192, 118], [236, 197, 129], [223, 201, 139], [211, 206, 150], [203, 208, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8C076, #ECC581, #DFC98B, #D3CE96, #CBD09C 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: #f8c076; --color-2: #ecc581; --color-3: #dfc98b; --color-4: #d3ce96; --color-5: #cbd09c. 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