#ABD4B4 + #CC528D + #E6AABB + #DCDE99 + #EBF0E1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ABD4B4

Celadon · Silver · Apple Green

HEX

#ABD4B4

RGB

rgb(171, 212, 180)

HSL

hsl(133, 32%, 75%)

HSB

hsb(133, 19%, 83%)

CMYK

cmyk(19%, 0%, 15%, 17%)

Oklch

oklch(83.2% 0.062 151.5)

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

#CC528D

Dark Violet · LightCoral · Rose Pink

HEX

#CC528D

RGB

rgb(204, 82, 141)

HSL

hsl(331, 54%, 56%)

HSB

hsb(331, 60%, 80%)

CMYK

cmyk(0%, 60%, 31%, 20%)

Oklch

oklch(61.4% 0.166 353.0)

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

#E6AABB

Rouge · LightPink · Cherry Blossom

HEX

#E6AABB

RGB

rgb(230, 170, 187)

HSL

hsl(343, 55%, 78%)

HSB

hsb(343, 26%, 90%)

CMYK

cmyk(0%, 26%, 19%, 10%)

Oklch

oklch(79.9% 0.073 0.2)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#DCDE99

Fresh Green · Khaki · Sunflower

HEX

#DCDE99

RGB

rgb(220, 222, 153)

HSL

hsl(62, 51%, 74%)

HSB

hsb(62, 31%, 87%)

CMYK

cmyk(1%, 0%, 31%, 13%)

Oklch

oklch(88.3% 0.089 109.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#EBF0E1

Willow Green · Beige · Mint Green

HEX

#EBF0E1

RGB

rgb(235, 240, 225)

HSL

hsl(80, 33%, 91%)

HSB

hsb(80, 6%, 94%)

CMYK

cmyk(2%, 0%, 6%, 6%)

Oklch

oklch(94.7% 0.021 121.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABD4B4

D4ABCB

Analogous

B6D4AB

ABD4B4

ABD4C8

Triadic

ABD4B4

B4ABD4

D4B4AB

Split-Comp.

ABD4B4

C8ABD4

D4ABB6

Tetradic

ABD4B4

ABB6D4

D4ABCB

D4C8AB

Contrast Matrix WCAG 2.1 Contrast

ABD4B4	CC528D	E6AABB	DCDE99	EBF0E1
—	2.5 Fail	1.2 Fail	1.2 Fail	1.4 Fail
2.5 Fail	—	2.1 Fail	2.9 Fail	3.5 AA Large
1.2 Fail	2.1 Fail	—	1.4 Fail	1.7 Fail
1.2 Fail	2.9 Fail	1.4 Fail	—	1.2 Fail
1.4 Fail	3.5 AA Large	1.7 Fail	1.2 Fail	—

White BG

1.6Fail

4.1AA Large

1.9Fail

1.4Fail

1.2Fail

Black BG

12.8AAA

5.2AA

10.8AAA

15.0AAA

18.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBDBC

97967F

CCCBB7

DDDDAA

EDEDE5

Deuteranopia

BAB7BE

9EA77B

D0D4B6

DDDDAE

EDEDE6

Tritanopia

ADC2C3

C67371

E3B4B3

DCB7BA

EBE7E8

Achromatopsia

C4C4C4

7D7D7D

BEBEBE

D6D6D6

EDEDED

Shades & Tints Shades & Tints

#ABD4B4

Dark

Light

#CC528D

Dark

Light

#E6AABB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abd4b4;
  --color-2: #cc528d;
  --color-3: #e6aabb;
  --color-4: #dcde99;
  --color-5: #ebf0e1;
}

SCSS

$color-1: #abd4b4;
$color-2: #cc528d;
$color-3: #e6aabb;
$color-4: #dcde99;
$color-5: #ebf0e1;

TAILWIND

colors: {
  'brand-1': '#abd4b4',
  'brand-2': '#cc528d',
  'brand-3': '#e6aabb',
  'brand-4': '#dcde99',
  'brand-5': '#ebf0e1',
}

RGB Array

[171, 212, 180], [204, 82, 141], [230, 170, 187], [220, 222, 153], [235, 240, 225]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABD4B4, #CC528D, #E6AABB, #DCDE99, #EBF0E1 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: #abd4b4; --color-2: #cc528d; --color-3: #e6aabb; --color-4: #dcde99; --color-5: #ebf0e1. 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