← Back to Editor

#CAD4BF · #E5FAB5 · #D1E4BD · #97C1B6 · #193E4B

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

WorkspaceReadingData Visualization

Color Details Color Details

#CAD4BF

Willow Green · LightGray · Apple Green

HEX
#CAD4BF
RGB
rgb(202, 212, 191)
HSL
hsl(89, 20%, 79%)
HSB
hsb(89, 10%, 83%)
CMYK
cmyk(5%, 0%, 10%, 17%)
Oklch
oklch(85.6% 0.030 127.9)

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

#E5FAB5

Willow Green · Wheat · Mint Green

HEX
#E5FAB5
RGB
rgb(229, 250, 181)
HSL
hsl(78, 87%, 85%)
HSB
hsb(78, 28%, 98%)
CMYK
cmyk(8%, 0%, 28%, 2%)
Oklch
oklch(95.3% 0.092 121.9)

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

#D1E4BD

Willow Green · LightGray · Mint Green

HEX
#D1E4BD
RGB
rgb(209, 228, 189)
HSL
hsl(89, 42%, 82%)
HSB
hsb(89, 17%, 89%)
CMYK
cmyk(8%, 0%, 17%, 11%)
Oklch
oklch(89.4% 0.056 128.7)

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

#97C1B6

Jade · DarkGray · Lake Green

HEX
#97C1B6
RGB
rgb(151, 193, 182)
HSL
hsl(164, 25%, 67%)
HSB
hsb(164, 22%, 76%)
CMYK
cmyk(22%, 0%, 6%, 24%)
Oklch
oklch(77.7% 0.047 177.2)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#193E4B

Slate Blue · DarkSlateGray · Peacock Green

HEX
#193E4B
RGB
rgb(25, 62, 75)
HSL
hsl(196, 50%, 20%)
HSB
hsb(196, 67%, 29%)
CMYK
cmyk(67%, 17%, 0%, 71%)
Oklch
oklch(34.3% 0.048 223.9)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAD4BF
C9BFD4

Analogous

D4D4BF
CAD4BF
BFD4BF

Triadic

CAD4BF
BFCAD4
D4BFCA

Split-Comp.

CAD4BF
BFBFD4
D4BFD4

Tetradic

CAD4BF
BFD4D4
C9BFD4
D4BFBF

Contrast Matrix WCAG 2.1 Contrast

CAD4BF
E5FAB5
D1E4BD
97C1B6
193E4B
—
1.4
Fail
1.1
Fail
1.3
Fail
7.5
AAA
1.4
Fail
—
1.2
Fail
1.8
Fail
10.2
AAA
1.1
Fail
1.2
Fail
—
1.5
Fail
8.5
AAA
1.3
Fail
1.8
Fail
1.5
Fail
—
5.8
AA
7.5
AAA
10.2
AAA
8.5
AAA
5.8
AA
—
White BG
1.5Fail
1.1Fail
1.4Fail
2.0Fail
11.5AAA
Black BG
13.7AAA
18.7AAA
15.5AAA
10.6AAA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECEC4
EEEEC6
D9D9C6
A9AAB9
292948

Deuteranopia

CECDC5
EDEBCA
D8D7C9
A7A4B9
272447

Tritanopia

CAC8C9
E6D3D6
D2CED0
99BBBB
1B4545

Achromatopsia

CFCFCF
ECECEC
DADADA
B3B3B3
343434

Shades & Tints Shades & Tints

#CAD4BF

Dark
Light

#E5FAB5

Dark
Light

#D1E4BD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cad4bf;
  --color-2: #e5fab5;
  --color-3: #d1e4bd;
  --color-4: #97c1b6;
  --color-5: #193e4b;
}

SCSS

$color-1: #cad4bf;
$color-2: #e5fab5;
$color-3: #d1e4bd;
$color-4: #97c1b6;
$color-5: #193e4b;

TAILWIND

colors: {
  'brand-1': '#cad4bf',
  'brand-2': '#e5fab5',
  'brand-3': '#d1e4bd',
  'brand-4': '#97c1b6',
  'brand-5': '#193e4b',
}

RGB Array

[202, 212, 191], [229, 250, 181], [209, 228, 189], [151, 193, 182], [25, 62, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CAD4BF, #E5FAB5, #D1E4BD, #97C1B6, #193E4B is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #cad4bf; --color-2: #e5fab5; --color-3: #d1e4bd; --color-4: #97c1b6; --color-5: #193e4b. 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 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