← Back to Editor

#CBD4C1 · #F2ECE6 · #9DB4BB · #A895A3 · #646670

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#CBD4C1

Willow Green · LightGray · Apple Green

HEX
#CBD4C1
RGB
rgb(203, 212, 193)
HSL
hsl(88, 18%, 79%)
HSB
hsb(88, 9%, 83%)
CMYK
cmyk(4%, 0%, 9%, 17%)
Oklch
oklch(85.8% 0.028 127.8)

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

#F2ECE6

Goose Yellow · Linen · Peach Orange

HEX
#F2ECE6
RGB
rgb(242, 236, 230)
HSL
hsl(30, 32%, 93%)
HSB
hsb(30, 5%, 95%)
CMYK
cmyk(0%, 2%, 5%, 5%)
Oklch
oklch(94.6% 0.010 67.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#9DB4BB

Sky Blue · DarkGray · Lake Green

HEX
#9DB4BB
RGB
rgb(157, 180, 187)
HSL
hsl(194, 18%, 67%)
HSB
hsb(194, 16%, 73%)
CMYK
cmyk(16%, 4%, 0%, 27%)
Oklch
oklch(75.5% 0.027 218.0)

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

#A895A3

Mauve · DarkGray · Lilac Purple

HEX
#A895A3
RGB
rgb(168, 149, 163)
HSL
hsl(316, 10%, 62%)
HSB
hsb(316, 11%, 66%)
CMYK
cmyk(0%, 11%, 3%, 34%)
Oklch
oklch(69.1% 0.030 335.1)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#646670

Ink Gray · DimGray · Warm Gray

HEX
#646670
RGB
rgb(100, 102, 112)
HSL
hsl(230, 6%, 42%)
HSB
hsb(230, 11%, 44%)
CMYK
cmyk(11%, 9%, 0%, 56%)
Oklch
oklch(51.2% 0.016 276.8)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CBD4C1
C9C0D3

Analogous

D3D2C0
CBD4C1
C0D3C0

Triadic

CBD4C1
C0CAD3
D3C0CA

Split-Comp.

CBD4C1
C0C0D3
D2C0D3

Tetradic

CBD4C1
C0D3D2
C9C0D3
D3C0C0

Contrast Matrix WCAG 2.1 Contrast

CBD4C1
F2ECE6
9DB4BB
A895A3
646670
—
1.3
Fail
1.4
Fail
1.8
Fail
3.7
AA Large
1.3
Fail
—
1.9
Fail
2.4
Fail
4.9
AA
1.4
Fail
1.9
Fail
—
1.3
Fail
2.6
Fail
1.8
Fail
2.4
Fail
1.3
Fail
—
2.0
Fail
3.7
AA Large
4.9
AA
2.6
Fail
2.0
Fail
—
White BG
1.5Fail
1.2Fail
2.2Fail
2.8Fail
5.7AA
Black BG
13.7AAA
17.9AAA
9.7AAA
7.5AAA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCFC6
EFEFE7
A7A7B9
A0A0A0
65656E

Deuteranopia

CECEC7
F0F0E8
A6A4B9
A1A29F
65656D

Tritanopia

CBC9CA
F2E9E9
9EB8B8
A79D9C
646C6B

Achromatopsia

CFCFCF
EDEDED
AEAEAE
9C9C9C
676767

Shades & Tints Shades & Tints

#CBD4C1

Dark
Light

#F2ECE6

Dark
Light

#9DB4BB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cbd4c1;
  --color-2: #f2ece6;
  --color-3: #9db4bb;
  --color-4: #a895a3;
  --color-5: #646670;
}

SCSS

$color-1: #cbd4c1;
$color-2: #f2ece6;
$color-3: #9db4bb;
$color-4: #a895a3;
$color-5: #646670;

TAILWIND

colors: {
  'brand-1': '#cbd4c1',
  'brand-2': '#f2ece6',
  'brand-3': '#9db4bb',
  'brand-4': '#a895a3',
  'brand-5': '#646670',
}

RGB Array

[203, 212, 193], [242, 236, 230], [157, 180, 187], [168, 149, 163], [100, 102, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CBD4C1, #F2ECE6, #9DB4BB, #A895A3, #646670 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cbd4c1; --color-2: #f2ece6; --color-3: #9db4bb; --color-4: #a895a3; --color-5: #646670. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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