#C4D0B8 + #ECE0C6 + #8DC4AF + #BAA7AB + #FFA4A9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C4D0B8

Celadon · Silver · Apple Green

HEX

#C4D0B8

RGB

rgb(196, 208, 184)

HSL

hsl(90, 20%, 77%)

HSB

hsb(90, 12%, 82%)

CMYK

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

Oklch

oklch(84.2% 0.035 128.9)

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

#ECE0C6

Goose Yellow · Bisque · Lemon Cream

HEX

#ECE0C6

RGB

rgb(236, 224, 198)

HSL

hsl(41, 50%, 85%)

HSB

hsb(41, 16%, 93%)

CMYK

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

Oklch

oklch(90.9% 0.037 86.2)

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

#8DC4AF

Jade · DarkSeaGreen · Apple Green

HEX

#8DC4AF

RGB

rgb(141, 196, 175)

HSL

hsl(157, 32%, 66%)

HSB

hsb(157, 28%, 77%)

CMYK

cmyk(28%, 0%, 11%, 23%)

Oklch

oklch(77.6% 0.065 169.0)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#BAA7AB

Peach Pink · DarkGray · Coral Red

HEX

#BAA7AB

RGB

rgb(186, 167, 171)

HSL

hsl(347, 12%, 69%)

HSB

hsb(347, 10%, 73%)

CMYK

cmyk(0%, 10%, 8%, 27%)

Oklch

oklch(74.6% 0.023 3.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#FFA4A9

Peach Pink · LightPink · Cherry Blossom

HEX

#FFA4A9

RGB

rgb(255, 164, 169)

HSL

hsl(357, 100%, 82%)

HSB

hsb(357, 36%, 100%)

CMYK

cmyk(0%, 36%, 34%, 0%)

Oklch

oklch(81.0% 0.108 16.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4D0B8

C4B9D0

Analogous

D0D0B9

C4D0B8

B9D0B9

Triadic

C4D0B8

B9C4D0

D0B9C4

Split-Comp.

C4D0B8

B9B9D0

D0B9D0

Tetradic

C4D0B8

B9D0D0

C4B9D0

D0B9B9

Contrast Matrix WCAG 2.1 Contrast

C4D0B8	ECE0C6	8DC4AF	BAA7AB	FFA4A9
—	1.2 Fail	1.2 Fail	1.4 Fail	1.2 Fail
1.2 Fail	—	1.5 Fail	1.7 Fail	1.4 Fail
1.2 Fail	1.5 Fail	—	1.2 Fail	1.0 Fail
1.4 Fail	1.7 Fail	1.2 Fail	—	1.2 Fail
1.2 Fail	1.4 Fail	1.0 Fail	1.2 Fail	—

White BG

1.6Fail

1.3Fail

2.0Fail

2.3Fail

1.9Fail

Black BG

13.1AAA

16.0AAA

10.6AAA

9.2AAA

11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C9BE

E7E7CC

A5A5B4

B2B2AA

D8D7A8

Deuteranopia

C9C8BF

E8E8CE

A29EB5

B3B4AA

DDE4A8

Tritanopia

C5C2C3

EBD1D2

90B8B9

B9A9A9

FAA7A7

Achromatopsia

CACACA

E1E1E1

B1B1B1

ADADAD

C0C0C0

Shades & Tints Shades & Tints

#C4D0B8

Dark

Light

#ECE0C6

Dark

Light

#8DC4AF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4d0b8;
  --color-2: #ece0c6;
  --color-3: #8dc4af;
  --color-4: #baa7ab;
  --color-5: #ffa4a9;
}

SCSS

$color-1: #c4d0b8;
$color-2: #ece0c6;
$color-3: #8dc4af;
$color-4: #baa7ab;
$color-5: #ffa4a9;

TAILWIND

colors: {
  'brand-1': '#c4d0b8',
  'brand-2': '#ece0c6',
  'brand-3': '#8dc4af',
  'brand-4': '#baa7ab',
  'brand-5': '#ffa4a9',
}

RGB Array

[196, 208, 184], [236, 224, 198], [141, 196, 175], [186, 167, 171], [255, 164, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4D0B8, #ECE0C6, #8DC4AF, #BAA7AB, #FFA4A9 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: #c4d0b8; --color-2: #ece0c6; --color-3: #8dc4af; --color-4: #baa7ab; --color-5: #ffa4a9. 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