#AFB084 + #D9D7A6 + #FD3F3F + #D6CBB9 + #E8E6D9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFB084

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#AFB084

RGB

rgb(175, 176, 132)

HSL

hsl(61, 22%, 60%)

HSB

hsb(61, 25%, 69%)

CMYK

cmyk(1%, 0%, 25%, 31%)

Oklch

oklch(74.5% 0.060 108.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#D9D7A6

Fresh Green · Wheat · Sunflower

HEX

#D9D7A6

RGB

rgb(217, 215, 166)

HSL

hsl(58, 40%, 75%)

HSB

hsb(58, 24%, 85%)

CMYK

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

Oklch

oklch(86.9% 0.065 105.7)

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

#FD3F3F

Peach Pink · Tomato · Coral Red

HEX

#FD3F3F

RGB

rgb(253, 63, 63)

HSL

hsl(0, 98%, 62%)

HSB

hsb(0, 75%, 99%)

CMYK

cmyk(0%, 75%, 75%, 1%)

Oklch

oklch(65.5% 0.226 26.1)

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

#D6CBB9

Goose Yellow · Silver · Peach Orange

HEX

#D6CBB9

RGB

rgb(214, 203, 185)

HSL

hsl(37, 26%, 78%)

HSB

hsb(37, 14%, 84%)

CMYK

cmyk(0%, 5%, 14%, 16%)

Oklch

oklch(84.6% 0.027 80.2)

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

#E8E6D9

Fresh Green · Beige · Lemon Cream

HEX

#E8E6D9

RGB

rgb(232, 230, 217)

HSL

hsl(52, 25%, 88%)

HSB

hsb(52, 6%, 91%)

CMYK

cmyk(0%, 1%, 6%, 9%)

Oklch

oklch(92.3% 0.017 99.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFB084

8383AF

Analogous

AF9A83

AFB084

98AF83

Triadic

AFB084

83AFAF

AF83AF

Split-Comp.

AFB084

8398AF

9A83AF

Tetradic

AFB084

83AF9A

8383AF

AF8398

Contrast Matrix WCAG 2.1 Contrast

AFB084	D9D7A6	FD3F3F	D6CBB9	E8E6D9
—	1.5 Fail	1.6 Fail	1.4 Fail	1.8 Fail
1.5 Fail	—	2.4 Fail	1.1 Fail	1.2 Fail
1.6 Fail	2.4 Fail	—	2.2 Fail	2.8 Fail
1.4 Fail	1.1 Fail	2.2 Fail	—	1.3 Fail
1.8 Fail	1.2 Fail	2.8 Fail	1.3 Fail	—

White BG

2.2Fail

1.5Fail

3.5AA Large

1.6Fail

1.3Fail

Black BG

9.4AAA

14.2AAA

6.0AA

13.1AAA

16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAF8F

D8D8B2

ABA93F

D1D1BD

E7E7DC

Deuteranopia

AFAF91

D8D8B5

B6C43F

D2D3BE

E7E7DD

Tritanopia

AF9799

D9BBBD

F43F3F

D5C1C2

E8DFDF

Achromatopsia

ABABAB

D2D2D2

787878

CCCCCC

E5E5E5

Shades & Tints Shades & Tints

#AFB084

Dark

Light

#D9D7A6

Dark

Light

#FD3F3F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afb084;
  --color-2: #d9d7a6;
  --color-3: #fd3f3f;
  --color-4: #d6cbb9;
  --color-5: #e8e6d9;
}

SCSS

$color-1: #afb084;
$color-2: #d9d7a6;
$color-3: #fd3f3f;
$color-4: #d6cbb9;
$color-5: #e8e6d9;

TAILWIND

colors: {
  'brand-1': '#afb084',
  'brand-2': '#d9d7a6',
  'brand-3': '#fd3f3f',
  'brand-4': '#d6cbb9',
  'brand-5': '#e8e6d9',
}

RGB Array

[175, 176, 132], [217, 215, 166], [253, 63, 63], [214, 203, 185], [232, 230, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFB084, #D9D7A6, #FD3F3F, #D6CBB9, #E8E6D9 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: #afb084; --color-2: #d9d7a6; --color-3: #fd3f3f; --color-4: #d6cbb9; --color-5: #e8e6d9. 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