← Back to Editor

#CFDAB4 · #CFDBBE · #C7DBC1 · #C1DBC2 · #C1DBCF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CFDAB4

Willow Green · LightGray · Apple Green

HEX
#CFDAB4
RGB
rgb(207, 218, 180)
HSL
hsl(77, 34%, 78%)
HSB
hsb(77, 17%, 85%)
CMYK
cmyk(5%, 0%, 17%, 15%)
Oklch
oklch(87.0% 0.052 120.6)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

#CFDBBE

Willow Green · LightGray · Apple Green

HEX
#CFDBBE
RGB
rgb(207, 219, 190)
HSL
hsl(85, 29%, 80%)
HSB
hsb(85, 13%, 86%)
CMYK
cmyk(5%, 0%, 13%, 14%)
Oklch
oklch(87.5% 0.041 125.6)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

#C7DBC1

Celadon · LightGray · Mint Green

HEX
#C7DBC1
RGB
rgb(199, 219, 193)
HSL
hsl(106, 27%, 81%)
HSB
hsb(106, 12%, 86%)
CMYK
cmyk(9%, 0%, 12%, 14%)
Oklch
oklch(86.9% 0.041 138.5)

TraditionalCeladon」· PaintMint Green」· Creative Mint Breeze

#C1DBC2

Celadon · LightGray · Mint Green

HEX
#C1DBC2
RGB
rgb(193, 219, 194)
HSL
hsl(122, 27%, 81%)
HSB
hsb(122, 12%, 86%)
CMYK
cmyk(12%, 0%, 11%, 14%)
Oklch
oklch(86.5% 0.044 146.2)

TraditionalCeladon」· PaintMint Green」· Creative Mint Breeze

#C1DBCF

Jade · LightGray · Mint Green

HEX
#C1DBCF
RGB
rgb(193, 219, 207)
HSL
hsl(152, 27%, 81%)
HSB
hsb(152, 12%, 86%)
CMYK
cmyk(12%, 0%, 5%, 14%)
Oklch
oklch(86.9% 0.032 166.1)

TraditionalJade」· PaintMint Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFDAB4
BFB4DA

Analogous

DAD2B4
CFDAB4
BCDAB4

Triadic

CFDAB4
B4CFDA
DAB4CF

Split-Comp.

CFDAB4
B4BCDA
D2B4DA

Tetradic

CFDAB4
B4DAD2
BFB4DA
DAB4BC

Contrast Matrix WCAG 2.1 Contrast

CFDAB4
CFDBBE
C7DBC1
C1DBC2
C1DBCF
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
White BG
1.5Fail
1.4Fail
1.5Fail
1.5Fail
1.5Fail
Black BG
14.3AAA
14.5AAA
14.3AAA
14.2AAA
14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4BD
D4D4C5
D0D0C7
CCCCC8
CCCCD2

Deuteranopia

D3D2BF
D4D3C7
CFCDC9
CBC9CA
CBC9D3

Tritanopia

D0C4C6
D0CBCC
C8CCCD
C2CDCE
C2D4D5

Achromatopsia

D2D2D2
D4D4D4
D2D2D2
D0D0D0
D2D2D2

Shades & Tints Shades & Tints

#CFDAB4

Dark
Light

#CFDBBE

Dark
Light

#C7DBC1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfdab4;
  --color-2: #cfdbbe;
  --color-3: #c7dbc1;
  --color-4: #c1dbc2;
  --color-5: #c1dbcf;
}

SCSS

$color-1: #cfdab4;
$color-2: #cfdbbe;
$color-3: #c7dbc1;
$color-4: #c1dbc2;
$color-5: #c1dbcf;

TAILWIND

colors: {
  'brand-1': '#cfdab4',
  'brand-2': '#cfdbbe',
  'brand-3': '#c7dbc1',
  'brand-4': '#c1dbc2',
  'brand-5': '#c1dbcf',
}

RGB Array

[207, 218, 180], [207, 219, 190], [199, 219, 193], [193, 219, 194], [193, 219, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFDAB4, #CFDBBE, #C7DBC1, #C1DBC2, #C1DBCF is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #cfdab4; --color-2: #cfdbbe; --color-3: #c7dbc1; --color-4: #c1dbc2; --color-5: #c1dbcf. 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 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