← Back to Editor

#D1E8E6 · #B2E5E4 · #B8CCB8 · #C2A89F · #A67788

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D1E8E6

Jade · LightGray · Glacier Blue

HEX
#D1E8E6
RGB
rgb(209, 232, 230)
HSL
hsl(175, 33%, 86%)
HSB
hsb(175, 10%, 91%)
CMYK
cmyk(10%, 0%, 1%, 9%)
Oklch
oklch(91.3% 0.024 190.4)

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

#B2E5E4

Jade · LightBlue · Glacier Blue

HEX
#B2E5E4
RGB
rgb(178, 229, 228)
HSL
hsl(179, 50%, 80%)
HSB
hsb(179, 22%, 90%)
CMYK
cmyk(22%, 0%, 0%, 10%)
Oklch
oklch(88.6% 0.052 194.8)

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

#B8CCB8

Celadon · Silver · Apple Green

HEX
#B8CCB8
RGB
rgb(184, 204, 184)
HSL
hsl(120, 16%, 76%)
HSB
hsb(120, 10%, 80%)
CMYK
cmyk(10%, 0%, 10%, 20%)
Oklch
oklch(82.4% 0.035 145.2)

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

#C2A89F

Apricot · DarkGray · Warm Sun

HEX
#C2A89F
RGB
rgb(194, 168, 159)
HSL
hsl(15, 22%, 69%)
HSB
hsb(15, 18%, 76%)
CMYK
cmyk(0%, 13%, 18%, 24%)
Oklch
oklch(75.2% 0.033 40.0)

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

#A67788

Dark Violet · Gray · Rose Pink

HEX
#A67788
RGB
rgb(166, 119, 136)
HSL
hsl(338, 21%, 56%)
HSB
hsb(338, 28%, 65%)
CMYK
cmyk(0%, 28%, 18%, 35%)
Oklch
oklch(62.2% 0.063 355.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1E8E6
E7D0D1

Analogous

D0E7D9
D1E8E6
D0DDE7

Triadic

D1E8E6
E5D0E7
E7E5D0

Split-Comp.

D1E8E6
E7D0DD
E7D9D0

Tetradic

D1E8E6
D9D0E7
E7D0D1
DDE7D0

Contrast Matrix WCAG 2.1 Contrast

D1E8E6
B2E5E4
B8CCB8
C2A89F
A67788
—
1.1
Fail
1.3
Fail
1.7
Fail
2.9
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
2.7
Fail
1.3
Fail
1.2
Fail
—
1.3
Fail
2.2
Fail
1.7
Fail
1.6
Fail
1.3
Fail
—
1.7
Fail
2.9
Fail
2.7
Fail
2.2
Fail
1.7
Fail
—
White BG
1.3Fail
1.4Fail
1.7Fail
2.2Fail
3.7AA Large
Black BG
16.4AAA
15.2AAA
12.4AAA
9.4AAA
5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBE6
C8C9E4
C1C1BD
B7B7A1
929184

Deuteranopia

DAD8E7
C5C1E4
C0BEBE
B8BAA2
949883

Tritanopia

D2E7E7
B5E4E4
B9C1C2
C1A3A3
A48180

Achromatopsia

E1E1E1
D6D6D6
C4C4C4
AFAFAF
878787

Shades & Tints Shades & Tints

#D1E8E6

Dark
Light

#B2E5E4

Dark
Light

#B8CCB8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1e8e6;
  --color-2: #b2e5e4;
  --color-3: #b8ccb8;
  --color-4: #c2a89f;
  --color-5: #a67788;
}

SCSS

$color-1: #d1e8e6;
$color-2: #b2e5e4;
$color-3: #b8ccb8;
$color-4: #c2a89f;
$color-5: #a67788;

TAILWIND

colors: {
  'brand-1': '#d1e8e6',
  'brand-2': '#b2e5e4',
  'brand-3': '#b8ccb8',
  'brand-4': '#c2a89f',
  'brand-5': '#a67788',
}

RGB Array

[209, 232, 230], [178, 229, 228], [184, 204, 184], [194, 168, 159], [166, 119, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1E8E6, #B2E5E4, #B8CCB8, #C2A89F, #A67788 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d1e8e6; --color-2: #b2e5e4; --color-3: #b8ccb8; --color-4: #c2a89f; --color-5: #a67788. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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