#BABBC9 + #A4C4CE + #9CD7D9 + #DDE5D3 + #F8F8D0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BABBC9

Azure · Silver · Cobalt Blue

HEX

#BABBC9

RGB

rgb(186, 187, 201)

HSL

hsl(236, 12%, 76%)

HSB

hsb(236, 7%, 79%)

CMYK

cmyk(7%, 7%, 0%, 21%)

Oklch

oklch(79.6% 0.020 282.7)

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

#A4C4CE

Sky Blue · LightSteelBlue · Lake Green

HEX

#A4C4CE

RGB

rgb(164, 196, 206)

HSL

hsl(194, 30%, 73%)

HSB

hsb(194, 20%, 81%)

CMYK

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

Oklch

oklch(80.0% 0.037 218.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#9CD7D9

Sky Blue · LightBlue · Lake Green

HEX

#9CD7D9

RGB

rgb(156, 215, 217)

HSL

hsl(182, 45%, 73%)

HSB

hsb(182, 28%, 85%)

CMYK

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

Oklch

oklch(84.0% 0.060 198.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#DDE5D3

Willow Green · LightGray · Mint Green

HEX

#DDE5D3

RGB

rgb(221, 229, 211)

HSL

hsl(87, 26%, 86%)

HSB

hsb(87, 8%, 90%)

CMYK

cmyk(3%, 0%, 8%, 10%)

Oklch

oklch(91.1% 0.026 126.6)

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

#F8F8D0

Fresh Green · Beige · Lemon Cream

HEX

#F8F8D0

RGB

rgb(248, 248, 208)

HSL

hsl(60, 74%, 89%)

HSB

hsb(60, 16%, 97%)

CMYK

cmyk(0%, 0%, 16%, 3%)

Oklch

oklch(96.9% 0.052 107.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BABBC9

C9C8BA

Analogous

BAC3C9

BABBC9

C1BAC9

Triadic

BABBC9

C9BABB

BBC9BA

Split-Comp.

BABBC9

C9C1BA

C3C9BA

Tetradic

BABBC9

C9BAC3

C9C8BA

BAC9C1

Contrast Matrix WCAG 2.1 Contrast

BABBC9	A4C4CE	9CD7D9	DDE5D3	F8F8D0
—	1.0 Fail	1.2 Fail	1.5 Fail	1.8 Fail
1.0 Fail	—	1.2 Fail	1.4 Fail	1.7 Fail
1.2 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.5 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
1.8 Fail	1.7 Fail	1.5 Fail	1.2 Fail	—

White BG

1.9Fail

1.8Fail

1.6Fail

1.3Fail

1.1Fail

Black BG

11.0AAA

11.4AAA

13.1AAA

16.2AAA

19.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABAC6

B2B2CC

B6B6D9

E0E1D7

F8F8DA

Deuteranopia

BABAC5

B0AECB

B2AED8

E0DFD8

F8F8DC

Tritanopia

BAC3C2

A6CAC9

9FD8D8

DDDBDC

F8E1E3

Achromatopsia

BCBCBC

C6C6C6

E1E1E1

F3F3F3

Shades & Tints Shades & Tints

#BABBC9

Dark

Light

#A4C4CE

Dark

Light

#9CD7D9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #babbc9;
  --color-2: #a4c4ce;
  --color-3: #9cd7d9;
  --color-4: #dde5d3;
  --color-5: #f8f8d0;
}

SCSS

$color-1: #babbc9;
$color-2: #a4c4ce;
$color-3: #9cd7d9;
$color-4: #dde5d3;
$color-5: #f8f8d0;

TAILWIND

colors: {
  'brand-1': '#babbc9',
  'brand-2': '#a4c4ce',
  'brand-3': '#9cd7d9',
  'brand-4': '#dde5d3',
  'brand-5': '#f8f8d0',
}

RGB Array

[186, 187, 201], [164, 196, 206], [156, 215, 217], [221, 229, 211], [248, 248, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BABBC9, #A4C4CE, #9CD7D9, #DDE5D3, #F8F8D0 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: #babbc9; --color-2: #a4c4ce; --color-3: #9cd7d9; --color-4: #dde5d3; --color-5: #f8f8d0. 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