#ABC1CF + #C1D5D4 + #D0D5D8 + #D8C288 + #F0F2DD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ABC1CF

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#ABC1CF

RGB

rgb(171, 193, 207)

HSL

hsl(203, 27%, 74%)

HSB

hsb(203, 17%, 81%)

CMYK

cmyk(17%, 7%, 0%, 19%)

Oklch

oklch(79.9% 0.031 235.7)

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

#C1D5D4

Jade · LightGray · Glacier Blue

HEX

#C1D5D4

RGB

rgb(193, 213, 212)

HSL

hsl(177, 19%, 80%)

HSB

hsb(177, 9%, 84%)

CMYK

cmyk(9%, 0%, 0%, 16%)

Oklch

oklch(85.8% 0.022 193.1)

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

#D0D5D8

Sky Blue · LightGray · Pearl Gray

HEX

#D0D5D8

RGB

rgb(208, 213, 216)

HSL

hsl(202, 9%, 83%)

HSB

hsb(202, 4%, 85%)

CMYK

cmyk(4%, 1%, 0%, 15%)

Oklch

oklch(87.0% 0.007 233.7)

Traditional「Sky Blue」· Paint「Pearl Gray」· Creative Silver Lining

#D8C288

Ginger · BurlyWood · Sunflower

HEX

#D8C288

RGB

rgb(216, 194, 136)

HSL

hsl(43, 51%, 69%)

HSB

hsb(43, 37%, 85%)

CMYK

cmyk(0%, 10%, 37%, 15%)

Oklch

oklch(81.9% 0.079 89.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F0F2DD

Fresh Green · Beige · Lemon Cream

HEX

#F0F2DD

RGB

rgb(240, 242, 221)

HSL

hsl(66, 45%, 91%)

HSB

hsb(66, 9%, 95%)

CMYK

cmyk(1%, 0%, 9%, 5%)

Oklch

oklch(95.4% 0.028 111.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABC1CF

CFB9AB

Analogous

ABCFCA

ABC1CF

ABAFCF

Triadic

ABC1CF

CFABC1

C1CFAB

Split-Comp.

ABC1CF

CFABAF

CFCAAB

Tetradic

ABC1CF

CAABCF

CFB9AB

AFCFAB

Contrast Matrix WCAG 2.1 Contrast

ABC1CF	C1D5D4	D0D5D8	D8C288	F0F2DD
—	1.2 Fail	1.3 Fail	1.1 Fail	1.6 Fail
1.2 Fail	—	1.0 Fail	1.1 Fail	1.3 Fail
1.3 Fail	1.0 Fail	—	1.2 Fail	1.3 Fail
1.1 Fail	1.1 Fail	1.2 Fail	—	1.5 Fail
1.6 Fail	1.3 Fail	1.3 Fail	1.5 Fail	—

White BG

1.9Fail

1.5Fail

1.8Fail

1.1Fail

Black BG

11.3AAA

13.7AAA

14.2AAA

12.0AAA

18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B5CC

CACAD4

D2D2D7

CECE96

F1F1E2

Deuteranopia

B3B2CB

C9C7D4

D2D2D7

D0D199

F1F1E3

Tritanopia

ACC9C8

C2D4D4

D0D7D7

D7A1A4

F0E6E7

Achromatopsia

BCBCBC

CFCFCF

D4D4D4

C2C2C2

EFEFEF

Shades & Tints Shades & Tints

#ABC1CF

Dark

Light

#C1D5D4

Dark

Light

#D0D5D8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abc1cf;
  --color-2: #c1d5d4;
  --color-3: #d0d5d8;
  --color-4: #d8c288;
  --color-5: #f0f2dd;
}

SCSS

$color-1: #abc1cf;
$color-2: #c1d5d4;
$color-3: #d0d5d8;
$color-4: #d8c288;
$color-5: #f0f2dd;

TAILWIND

colors: {
  'brand-1': '#abc1cf',
  'brand-2': '#c1d5d4',
  'brand-3': '#d0d5d8',
  'brand-4': '#d8c288',
  'brand-5': '#f0f2dd',
}

RGB Array

[171, 193, 207], [193, 213, 212], [208, 213, 216], [216, 194, 136], [240, 242, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABC1CF, #C1D5D4, #D0D5D8, #D8C288, #F0F2DD 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: #abc1cf; --color-2: #c1d5d4; --color-3: #d0d5d8; --color-4: #d8c288; --color-5: #f0f2dd. 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