#819687 + #B8A882 + #D6BB7A + #F5C193 + #FCF5C2 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#819687

Celadon · Gray · Warm Gray

HEX

#819687

RGB

rgb(129, 150, 135)

HSL

hsl(137, 9%, 55%)

HSB

hsb(137, 14%, 59%)

CMYK

cmyk(14%, 0%, 10%, 41%)

Oklch

oklch(65.2% 0.033 154.3)

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

#B8A882

Ginger · Tan · Sunflower

HEX

#B8A882

RGB

rgb(184, 168, 130)

HSL

hsl(42, 28%, 62%)

HSB

hsb(42, 29%, 72%)

CMYK

cmyk(0%, 9%, 29%, 28%)

Oklch

oklch(73.6% 0.055 87.9)

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

#D6BB7A

Ginger · BurlyWood · Sunflower

HEX

#D6BB7A

RGB

rgb(214, 187, 122)

HSL

hsl(42, 53%, 66%)

HSB

hsb(42, 43%, 84%)

CMYK

cmyk(0%, 13%, 43%, 16%)

Oklch

oklch(80.1% 0.089 87.8)

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

#F5C193

Apricot · BurlyWood · Peach Orange

HEX

#F5C193

RGB

rgb(245, 193, 147)

HSL

hsl(28, 83%, 77%)

HSB

hsb(28, 40%, 96%)

CMYK

cmyk(0%, 21%, 40%, 4%)

Oklch

oklch(84.7% 0.085 62.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FCF5C2

Fresh Green · Bisque · Lemon Cream

HEX

#FCF5C2

RGB

rgb(252, 245, 194)

HSL

hsl(53, 91%, 87%)

HSB

hsb(53, 23%, 99%)

CMYK

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

Oklch

oklch(96.3% 0.066 101.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

819687

978291

Analogous

869782

819687

829792

Triadic

819687

888297

978882

Split-Comp.

819687

928297

978286

Tetradic

819687

828697

978291

979282

Contrast Matrix WCAG 2.1 Contrast

819687	B8A882	D6BB7A	F5C193	FCF5C2
—	1.3 Fail	1.7 Fail	1.9 Fail	2.9 Fail
1.3 Fail	—	1.3 Fail	1.4 Fail	2.1 Fail
1.7 Fail	1.3 Fail	—	1.1 Fail	1.7 Fail
1.9 Fail	1.4 Fail	1.1 Fail	—	1.5 Fail
2.9 Fail	2.1 Fail	1.7 Fail	1.5 Fail	—

White BG

3.2AA Large

2.3Fail

1.9Fail

1.6Fail

1.1Fail

Black BG

6.6AA

9.0AAA

11.2AAA

12.9AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8A8B

B1B18B

CACA8A

DEDE9E

F9F9CE

Deuteranopia

89878C

B2B38D

CCCE8E

E2E5A1

F9FAD1

Tritanopia

828D8E

B79294

D59699

F2A7A9

FCD8DA

Achromatopsia

8E8E8E

A8A8A8

BCBCBC

CBCBCB

F1F1F1

Shades & Tints Shades & Tints

#819687

Dark

Light

#B8A882

Dark

Light

#D6BB7A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #819687;
  --color-2: #b8a882;
  --color-3: #d6bb7a;
  --color-4: #f5c193;
  --color-5: #fcf5c2;
}

SCSS

$color-1: #819687;
$color-2: #b8a882;
$color-3: #d6bb7a;
$color-4: #f5c193;
$color-5: #fcf5c2;

TAILWIND

colors: {
  'brand-1': '#819687',
  'brand-2': '#b8a882',
  'brand-3': '#d6bb7a',
  'brand-4': '#f5c193',
  'brand-5': '#fcf5c2',
}

RGB Array

[129, 150, 135], [184, 168, 130], [214, 187, 122], [245, 193, 147], [252, 245, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #819687, #B8A882, #D6BB7A, #F5C193, #FCF5C2 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: #819687; --color-2: #b8a882; --color-3: #d6bb7a; --color-4: #f5c193; --color-5: #fcf5c2. 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 warm-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