#CCF0E4 + #DEDB7E + #FFB48F + #D498AD + #707FB3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCF0E4

Jade · LightGray · Glacier Blue

HEX

#CCF0E4

RGB

rgb(204, 240, 228)

HSL

hsl(160, 55%, 87%)

HSB

hsb(160, 15%, 94%)

CMYK

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

Oklch

oklch(92.6% 0.041 173.2)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#DEDB7E

Fresh Green · Khaki · Sunflower

HEX

#DEDB7E

RGB

rgb(222, 219, 126)

HSL

hsl(58, 59%, 68%)

HSB

hsb(58, 43%, 87%)

CMYK

cmyk(0%, 1%, 43%, 13%)

Oklch

oklch(87.4% 0.116 106.9)

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

#FFB48F

Apricot · LightSalmon · Peach Orange

HEX

#FFB48F

RGB

rgb(255, 180, 143)

HSL

hsl(20, 100%, 78%)

HSB

hsb(20, 44%, 100%)

CMYK

cmyk(0%, 29%, 44%, 0%)

Oklch

oklch(83.2% 0.101 47.1)

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

#D498AD

Rouge · Tan · Rose Pink

HEX

#D498AD

RGB

rgb(212, 152, 173)

HSL

hsl(339, 41%, 71%)

HSB

hsb(339, 28%, 83%)

CMYK

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

Oklch

oklch(74.3% 0.077 356.4)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#707FB3

Azure · LightSlateGray · Navy Blue

HEX

#707FB3

RGB

rgb(112, 127, 179)

HSL

hsl(227, 31%, 57%)

HSB

hsb(227, 37%, 70%)

CMYK

cmyk(37%, 29%, 0%, 30%)

Oklch

oklch(60.5% 0.081 271.5)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCF0E4

F0CCD8

Analogous

CCF0D2

CCF0E4

CCEAF0

Triadic

CCF0E4

E4CCF0

F0E4CC

Split-Comp.

CCF0E4

F0CCEA

F0D2CC

Tetradic

CCF0E4

D2CCF0

F0CCD8

EAF0CC

Contrast Matrix WCAG 2.1 Contrast

CCF0E4	DEDB7E	FFB48F	D498AD	707FB3
—	1.2 Fail	1.4 Fail	1.9 Fail	3.2 AA Large
1.2 Fail	—	1.2 Fail	1.6 Fail	2.7 Fail
1.4 Fail	1.2 Fail	—	1.4 Fail	2.3 Fail
1.9 Fail	1.6 Fail	1.4 Fail	—	1.7 Fail
3.2 AA Large	2.7 Fail	2.3 Fail	1.7 Fail	—

White BG

1.2Fail

1.4Fail

1.7Fail

2.4Fail

3.9AA Large

Black BG

17.2AAA

14.5AAA

12.2AAA

8.9AAA

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCE7

DDDD95

DFDE98

BAB9A8

7677A6

Deuteranopia

DAD7E8

DDDD9A

E3E99A

BEC2A7

7675A3

Tritanopia

CEE9EA

DEA6AA

FB9FA1

D1A4A3

719C9A

Achromatopsia

E4E4E4

D1D1D1

C6C6C6

ACACAC

808080

Shades & Tints Shades & Tints

#CCF0E4

Dark

Light

#DEDB7E

Dark

Light

#FFB48F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccf0e4;
  --color-2: #dedb7e;
  --color-3: #ffb48f;
  --color-4: #d498ad;
  --color-5: #707fb3;
}

SCSS

$color-1: #ccf0e4;
$color-2: #dedb7e;
$color-3: #ffb48f;
$color-4: #d498ad;
$color-5: #707fb3;

TAILWIND

colors: {
  'brand-1': '#ccf0e4',
  'brand-2': '#dedb7e',
  'brand-3': '#ffb48f',
  'brand-4': '#d498ad',
  'brand-5': '#707fb3',
}

RGB Array

[204, 240, 228], [222, 219, 126], [255, 180, 143], [212, 152, 173], [112, 127, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCF0E4, #DEDB7E, #FFB48F, #D498AD, #707FB3 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: #ccf0e4; --color-2: #dedb7e; --color-3: #ffb48f; --color-4: #d498ad; --color-5: #707fb3. 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