#C8AFAB + #F2E1C7 + #F3CDC3 + #E8A7AE + #B77696 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C8AFAB

Peach Pink · Silver · Coral Red

HEX

#C8AFAB

RGB

rgb(200, 175, 171)

HSL

hsl(8, 21%, 73%)

HSB

hsb(8, 15%, 78%)

CMYK

cmyk(0%, 12%, 15%, 22%)

Oklch

oklch(77.4% 0.030 28.6)

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

#F2E1C7

Goose Yellow · Bisque · Peach Orange

HEX

#F2E1C7

RGB

rgb(242, 225, 199)

HSL

hsl(36, 62%, 86%)

HSB

hsb(36, 18%, 95%)

CMYK

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

Oklch

oklch(91.7% 0.039 78.6)

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

#F3CDC3

Peach Pink · Pink · Cherry Blossom

HEX

#F3CDC3

RGB

rgb(243, 205, 195)

HSL

hsl(13, 67%, 86%)

HSB

hsb(13, 20%, 95%)

CMYK

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

Oklch

oklch(87.8% 0.045 35.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#E8A7AE

Peach Pink · LightPink · Coral Red

HEX

#E8A7AE

RGB

rgb(232, 167, 174)

HSL

hsl(354, 59%, 78%)

HSB

hsb(354, 28%, 91%)

CMYK

cmyk(0%, 28%, 25%, 9%)

Oklch

oklch(79.2% 0.077 11.8)

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

#B77696

Dark Violet · DarkGray · Rose Pink

HEX

#B77696

RGB

rgb(183, 118, 150)

HSL

hsl(330, 31%, 59%)

HSB

hsb(330, 36%, 72%)

CMYK

cmyk(0%, 36%, 18%, 28%)

Oklch

oklch(64.4% 0.091 349.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8AFAB

ACC5C9

Analogous

C9ACB6

C8AFAB

C9BEAC

Triadic

C8AFAB

ACC9B0

B0ACC9

Split-Comp.

C8AFAB

ACC9BE

ACB6C9

Tetradic

C8AFAB

B6C9AC

ACC5C9

BEACC9

Contrast Matrix WCAG 2.1 Contrast

C8AFAB	F2E1C7	F3CDC3	E8A7AE	B77696
—	1.6 Fail	1.4 Fail	1.0 Fail	1.7 Fail
1.6 Fail	—	1.1 Fail	1.5 Fail	2.7 Fail
1.4 Fail	1.1 Fail	—	1.4 Fail	2.4 Fail
1.0 Fail	1.5 Fail	1.4 Fail	—	1.7 Fail
1.7 Fail	2.7 Fail	2.4 Fail	1.7 Fail	—

White BG

2.1Fail

1.3Fail

1.5Fail

2.0Fail

3.5AA Large

Black BG

10.2AAA

16.4AAA

14.3AAA

10.6AAA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBDAC

EBEACD

E3E2C5

CCCBAC

9B9A8E

Deuteranopia

BFC1AC

ECEDCF

E5E8C6

D0D4AC

9FA48C

Tritanopia

C7ADAD

F1D2D3

F1C7C8

E5ABAB

B48887

Achromatopsia

B6B6B6

E3E3E3

D7D7D7

BBBBBB

8D8D8D

Shades & Tints Shades & Tints

#C8AFAB

Dark

Light

#F2E1C7

Dark

Light

#F3CDC3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8afab;
  --color-2: #f2e1c7;
  --color-3: #f3cdc3;
  --color-4: #e8a7ae;
  --color-5: #b77696;
}

SCSS

$color-1: #c8afab;
$color-2: #f2e1c7;
$color-3: #f3cdc3;
$color-4: #e8a7ae;
$color-5: #b77696;

TAILWIND

colors: {
  'brand-1': '#c8afab',
  'brand-2': '#f2e1c7',
  'brand-3': '#f3cdc3',
  'brand-4': '#e8a7ae',
  'brand-5': '#b77696',
}

RGB Array

[200, 175, 171], [242, 225, 199], [243, 205, 195], [232, 167, 174], [183, 118, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #C8AFAB, #F2E1C7, #F3CDC3, #E8A7AE, #B77696 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: #c8afab; --color-2: #f2e1c7; --color-3: #f3cdc3; --color-4: #e8a7ae; --color-5: #b77696. 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 cool-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