#DE527D + #DE9856 + #D9DE55 + #C7E6B6 + #ABC996 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DE527D

Dark Violet · LightCoral · Rose Pink

HEX

#DE527D

RGB

rgb(222, 82, 125)

HSL

hsl(342, 68%, 60%)

HSB

hsb(342, 63%, 87%)

CMYK

cmyk(0%, 63%, 44%, 13%)

Oklch

oklch(63.6% 0.178 4.7)

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

#DE9856

Tangerine · SandyBrown · Warm Sun

HEX

#DE9856

RGB

rgb(222, 152, 86)

HSL

hsl(29, 67%, 60%)

HSB

hsb(29, 61%, 87%)

CMYK

cmyk(0%, 32%, 61%, 13%)

Oklch

oklch(73.6% 0.118 62.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D9DE55

Autumn Sage · Khaki · Sunflower

HEX

#D9DE55

RGB

rgb(217, 222, 85)

HSL

hsl(62, 67%, 60%)

HSB

hsb(62, 62%, 87%)

CMYK

cmyk(2%, 0%, 62%, 13%)

Oklch

oklch(87.1% 0.157 111.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#C7E6B6

Celadon · LightGray · Mint Green

HEX

#C7E6B6

RGB

rgb(199, 230, 182)

HSL

hsl(99, 49%, 81%)

HSB

hsb(99, 21%, 90%)

CMYK

cmyk(13%, 0%, 21%, 10%)

Oklch

oklch(89.0% 0.072 134.6)

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

#ABC996

Celadon · DarkSeaGreen · Apple Green

HEX

#ABC996

RGB

rgb(171, 201, 150)

HSL

hsl(95, 32%, 69%)

HSB

hsb(95, 25%, 79%)

CMYK

cmyk(15%, 0%, 25%, 21%)

Oklch

oklch(80.1% 0.077 132.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE527D

54DEB5

Analogous

DE54C3

DE527D

DE6F54

Triadic

DE527D

7DDE54

547DDE

Split-Comp.

DE527D

54DE6F

54C3DE

Tetradic

DE527D

C3DE54

54DEB5

6F54DE

Contrast Matrix WCAG 2.1 Contrast

DE527D	DE9856	D9DE55	C7E6B6	ABC996
—	1.6 Fail	2.6 Fail	2.7 Fail	2.1 Fail
1.6 Fail	—	1.7 Fail	1.8 Fail	1.3 Fail
2.6 Fail	1.7 Fail	—	1.1 Fail	1.3 Fail
2.7 Fail	1.8 Fail	1.1 Fail	—	1.3 Fail
2.1 Fail	1.3 Fail	1.3 Fail	1.3 Fail	—

White BG

3.7AA Large

2.4Fail

1.4Fail

1.8Fail

Black BG

5.6AA

8.7AAA

14.5AAA

15.4AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A073

C0BF66

DBDB76

D4D5C2

B8B8A2

Deuteranopia

AAB470

C4C96A

DBDA7E

D3D0C4

B6B4A5

Tritanopia

D76A69

DA7375

D99096

C9CBCD

ADACAE

Achromatopsia

818181

A5A5A5

CDCDCD

D7D7D7

BABABA

Shades & Tints Shades & Tints

#DE527D

Dark

Light

#DE9856

Dark

Light

#D9DE55

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de527d;
  --color-2: #de9856;
  --color-3: #d9de55;
  --color-4: #c7e6b6;
  --color-5: #abc996;
}

SCSS

$color-1: #de527d;
$color-2: #de9856;
$color-3: #d9de55;
$color-4: #c7e6b6;
$color-5: #abc996;

TAILWIND

colors: {
  'brand-1': '#de527d',
  'brand-2': '#de9856',
  'brand-3': '#d9de55',
  'brand-4': '#c7e6b6',
  'brand-5': '#abc996',
}

RGB Array

[222, 82, 125], [222, 152, 86], [217, 222, 85], [199, 230, 182], [171, 201, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DE527D, #DE9856, #D9DE55, #C7E6B6, #ABC996 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: #de527d; --color-2: #de9856; --color-3: #d9de55; --color-4: #c7e6b6; --color-5: #abc996. 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