#DFE3DA + #BFDCBA + #9CCFB3 + #5BABB2 + #527CA1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DFE3DA

Willow Green · LightGray · Mint Green

HEX

#DFE3DA

RGB

rgb(223, 227, 218)

HSL

hsl(87, 14%, 87%)

HSB

hsb(87, 4%, 89%)

CMYK

cmyk(2%, 0%, 4%, 11%)

Oklch

oklch(91.0% 0.013 126.4)

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

#BFDCBA

Celadon · Silver · Apple Green

HEX

#BFDCBA

RGB

rgb(191, 220, 186)

HSL

hsl(111, 33%, 80%)

HSB

hsb(111, 15%, 86%)

CMYK

cmyk(13%, 0%, 15%, 14%)

Oklch

oklch(86.4% 0.056 141.0)

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

#9CCFB3

Celadon · Silver · Apple Green

HEX

#9CCFB3

RGB

rgb(156, 207, 179)

HSL

hsl(147, 35%, 71%)

HSB

hsb(147, 25%, 81%)

CMYK

cmyk(25%, 0%, 14%, 19%)

Oklch

oklch(81.1% 0.066 160.5)

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

#5BABB2

Slate Blue · CadetBlue · Lake Green

HEX

#5BABB2

RGB

rgb(91, 171, 178)

HSL

hsl(185, 36%, 53%)

HSB

hsb(185, 49%, 70%)

CMYK

cmyk(49%, 4%, 0%, 30%)

Oklch

oklch(69.3% 0.079 202.9)

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

#527CA1

Slate Blue · SteelBlue · Navy Blue

HEX

#527CA1

RGB

rgb(82, 124, 161)

HSL

hsl(208, 33%, 48%)

HSB

hsb(208, 49%, 63%)

CMYK

cmyk(49%, 23%, 0%, 37%)

Oklch

oklch(57.1% 0.074 246.1)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFE3DA

DDD9E2

Analogous

E2E2D9

DFE3DA

DAE2D9

Triadic

DFE3DA

D9DEE2

E2D9DE

Split-Comp.

DFE3DA

D9DAE2

E2D9E2

Tetradic

DFE3DA

D9E2E2

DDD9E2

E2D9DA

Contrast Matrix WCAG 2.1 Contrast

DFE3DA	BFDCBA	9CCFB3	5BABB2	527CA1
—	1.1 Fail	1.3 Fail	2.0 Fail	3.4 AA Large
1.1 Fail	—	1.2 Fail	1.8 Fail	3.0 Fail
1.3 Fail	1.2 Fail	—	1.5 Fail	2.5 Fail
2.0 Fail	1.8 Fail	1.5 Fail	—	1.7 Fail
3.4 AA Large	3.0 Fail	2.5 Fail	1.7 Fail	—

White BG

1.3Fail

1.5Fail

1.8Fail

2.7Fail

4.4AA Large

Black BG

16.1AAA

14.2AAA

12.0AAA

7.9AAA

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E1DC

CCCCC2

B2B3BA

7E7EB0

646598

Deuteranopia

E1E0DD

CAC8C4

AFABBB

7973B0

625F96

Tritanopia

DFDEDE

C0C9CA

9FBFC0

5FAFAF

54918F

Achromatopsia

E1E1E1

CFCFCF

BDBDBD

949494

747474

Shades & Tints Shades & Tints

#DFE3DA

Dark

Light

#BFDCBA

Dark

Light

#9CCFB3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfe3da;
  --color-2: #bfdcba;
  --color-3: #9ccfb3;
  --color-4: #5babb2;
  --color-5: #527ca1;
}

SCSS

$color-1: #dfe3da;
$color-2: #bfdcba;
$color-3: #9ccfb3;
$color-4: #5babb2;
$color-5: #527ca1;

TAILWIND

colors: {
  'brand-1': '#dfe3da',
  'brand-2': '#bfdcba',
  'brand-3': '#9ccfb3',
  'brand-4': '#5babb2',
  'brand-5': '#527ca1',
}

RGB Array

[223, 227, 218], [191, 220, 186], [156, 207, 179], [91, 171, 178], [82, 124, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFE3DA, #BFDCBA, #9CCFB3, #5BABB2, #527CA1 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: #dfe3da; --color-2: #bfdcba; --color-3: #9ccfb3; --color-4: #5babb2; --color-5: #527ca1. 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