#F0EAC6 + #DDCBA3 + #D8A58A + #CA8F81 + #B07D86 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0EAC6

Fresh Green · Bisque · Lemon Cream

HEX

#F0EAC6

RGB

rgb(240, 234, 198)

HSL

hsl(51, 58%, 86%)

HSB

hsb(51, 17%, 94%)

CMYK

cmyk(0%, 3%, 17%, 6%)

Oklch

oklch(93.3% 0.048 99.4)

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

#DDCBA3

Goose Yellow · BurlyWood · Sunflower

HEX

#DDCBA3

RGB

rgb(221, 203, 163)

HSL

hsl(41, 46%, 75%)

HSB

hsb(41, 26%, 87%)

CMYK

cmyk(0%, 8%, 26%, 13%)

Oklch

oklch(84.7% 0.057 86.6)

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

#D8A58A

Apricot · Tan · Warm Sun

HEX

#D8A58A

RGB

rgb(216, 165, 138)

HSL

hsl(21, 50%, 69%)

HSB

hsb(21, 36%, 85%)

CMYK

cmyk(0%, 24%, 36%, 15%)

Oklch

oklch(76.3% 0.071 49.1)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#CA8F81

Peach Pink · DarkSalmon · Coral Red

HEX

#CA8F81

RGB

rgb(202, 143, 129)

HSL

hsl(12, 41%, 65%)

HSB

hsb(12, 36%, 79%)

CMYK

cmyk(0%, 29%, 36%, 21%)

Oklch

oklch(70.4% 0.075 33.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B07D86

Crimson · Gray · Passion Red

HEX

#B07D86

RGB

rgb(176, 125, 134)

HSL

hsl(349, 24%, 59%)

HSB

hsb(349, 29%, 69%)

CMYK

cmyk(0%, 29%, 24%, 31%)

Oklch

oklch(64.3% 0.064 7.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0EAC6

C7CDF0

Analogous

F0D5C7

F0EAC6

E2F0C7

Triadic

F0EAC6

C7F0EA

EAC7F0

Split-Comp.

F0EAC6

C7E2F0

D5C7F0

Tetradic

F0EAC6

C7F0D5

C7CDF0

F0C7E2

Contrast Matrix WCAG 2.1 Contrast

F0EAC6	DDCBA3	D8A58A	CA8F81	B07D86
—	1.3 Fail	1.8 Fail	2.2 Fail	2.8 Fail
1.3 Fail	—	1.4 Fail	1.7 Fail	2.1 Fail
1.8 Fail	1.4 Fail	—	1.2 Fail	1.6 Fail
2.2 Fail	1.7 Fail	1.2 Fail	—	1.3 Fail
2.8 Fail	2.1 Fail	1.6 Fail	1.3 Fail	—

White BG

1.2Fail

1.6Fail

2.2Fail

2.7Fail

3.4AA Large

Black BG

17.3AAA

13.1AAA

9.7AAA

7.8AAA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDCF

D5D5AD

C2C191

B0B084

9A9984

Deuteranopia

EEEED1

D6D8AF

C5C992

B4B885

9DA183

Tritanopia

F0D6D7

DCB4B6

D59697

C78788

AD8282

Achromatopsia

E8E8E8

CCCCCC

B1B1B1

9F9F9F

8D8D8D

Shades & Tints Shades & Tints

#F0EAC6

Dark

Light

#DDCBA3

Dark

Light

#D8A58A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0eac6;
  --color-2: #ddcba3;
  --color-3: #d8a58a;
  --color-4: #ca8f81;
  --color-5: #b07d86;
}

SCSS

$color-1: #f0eac6;
$color-2: #ddcba3;
$color-3: #d8a58a;
$color-4: #ca8f81;
$color-5: #b07d86;

TAILWIND

colors: {
  'brand-1': '#f0eac6',
  'brand-2': '#ddcba3',
  'brand-3': '#d8a58a',
  'brand-4': '#ca8f81',
  'brand-5': '#b07d86',
}

RGB Array

[240, 234, 198], [221, 203, 163], [216, 165, 138], [202, 143, 129], [176, 125, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F0EAC6, #DDCBA3, #D8A58A, #CA8F81, #B07D86 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: #f0eac6; --color-2: #ddcba3; --color-3: #d8a58a; --color-4: #ca8f81; --color-5: #b07d86. 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