#CBEFDE + #DEC5C6 + #D6A095 + #D87E6A + #C7D8B1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CBEFDE

Jade · LightGray · Mint Green

HEX

#CBEFDE

RGB

rgb(203, 239, 222)

HSL

hsl(152, 53%, 87%)

HSB

hsb(152, 15%, 94%)

CMYK

cmyk(15%, 0%, 7%, 6%)

Oklch

oklch(92.2% 0.044 165.3)

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

#DEC5C6

Peach Pink · LightGray · Cherry Blossom

HEX

#DEC5C6

RGB

rgb(222, 197, 198)

HSL

hsl(358, 27%, 82%)

HSB

hsb(358, 11%, 87%)

CMYK

cmyk(0%, 11%, 11%, 13%)

Oklch

oklch(84.5% 0.028 15.0)

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

#D6A095

Peach Pink · Tan · Coral Red

HEX

#D6A095

RGB

rgb(214, 160, 149)

HSL

hsl(10, 44%, 71%)

HSB

hsb(10, 30%, 84%)

CMYK

cmyk(0%, 25%, 30%, 16%)

Oklch

oklch(75.4% 0.067 31.7)

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

#D87E6A

Peach Pink · LightCoral · Coral Red

HEX

#D87E6A

RGB

rgb(216, 126, 106)

HSL

hsl(11, 59%, 63%)

HSB

hsb(11, 51%, 85%)

CMYK

cmyk(0%, 42%, 51%, 15%)

Oklch

oklch(68.6% 0.116 33.4)

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

#C7D8B1

Willow Green · Silver · Apple Green

HEX

#C7D8B1

RGB

rgb(199, 216, 177)

HSL

hsl(86, 33%, 77%)

HSB

hsb(86, 18%, 85%)

CMYK

cmyk(8%, 0%, 18%, 15%)

Oklch

oklch(85.9% 0.056 126.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CBEFDE

EFCCDD

Analogous

CCEFCD

CBEFDE

CCEEEF

Triadic

CBEFDE

DFCCEF

EFDFCC

Split-Comp.

CBEFDE

EFCCEE

EFCDCC

Tetradic

CBEFDE

CDCCEF

EFCCDD

EEEFCC

Contrast Matrix WCAG 2.1 Contrast

CBEFDE	DEC5C6	D6A095	D87E6A	C7D8B1
—	1.3 Fail	1.8 Fail	2.4 Fail	1.2 Fail
1.3 Fail	—	1.4 Fail	1.8 Fail	1.1 Fail
1.8 Fail	1.4 Fail	—	1.3 Fail	1.5 Fail
2.4 Fail	1.8 Fail	1.3 Fail	—	2.0 Fail
1.2 Fail	1.1 Fail	1.5 Fail	2.0 Fail	—

White BG

1.2Fail

1.6Fail

2.3Fail

3.0Fail

1.5Fail

Black BG

16.9AAA

12.9AAA

9.3AAA

7.1AAA

13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBE2

D3D3C6

BFBE98

B1B06F

CECFBA

Deuteranopia

D9D6E3

D5D6C6

C2C698

B6BD70

CDCCBD

Tritanopia

CDE5E6

DDC6C6

D39A9A

D47374

C8C2C4

Achromatopsia

E2E2E2

CDCDCD

AFAFAF

979797

CECECE

Shades & Tints Shades & Tints

#CBEFDE

Dark

Light

#DEC5C6

Dark

Light

#D6A095

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cbefde;
  --color-2: #dec5c6;
  --color-3: #d6a095;
  --color-4: #d87e6a;
  --color-5: #c7d8b1;
}

SCSS

$color-1: #cbefde;
$color-2: #dec5c6;
$color-3: #d6a095;
$color-4: #d87e6a;
$color-5: #c7d8b1;

TAILWIND

colors: {
  'brand-1': '#cbefde',
  'brand-2': '#dec5c6',
  'brand-3': '#d6a095',
  'brand-4': '#d87e6a',
  'brand-5': '#c7d8b1',
}

RGB Array

[203, 239, 222], [222, 197, 198], [214, 160, 149], [216, 126, 106], [199, 216, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CBEFDE, #DEC5C6, #D6A095, #D87E6A, #C7D8B1 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: #cbefde; --color-2: #dec5c6; --color-3: #d6a095; --color-4: #d87e6a; --color-5: #c7d8b1. 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