#C8CDB5 + #AFC9AA + #D5AB68 + #F14D4C + #B36A77 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C8CDB5

Willow Green · Silver · Apple Green

HEX

#C8CDB5

RGB

rgb(200, 205, 181)

HSL

hsl(73, 19%, 76%)

HSB

hsb(73, 12%, 80%)

CMYK

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

Oklch

oklch(83.8% 0.033 116.7)

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

#AFC9AA

Celadon · Silver · Apple Green

HEX

#AFC9AA

RGB

rgb(175, 201, 170)

HSL

hsl(110, 22%, 73%)

HSB

hsb(110, 15%, 79%)

CMYK

cmyk(13%, 0%, 15%, 21%)

Oklch

oklch(80.8% 0.051 140.6)

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

#D5AB68

Ginger · SandyBrown · Warm Sun

HEX

#D5AB68

RGB

rgb(213, 171, 104)

HSL

hsl(37, 56%, 62%)

HSB

hsb(37, 51%, 84%)

CMYK

cmyk(0%, 20%, 51%, 16%)

Oklch

oklch(76.5% 0.098 78.2)

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

#F14D4C

Peach Pink · Tomato · Coral Red

HEX

#F14D4C

RGB

rgb(241, 77, 76)

HSL

hsl(0, 85%, 62%)

HSB

hsb(0, 68%, 95%)

CMYK

cmyk(0%, 68%, 68%, 5%)

Oklch

oklch(65.0% 0.201 25.0)

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

#B36A77

Crimson · Gray · Passion Red

HEX

#B36A77

RGB

rgb(179, 106, 119)

HSL

hsl(349, 32%, 56%)

HSB

hsb(349, 41%, 70%)

CMYK

cmyk(0%, 41%, 34%, 30%)

Oklch

oklch(60.8% 0.094 8.8)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8CDB5

BBB6CD

Analogous

CDC7B6

C8CDB5

BDCDB6

Triadic

C8CDB5

B6C8CD

CDB6C8

Split-Comp.

C8CDB5

B6BDCD

C7B6CD

Tetradic

C8CDB5

B6CDC7

BBB6CD

CDB6BD

Contrast Matrix WCAG 2.1 Contrast

C8CDB5	AFC9AA	D5AB68	F14D4C	B36A77
—	1.1 Fail	1.3 Fail	2.2 Fail	2.5 Fail
1.1 Fail	—	1.2 Fail	2.0 Fail	2.2 Fail
1.3 Fail	1.2 Fail	—	1.7 Fail	1.9 Fail
2.2 Fail	2.0 Fail	1.7 Fail	—	1.1 Fail
2.5 Fail	2.2 Fail	1.9 Fail	1.1 Fail	—

White BG

1.6Fail

1.8Fail

2.1Fail

3.6AA Large

4.0AA Large

Black BG

12.9AAA

11.8AAA

9.9AAA

5.9AA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACABB

BABAB2

C3C278

AAA94C

939374

Deuteranopia

CACABC

B9B7B3

C5C87C

B4C04C

989D73

Tritanopia

C8BFC0

B0B7B9

D38588

E94C4C

AF7171

Achromatopsia

C9C9C9

BEBEBE

B0B0B0

7E7E7E

818181

Shades & Tints Shades & Tints

#C8CDB5

Dark

Light

#AFC9AA

Dark

Light

#D5AB68

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8cdb5;
  --color-2: #afc9aa;
  --color-3: #d5ab68;
  --color-4: #f14d4c;
  --color-5: #b36a77;
}

SCSS

$color-1: #c8cdb5;
$color-2: #afc9aa;
$color-3: #d5ab68;
$color-4: #f14d4c;
$color-5: #b36a77;

TAILWIND

colors: {
  'brand-1': '#c8cdb5',
  'brand-2': '#afc9aa',
  'brand-3': '#d5ab68',
  'brand-4': '#f14d4c',
  'brand-5': '#b36a77',
}

RGB Array

[200, 205, 181], [175, 201, 170], [213, 171, 104], [241, 77, 76], [179, 106, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C8CDB5, #AFC9AA, #D5AB68, #F14D4C, #B36A77 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: #c8cdb5; --color-2: #afc9aa; --color-3: #d5ab68; --color-4: #f14d4c; --color-5: #b36a77. 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