← Back to Editor

#B8D9D1 · #F2E7CE · #D2E791 · #70D96C · #04B38D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#B8D9D1

Jade · LightBlue · Glacier Blue

HEX
#B8D9D1
RGB
rgb(184, 217, 209)
HSL
hsl(165, 30%, 79%)
HSB
hsb(165, 15%, 85%)
CMYK
cmyk(15%, 0%, 4%, 15%)
Oklch
oklch(85.9% 0.037 179.1)

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

#F2E7CE

Goose Yellow · Bisque · Lemon Cream

HEX
#F2E7CE
RGB
rgb(242, 231, 206)
HSL
hsl(42, 58%, 88%)
HSB
hsb(42, 15%, 95%)
CMYK
cmyk(0%, 5%, 15%, 5%)
Oklch
oklch(93.0% 0.035 87.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D2E791

Willow Green · Khaki · Apple Green

HEX
#D2E791
RGB
rgb(210, 231, 145)
HSL
hsl(75, 64%, 74%)
HSB
hsb(75, 37%, 91%)
CMYK
cmyk(9%, 0%, 37%, 9%)
Oklch
oklch(89.3% 0.112 119.9)

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

#70D96C

Emerald · LightGreen · Apple Green

HEX
#70D96C
RGB
rgb(112, 217, 108)
HSL
hsl(118, 59%, 64%)
HSB
hsb(118, 50%, 85%)
CMYK
cmyk(48%, 0%, 50%, 15%)
Oklch
oklch(79.7% 0.177 143.0)

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

#04B38D

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#04B38D
RGB
rgb(4, 179, 141)
HSL
hsl(167, 96%, 36%)
HSB
hsb(167, 98%, 70%)
CMYK
cmyk(98%, 0%, 21%, 30%)
Oklch
oklch(68.2% 0.134 170.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8D9D1
DAB9C1

Analogous

B9DAC1
B8D9D1
B9D1DA

Triadic

B8D9D1
D1B9DA
DAD1B9

Split-Comp.

B8D9D1
DAB9D1
DAC1B9

Tetradic

B8D9D1
C1B9DA
DAB9C1
D1DAB9

Contrast Matrix WCAG 2.1 Contrast

B8D9D1
F2E7CE
D2E791
70D96C
04B38D
—
1.2
Fail
1.1
Fail
1.2
Fail
1.8
Fail
1.2
Fail
—
1.1
Fail
1.4
Fail
2.2
Fail
1.1
Fail
1.1
Fail
—
1.3
Fail
2.0
Fail
1.2
Fail
1.4
Fail
1.3
Fail
—
1.5
Fail
1.8
Fail
2.2
Fail
2.0
Fail
1.5
Fail
—
White BG
1.5Fail
1.2Fail
1.3Fail
1.8Fail
2.7Fail
Black BG
13.9AAA
17.1AAA
15.6AAA
11.8AAA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C7D3
EDEDD4
DBDBA6
9D9E86
505196

Deuteranopia

C4C2D3
EEEFD6
DAD8AB
97908D
463898

Tritanopia

BAD4D5
F1D9DA
D3B6BA
759BA0
0D9D9F

Achromatopsia

CECECE
E7E7E7
D7D7D7
ADADAD
7A7A7A

Shades & Tints Shades & Tints

#B8D9D1

Dark
Light

#F2E7CE

Dark
Light

#D2E791

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8d9d1;
  --color-2: #f2e7ce;
  --color-3: #d2e791;
  --color-4: #70d96c;
  --color-5: #04b38d;
}

SCSS

$color-1: #b8d9d1;
$color-2: #f2e7ce;
$color-3: #d2e791;
$color-4: #70d96c;
$color-5: #04b38d;

TAILWIND

colors: {
  'brand-1': '#b8d9d1',
  'brand-2': '#f2e7ce',
  'brand-3': '#d2e791',
  'brand-4': '#70d96c',
  'brand-5': '#04b38d',
}

RGB Array

[184, 217, 209], [242, 231, 206], [210, 231, 145], [112, 217, 108], [4, 179, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8D9D1, #F2E7CE, #D2E791, #70D96C, #04B38D is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #b8d9d1; --color-2: #f2e7ce; --color-3: #d2e791; --color-4: #70d96c; --color-5: #04b38d. 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 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