#A8CAB2 + #E4DEBD + #F4F1CD + #E0B7A5 + #C88078 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A8CAB2

Celadon · Silver · Apple Green

HEX

#A8CAB2

RGB

rgb(168, 202, 178)

HSL

hsl(138, 24%, 73%)

HSB

hsb(138, 17%, 79%)

CMYK

cmyk(17%, 0%, 12%, 21%)

Oklch

oklch(80.7% 0.049 154.4)

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

#E4DEBD

Fresh Green · Wheat · Lemon Cream

HEX

#E4DEBD

RGB

rgb(228, 222, 189)

HSL

hsl(51, 42%, 82%)

HSB

hsb(51, 17%, 89%)

CMYK

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

Oklch

oklch(89.7% 0.044 98.7)

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

#F4F1CD

Fresh Green · Beige · Lemon Cream

HEX

#F4F1CD

RGB

rgb(244, 241, 205)

HSL

hsl(55, 64%, 88%)

HSB

hsb(55, 16%, 96%)

CMYK

cmyk(0%, 1%, 16%, 4%)

Oklch

oklch(95.1% 0.047 103.3)

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

#E0B7A5

Apricot · Tan · Peach Orange

HEX

#E0B7A5

RGB

rgb(224, 183, 165)

HSL

hsl(18, 49%, 76%)

HSB

hsb(18, 26%, 88%)

CMYK

cmyk(0%, 18%, 26%, 12%)

Oklch

oklch(81.1% 0.054 45.0)

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

#C88078

Peach Pink · DarkSalmon · Coral Red

HEX

#C88078

RGB

rgb(200, 128, 120)

HSL

hsl(6, 42%, 63%)

HSB

hsb(6, 40%, 78%)

CMYK

cmyk(0%, 36%, 40%, 22%)

Oklch

oklch(67.3% 0.091 26.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8CAB2

CBAAC1

Analogous

B0CBAA

A8CAB2

AACBC4

Triadic

A8CAB2

B4AACB

CBB4AA

Split-Comp.

A8CAB2

C4AACB

CBAAB0

Tetradic

A8CAB2

AAB0CB

CBAAC1

CBC4AA

Contrast Matrix WCAG 2.1 Contrast

A8CAB2	E4DEBD	F4F1CD	E0B7A5	C88078
—	1.3 Fail	1.6 Fail	1.0 Fail	1.7 Fail
1.3 Fail	—	1.2 Fail	1.3 Fail	2.3 Fail
1.6 Fail	1.2 Fail	—	1.6 Fail	2.7 Fail
1.0 Fail	1.3 Fail	1.6 Fail	—	1.7 Fail
1.7 Fail	2.3 Fail	2.7 Fail	1.7 Fail	—

White BG

1.8Fail

1.4Fail

1.1Fail

1.8Fail

3.1AA Large

Black BG

11.8AAA

15.5AAA

18.3AAA

11.5AAA

6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7B8

E1E1C5

F3F3D6

CECEA9

A9A87A

Deuteranopia

B5B2B9

E2E2C7

F3F3D8

D1D4AA

ADB27A

Tritanopia

AABCBD

E4CBCD

F4DDDE

DEADAE

C47B7C

Achromatopsia

BDBDBD

DCDCDC

EEEEEE

C1C1C1

959595

Shades & Tints Shades & Tints

#A8CAB2

Dark

Light

#E4DEBD

Dark

Light

#F4F1CD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8cab2;
  --color-2: #e4debd;
  --color-3: #f4f1cd;
  --color-4: #e0b7a5;
  --color-5: #c88078;
}

SCSS

$color-1: #a8cab2;
$color-2: #e4debd;
$color-3: #f4f1cd;
$color-4: #e0b7a5;
$color-5: #c88078;

TAILWIND

colors: {
  'brand-1': '#a8cab2',
  'brand-2': '#e4debd',
  'brand-3': '#f4f1cd',
  'brand-4': '#e0b7a5',
  'brand-5': '#c88078',
}

RGB Array

[168, 202, 178], [228, 222, 189], [244, 241, 205], [224, 183, 165], [200, 128, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A8CAB2, #E4DEBD, #F4F1CD, #E0B7A5, #C88078 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: #a8cab2; --color-2: #e4debd; --color-3: #f4f1cd; --color-4: #e0b7a5; --color-5: #c88078. 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