← Back to Editor

#D1F4D1 · #C4D2C8 · #B5ADB7 · #A78BA7 · #9A6B96

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D1F4D1

Emerald · LightGray · Mint Green

HEX
#D1F4D1
RGB
rgb(209, 244, 209)
HSL
hsl(120, 61%, 89%)
HSB
hsb(120, 14%, 96%)
CMYK
cmyk(14%, 0%, 14%, 4%)
Oklch
oklch(93.3% 0.059 145.1)

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

#C4D2C8

Celadon · LightGray · Apple Green

HEX
#C4D2C8
RGB
rgb(196, 210, 200)
HSL
hsl(137, 13%, 80%)
HSB
hsb(137, 7%, 82%)
CMYK
cmyk(7%, 0%, 5%, 18%)
Oklch
oklch(85.0% 0.020 154.8)

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

#B5ADB7

Ash · DarkGray · Silver Sand

HEX
#B5ADB7
RGB
rgb(181, 173, 183)
HSL
hsl(288, 6%, 70%)
HSB
hsb(288, 5%, 72%)
CMYK
cmyk(1%, 5%, 0%, 28%)
Oklch
oklch(75.7% 0.017 319.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#A78BA7

Rose Purple · DarkGray · Violet

HEX
#A78BA7
RGB
rgb(167, 139, 167)
HSL
hsl(300, 14%, 60%)
HSB
hsb(300, 17%, 65%)
CMYK
cmyk(0%, 17%, 0%, 35%)
Oklch
oklch(67.1% 0.052 326.1)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#9A6B96

Rose Purple · Gray · Violet

HEX
#9A6B96
RGB
rgb(154, 107, 150)
HSL
hsl(305, 19%, 51%)
HSB
hsb(305, 31%, 60%)
CMYK
cmyk(0%, 31%, 3%, 40%)
Oklch
oklch(59.1% 0.085 329.5)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1F4D1
F4D2F4

Analogous

E3F4D2
D1F4D1
D2F4E3

Triadic

D1F4D1
D2D2F4
F4D2D2

Split-Comp.

D1F4D1
E3D2F4
F4D2E3

Tetradic

D1F4D1
D2E3F4
F4D2F4
F4E3D2

Contrast Matrix WCAG 2.1 Contrast

D1F4D1
C4D2C8
B5ADB7
A78BA7
9A6B96
—
1.3
Fail
1.8
Fail
2.5
Fail
3.6
AA Large
1.3
Fail
—
1.4
Fail
1.9
Fail
2.7
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
2.0
Fail
2.5
Fail
1.9
Fail
1.4
Fail
—
1.4
Fail
3.6
AA Large
2.7
Fail
2.0
Fail
1.4
Fail
—
White BG
1.2Fail
1.6Fail
2.2Fail
3.0AA Large
4.3AA Large
Black BG
17.6AAA
13.4AAA
9.6AAA
6.9AA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0D9
CACACA
B2B1B5
9B9BA0
86858C

Deuteranopia

DEDCDC
C9C8CB
B2B3B4
9D9F9F
888C89

Tritanopia

D3E0E2
C5CCCD
B5B3B2
A69B9A
988382

Achromatopsia

E6E6E6
CDCDCD
B1B1B1
979797
7E7E7E

Shades & Tints Shades & Tints

#D1F4D1

Dark
Light

#C4D2C8

Dark
Light

#B5ADB7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1f4d1;
  --color-2: #c4d2c8;
  --color-3: #b5adb7;
  --color-4: #a78ba7;
  --color-5: #9a6b96;
}

SCSS

$color-1: #d1f4d1;
$color-2: #c4d2c8;
$color-3: #b5adb7;
$color-4: #a78ba7;
$color-5: #9a6b96;

TAILWIND

colors: {
  'brand-1': '#d1f4d1',
  'brand-2': '#c4d2c8',
  'brand-3': '#b5adb7',
  'brand-4': '#a78ba7',
  'brand-5': '#9a6b96',
}

RGB Array

[209, 244, 209], [196, 210, 200], [181, 173, 183], [167, 139, 167], [154, 107, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1F4D1, #C4D2C8, #B5ADB7, #A78BA7, #9A6B96 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: #d1f4d1; --color-2: #c4d2c8; --color-3: #b5adb7; --color-4: #a78ba7; --color-5: #9a6b96. 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