#C0ABC7 + #CACCDE + #CEDCBE + #DED276 + #FFB522 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C0ABC7

Lilac · Silver · Lilac Purple

HEX

#C0ABC7

RGB

rgb(192, 171, 199)

HSL

hsl(285, 20%, 73%)

HSB

hsb(285, 14%, 78%)

CMYK

cmyk(4%, 14%, 0%, 22%)

Oklch

oklch(76.8% 0.046 317.7)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#CACCDE

Azure · LightGray · Sky Blue

HEX

#CACCDE

RGB

rgb(202, 204, 222)

HSL

hsl(234, 23%, 83%)

HSB

hsb(234, 9%, 87%)

CMYK

cmyk(9%, 8%, 0%, 13%)

Oklch

oklch(84.9% 0.025 280.8)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#CEDCBE

Willow Green · LightGray · Apple Green

HEX

#CEDCBE

RGB

rgb(206, 220, 190)

HSL

hsl(88, 30%, 80%)

HSB

hsb(88, 14%, 86%)

CMYK

cmyk(6%, 0%, 14%, 14%)

Oklch

oklch(87.6% 0.043 127.7)

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

#DED276

Fresh Green · BurlyWood · Sunflower

HEX

#DED276

RGB

rgb(222, 210, 118)

HSL

hsl(53, 61%, 67%)

HSB

hsb(53, 47%, 87%)

CMYK

cmyk(0%, 5%, 47%, 13%)

Oklch

oklch(85.4% 0.115 101.9)

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

#FFB522

Ginger · Orange · Sunflower

HEX

#FFB522

RGB

rgb(255, 181, 34)

HSL

hsl(40, 100%, 57%)

HSB

hsb(40, 87%, 100%)

CMYK

cmyk(0%, 29%, 87%, 0%)

Oklch

oklch(82.2% 0.165 77.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C0ABC7

B3C8AC

Analogous

B3ACC8

C0ABC7

C8ACC1

Triadic

C0ABC7

C8C1AC

ACC8C1

Split-Comp.

C0ABC7

C1C8AC

ACC8B3

Tetradic

C0ABC7

C8B3AC

B3C8AC

ACC1C8

Contrast Matrix WCAG 2.1 Contrast

C0ABC7	CACCDE	CEDCBE	DED276	FFB522
—	1.3 Fail	1.5 Fail	1.4 Fail	1.2 Fail
1.3 Fail	—	1.1 Fail	1.0 Fail	1.1 Fail
1.5 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.4 Fail	1.0 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.1 Fail	1.2 Fail	1.1 Fail	—

White BG

2.1Fail

1.6Fail

1.4Fail

1.5Fail

1.8Fail

Black BG

9.9AAA

13.2AAA

14.6AAA

13.6AAA

11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7C0

CBCBDA

D4D4C5

D9D98C

DFDE46

Deuteranopia

B8BABF

CBCBD9

D3D2C7

DADA92

E3E94E

Tritanopia

BFBBBA

CAD6D5

CFCBCC

DD9EA2

FB6268

Achromatopsia

B4B4B4

CDCDCD

D4D4D4

CBCBCB

BABABA

Shades & Tints Shades & Tints

#C0ABC7

Dark

Light

#CACCDE

Dark

Light

#CEDCBE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c0abc7;
  --color-2: #caccde;
  --color-3: #cedcbe;
  --color-4: #ded276;
  --color-5: #ffb522;
}

SCSS

$color-1: #c0abc7;
$color-2: #caccde;
$color-3: #cedcbe;
$color-4: #ded276;
$color-5: #ffb522;

TAILWIND

colors: {
  'brand-1': '#c0abc7',
  'brand-2': '#caccde',
  'brand-3': '#cedcbe',
  'brand-4': '#ded276',
  'brand-5': '#ffb522',
}

RGB Array

[192, 171, 199], [202, 204, 222], [206, 220, 190], [222, 210, 118], [255, 181, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C0ABC7, #CACCDE, #CEDCBE, #DED276, #FFB522 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: #c0abc7; --color-2: #caccde; --color-3: #cedcbe; --color-4: #ded276; --color-5: #ffb522. 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