#DEF1EF + #B2EAEB + #DBCCB9 + #B49D8F + #A88A80 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DEF1EF

Jade · Lavender · Glacier Blue

HEX

#DEF1EF

RGB

rgb(222, 241, 239)

HSL

hsl(174, 40%, 91%)

HSB

hsb(174, 8%, 95%)

CMYK

cmyk(8%, 0%, 1%, 5%)

Oklch

oklch(94.4% 0.020 189.2)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#B2EAEB

Sky Blue · LightBlue · Glacier Blue

HEX

#B2EAEB

RGB

rgb(178, 234, 235)

HSL

hsl(181, 59%, 81%)

HSB

hsb(181, 24%, 92%)

CMYK

cmyk(24%, 0%, 0%, 8%)

Oklch

oklch(89.9% 0.057 197.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#DBCCB9

Goose Yellow · LightGray · Peach Orange

HEX

#DBCCB9

RGB

rgb(219, 204, 185)

HSL

hsl(34, 32%, 79%)

HSB

hsb(34, 16%, 86%)

CMYK

cmyk(0%, 7%, 16%, 14%)

Oklch

oklch(85.2% 0.031 73.9)

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

#B49D8F

Apricot · DarkGray · Warm Sun

HEX

#B49D8F

RGB

rgb(180, 157, 143)

HSL

hsl(23, 20%, 63%)

HSB

hsb(23, 21%, 71%)

CMYK

cmyk(0%, 13%, 21%, 29%)

Oklch

oklch(71.2% 0.034 53.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#A88A80

Tangerine · Gray · Warm Sun

HEX

#A88A80

RGB

rgb(168, 138, 128)

HSL

hsl(15, 19%, 58%)

HSB

hsb(15, 24%, 66%)

CMYK

cmyk(0%, 18%, 24%, 34%)

Oklch

oklch(65.8% 0.040 39.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEF1EF

F1DFE1

Analogous

DFF1E6

DEF1EF

DFEAF1

Triadic

DEF1EF

EFDFF1

F1EFDF

Split-Comp.

DEF1EF

F1DFEA

F1E6DF

Tetradic

DEF1EF

E6DFF1

F1DFE1

EAF1DF

Contrast Matrix WCAG 2.1 Contrast

DEF1EF	B2EAEB	DBCCB9	B49D8F	A88A80
—	1.1 Fail	1.3 Fail	2.2 Fail	2.7 Fail
1.1 Fail	—	1.2 Fail	1.9 Fail	2.4 Fail
1.3 Fail	1.2 Fail	—	1.6 Fail	2.0 Fail
2.2 Fail	1.9 Fail	1.6 Fail	—	1.2 Fail
2.7 Fail	2.4 Fail	2.0 Fail	1.2 Fail	—

White BG

1.2Fail

1.3Fail

1.6Fail

2.6Fail

3.2AA Large

Black BG

17.9AAA

15.9AAA

13.3AAA

8.2AAA

6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6EF

CACBEB

D5D4BE

AAAA92

9B9B82

Deuteranopia

E5E4F0

C7C3EB

D5D6BF

ABAD93

9D9F83

Tritanopia

DFF0F0

B5EBEB

DAC1C2

B39596

A78485

Achromatopsia

EBEBEB

D9D9D9

CECECE

A2A2A2

929292

Shades & Tints Shades & Tints

#DEF1EF

Dark

Light

#B2EAEB

Dark

Light

#DBCCB9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #def1ef;
  --color-2: #b2eaeb;
  --color-3: #dbccb9;
  --color-4: #b49d8f;
  --color-5: #a88a80;
}

SCSS

$color-1: #def1ef;
$color-2: #b2eaeb;
$color-3: #dbccb9;
$color-4: #b49d8f;
$color-5: #a88a80;

TAILWIND

colors: {
  'brand-1': '#def1ef',
  'brand-2': '#b2eaeb',
  'brand-3': '#dbccb9',
  'brand-4': '#b49d8f',
  'brand-5': '#a88a80',
}

RGB Array

[222, 241, 239], [178, 234, 235], [219, 204, 185], [180, 157, 143], [168, 138, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEF1EF, #B2EAEB, #DBCCB9, #B49D8F, #A88A80 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: #def1ef; --color-2: #b2eaeb; --color-3: #dbccb9; --color-4: #b49d8f; --color-5: #a88a80. 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