← Back to Editor

#DEFBF1 · #D3F2F9 · #C3E1EA · #B8BCFE · #BAB0BA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#DEFBF1

Jade · Lavender · Mint Green

HEX
#DEFBF1
RGB
rgb(222, 251, 241)
HSL
hsl(159, 78%, 93%)
HSB
hsb(159, 12%, 98%)
CMYK
cmyk(12%, 0%, 4%, 2%)
Oklch
oklch(96.4% 0.033 172.9)

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

#D3F2F9

Sky Blue · Lavender · Glacier Blue

HEX
#D3F2F9
RGB
rgb(211, 242, 249)
HSL
hsl(191, 76%, 90%)
HSB
hsb(191, 15%, 98%)
CMYK
cmyk(15%, 3%, 0%, 2%)
Oklch
oklch(94.1% 0.034 212.8)

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

#C3E1EA

Sky Blue · LightBlue · Glacier Blue

HEX
#C3E1EA
RGB
rgb(195, 225, 234)
HSL
hsl(194, 48%, 84%)
HSB
hsb(194, 17%, 92%)
CMYK
cmyk(17%, 4%, 0%, 8%)
Oklch
oklch(89.1% 0.034 217.8)

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

#B8BCFE

Azure · LightSteelBlue · Sky Blue

HEX
#B8BCFE
RGB
rgb(184, 188, 254)
HSL
hsl(237, 97%, 86%)
HSB
hsb(237, 28%, 100%)
CMYK
cmyk(28%, 26%, 0%, 0%)
Oklch
oklch(81.6% 0.093 281.4)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#BAB0BA

Silver Gray · Silver · Pearl Gray

HEX
#BAB0BA
RGB
rgb(186, 176, 186)
HSL
hsl(300, 7%, 71%)
HSB
hsb(300, 5%, 73%)
CMYK
cmyk(0%, 5%, 0%, 27%)
Oklch
oklch(76.9% 0.018 325.8)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEFBF1
FBDFE9

Analogous

DFFBE3
DEFBF1
DFF7FB

Triadic

DEFBF1
F1DFFB
FBF1DF

Split-Comp.

DEFBF1
FBDFF7
FBE3DF

Tetradic

DEFBF1
E3DFFB
FBDFE9
F7FBDF

Contrast Matrix WCAG 2.1 Contrast

DEFBF1
D3F2F9
C3E1EA
B8BCFE
BAB0BA
—
1.1
Fail
1.3
Fail
1.6
Fail
1.9
Fail
1.1
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.3
Fail
1.2
Fail
—
1.3
Fail
1.5
Fail
1.6
Fail
1.5
Fail
1.3
Fail
—
1.2
Fail
1.9
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
White BG
1.1Fail
1.2Fail
1.4Fail
1.8Fail
2.1Fail
Black BG
19.2AAA
17.8AAA
15.3AAA
11.7AAA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBF3
E0E1F7
D0D0E8
BABAEE
B6B6B8

Deuteranopia

E9E7F4
DFDCF7
CECCE7
BAB9EA
B6B7B7

Tritanopia

DFF5F6
D5F6F6
C5E6E6
B8E1DF
BAB6B5

Achromatopsia

F1F1F1
EAEAEA
D9D9D9
C2C2C2
B4B4B4

Shades & Tints Shades & Tints

#DEFBF1

Dark
Light

#D3F2F9

Dark
Light

#C3E1EA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #defbf1;
  --color-2: #d3f2f9;
  --color-3: #c3e1ea;
  --color-4: #b8bcfe;
  --color-5: #bab0ba;
}

SCSS

$color-1: #defbf1;
$color-2: #d3f2f9;
$color-3: #c3e1ea;
$color-4: #b8bcfe;
$color-5: #bab0ba;

TAILWIND

colors: {
  'brand-1': '#defbf1',
  'brand-2': '#d3f2f9',
  'brand-3': '#c3e1ea',
  'brand-4': '#b8bcfe',
  'brand-5': '#bab0ba',
}

RGB Array

[222, 251, 241], [211, 242, 249], [195, 225, 234], [184, 188, 254], [186, 176, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEFBF1, #D3F2F9, #C3E1EA, #B8BCFE, #BAB0BA is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #defbf1; --color-2: #d3f2f9; --color-3: #c3e1ea; --color-4: #b8bcfe; --color-5: #bab0ba. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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