#B8A596 + #C7B69A + #ECD6AD + #D99089 + #FFAAA3 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8A596

Apricot · DarkGray · Warm Sun

HEX

#B8A596

RGB

rgb(184, 165, 150)

HSL

hsl(26, 19%, 65%)

HSB

hsb(26, 18%, 72%)

CMYK

cmyk(0%, 10%, 18%, 28%)

Oklch

oklch(73.4% 0.031 60.6)

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

#C7B69A

Ginger · Tan · Warm Sun

HEX

#C7B69A

RGB

rgb(199, 182, 154)

HSL

hsl(37, 29%, 69%)

HSB

hsb(37, 23%, 78%)

CMYK

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

Oklch

oklch(78.3% 0.043 80.2)

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

#ECD6AD

Goose Yellow · Wheat · Peach Orange

HEX

#ECD6AD

RGB

rgb(236, 214, 173)

HSL

hsl(39, 62%, 80%)

HSB

hsb(39, 27%, 93%)

CMYK

cmyk(0%, 9%, 27%, 7%)

Oklch

oklch(88.4% 0.059 83.0)

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

#D99089

Peach Pink · DarkSalmon · Coral Red

HEX

#D99089

RGB

rgb(217, 144, 137)

HSL

hsl(5, 51%, 69%)

HSB

hsb(5, 37%, 85%)

CMYK

cmyk(0%, 34%, 37%, 15%)

Oklch

oklch(72.5% 0.090 25.5)

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

#FFAAA3

Peach Pink · LightPink · Cherry Blossom

HEX

#FFAAA3

RGB

rgb(255, 170, 163)

HSL

hsl(5, 100%, 82%)

HSB

hsb(5, 36%, 100%)

CMYK

cmyk(0%, 33%, 36%, 0%)

Oklch

oklch(81.9% 0.101 24.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8A596

95A8B7

Analogous

B79597

B8A596

B7B495

Triadic

B8A596

95B7A3

A395B7

Split-Comp.

B8A596

95B7B4

9597B7

Tetradic

B8A596

97B795

95A8B7

B495B7

Contrast Matrix WCAG 2.1 Contrast

B8A596	C7B69A	ECD6AD	D99089	FFAAA3
—	1.2 Fail	1.7 Fail	1.1 Fail	1.3 Fail
1.2 Fail	—	1.4 Fail	1.3 Fail	1.1 Fail
1.7 Fail	1.4 Fail	—	1.8 Fail	1.3 Fail
1.1 Fail	1.3 Fail	1.8 Fail	—	1.4 Fail
1.3 Fail	1.1 Fail	1.3 Fail	1.4 Fail	—

White BG

2.4Fail

2.0Fail

1.4Fail

2.5Fail

1.8Fail

Black BG

8.9AAA

10.6AAA

14.8AAA

8.3AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0B09A

C0BFA1

E2E2B7

B9B98B

DAD9A5

Deuteranopia

B1B29B

C1C2A2

E4E5B9

BEC38B

DFE6A5

Tritanopia

B79C9D

C6A6A7

EBBFC0

D58C8C

FBA6A6

Achromatopsia

A9A9A9

B8B8B8

D8D8D8

A5A5A5

C3C3C3

Shades & Tints Shades & Tints

#B8A596

Dark

Light

#C7B69A

Dark

Light

#ECD6AD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8a596;
  --color-2: #c7b69a;
  --color-3: #ecd6ad;
  --color-4: #d99089;
  --color-5: #ffaaa3;
}

SCSS

$color-1: #b8a596;
$color-2: #c7b69a;
$color-3: #ecd6ad;
$color-4: #d99089;
$color-5: #ffaaa3;

TAILWIND

colors: {
  'brand-1': '#b8a596',
  'brand-2': '#c7b69a',
  'brand-3': '#ecd6ad',
  'brand-4': '#d99089',
  'brand-5': '#ffaaa3',
}

RGB Array

[184, 165, 150], [199, 182, 154], [236, 214, 173], [217, 144, 137], [255, 170, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B8A596, #C7B69A, #ECD6AD, #D99089, #FFAAA3 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: #b8a596; --color-2: #c7b69a; --color-3: #ecd6ad; --color-4: #d99089; --color-5: #ffaaa3. 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