#ABAB8F + #AFB496 + #D2CEA9 + #EDBB7E + #E19564 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ABAB8F

Fresh Green · DarkGray · Sunflower

HEX

#ABAB8F

RGB

rgb(171, 171, 143)

HSL

hsl(60, 14%, 62%)

HSB

hsb(60, 16%, 67%)

CMYK

cmyk(0%, 0%, 16%, 33%)

Oklch

oklch(73.4% 0.039 107.3)

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

#AFB496

Willow Green · DarkGray · Apple Green

HEX

#AFB496

RGB

rgb(175, 180, 150)

HSL

hsl(70, 17%, 65%)

HSB

hsb(70, 17%, 71%)

CMYK

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

Oklch

oklch(75.8% 0.042 115.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D2CEA9

Fresh Green · Silver · Sunflower

HEX

#D2CEA9

RGB

rgb(210, 206, 169)

HSL

hsl(54, 31%, 74%)

HSB

hsb(54, 20%, 82%)

CMYK

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

Oklch

oklch(84.5% 0.050 102.3)

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

#EDBB7E

Goose Yellow · BurlyWood · Warm Sun

HEX

#EDBB7E

RGB

rgb(237, 187, 126)

HSL

hsl(33, 76%, 71%)

HSB

hsb(33, 47%, 93%)

CMYK

cmyk(0%, 21%, 47%, 7%)

Oklch

oklch(82.4% 0.097 71.4)

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

#E19564

Apricot · DarkSalmon · Warm Sun

HEX

#E19564

RGB

rgb(225, 149, 100)

HSL

hsl(24, 68%, 64%)

HSB

hsb(24, 56%, 88%)

CMYK

cmyk(0%, 34%, 56%, 12%)

Oklch

oklch(73.6% 0.112 53.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABAB8F

9191AC

Analogous

AC9E91

ABAB8F

9EAC91

Triadic

ABAB8F

91ACAC

AC91AC

Split-Comp.

ABAB8F

919EAC

9E91AC

Tetradic

ABAB8F

91AC9E

9191AC

AC919E

Contrast Matrix WCAG 2.1 Contrast

ABAB8F	AFB496	D2CEA9	EDBB7E	E19564
—	1.1 Fail	1.5 Fail	1.3 Fail	1.0 Fail
1.1 Fail	—	1.3 Fail	1.2 Fail	1.1 Fail
1.5 Fail	1.3 Fail	—	1.1 Fail	1.5 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.4 Fail
1.0 Fail	1.1 Fail	1.5 Fail	1.4 Fail	—

White BG

2.3Fail

2.1Fail

1.6Fail

1.7Fail

2.4Fail

Black BG

9.0AAA

9.8AAA

13.1AAA

12.0AAA

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAB96

B1B19D

D0D0B2

D7D78D

C0BF70

Deuteranopia

ABAB97

B1B19F

D1D1B4

DADE90

C5CA73

Tritanopia

AB9B9C

AFA3A4

D2B9BB

EA989B

DD797B

Achromatopsia

A8A8A8

AFAFAF

CBCBCB

C3C3C3

A6A6A6

Shades & Tints Shades & Tints

#ABAB8F

Dark

Light

#AFB496

Dark

Light

#D2CEA9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abab8f;
  --color-2: #afb496;
  --color-3: #d2cea9;
  --color-4: #edbb7e;
  --color-5: #e19564;
}

SCSS

$color-1: #abab8f;
$color-2: #afb496;
$color-3: #d2cea9;
$color-4: #edbb7e;
$color-5: #e19564;

TAILWIND

colors: {
  'brand-1': '#abab8f',
  'brand-2': '#afb496',
  'brand-3': '#d2cea9',
  'brand-4': '#edbb7e',
  'brand-5': '#e19564',
}

RGB Array

[171, 171, 143], [175, 180, 150], [210, 206, 169], [237, 187, 126], [225, 149, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABAB8F, #AFB496, #D2CEA9, #EDBB7E, #E19564 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: #abab8f; --color-2: #afb496; --color-3: #d2cea9; --color-4: #edbb7e; --color-5: #e19564. 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