#ABE86B + #C6D27B + #D4BD99 + #D4A3C5 + #E5DCE4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ABE86B

Willow Green · LightGreen · Apple Green

HEX

#ABE86B

RGB

rgb(171, 232, 107)

HSL

hsl(89, 73%, 66%)

HSB

hsb(89, 54%, 91%)

CMYK

cmyk(26%, 0%, 54%, 9%)

Oklch

oklch(86.3% 0.168 130.8)

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

#C6D27B

Fresh Green · Tan · Sunflower

HEX

#C6D27B

RGB

rgb(198, 210, 123)

HSL

hsl(68, 49%, 65%)

HSB

hsb(68, 41%, 82%)

CMYK

cmyk(6%, 0%, 41%, 18%)

Oklch

oklch(83.5% 0.112 115.3)

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

#D4BD99

Goose Yellow · Tan · Warm Sun

HEX

#D4BD99

RGB

rgb(212, 189, 153)

HSL

hsl(37, 41%, 72%)

HSB

hsb(37, 28%, 83%)

CMYK

cmyk(0%, 11%, 28%, 17%)

Oklch

oklch(80.9% 0.055 78.9)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D4A3C5

Mauve · Silver · Lilac Purple

HEX

#D4A3C5

RGB

rgb(212, 163, 197)

HSL

hsl(318, 36%, 74%)

HSB

hsb(318, 23%, 83%)

CMYK

cmyk(0%, 23%, 7%, 17%)

Oklch

oklch(77.1% 0.073 337.8)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#E5DCE4

Mauve · Lavender · Lavender

HEX

#E5DCE4

RGB

rgb(229, 220, 228)

HSL

hsl(307, 15%, 88%)

HSB

hsb(307, 4%, 90%)

CMYK

cmyk(0%, 4%, 0%, 10%)

Oklch

oklch(90.4% 0.014 329.1)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABE86B

A669E8

Analogous

E8E569

ABE86B

6BE869

Triadic

ABE86B

69AAE8

E869AA

Split-Comp.

ABE86B

696BE8

E569E8

Tetradic

ABE86B

69E8E5

A669E8

E8696B

Contrast Matrix WCAG 2.1 Contrast

ABE86B	C6D27B	D4BD99	D4A3C5	E5DCE4
—	1.1 Fail	1.3 Fail	1.5 Fail	1.1 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.2 Fail
1.3 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.5 Fail	1.3 Fail	1.2 Fail	—	1.6 Fail
1.1 Fail	1.2 Fail	1.4 Fail	1.6 Fail	—

White BG

1.4Fail

1.6Fail

1.8Fail

2.1Fail

1.3Fail

Black BG

14.5AAA

12.9AAA

11.5AAA

9.8AAA

15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C689

CBCB90

CACAA2

BFBEBD

E1E1E2

Deuteranopia

C2BD91

CBCA95

CBCDA4

C2C5BB

E2E2E2

Tritanopia

AEA1A6

C7A1A4

D3A9AA

D2B6B5

E5E1E0

Achromatopsia

C8C8C8

C4C4C4

C0C0C0

B6B6B6

E0E0E0

Shades & Tints Shades & Tints

#ABE86B

Dark

Light

#C6D27B

Dark

Light

#D4BD99

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abe86b;
  --color-2: #c6d27b;
  --color-3: #d4bd99;
  --color-4: #d4a3c5;
  --color-5: #e5dce4;
}

SCSS

$color-1: #abe86b;
$color-2: #c6d27b;
$color-3: #d4bd99;
$color-4: #d4a3c5;
$color-5: #e5dce4;

TAILWIND

colors: {
  'brand-1': '#abe86b',
  'brand-2': '#c6d27b',
  'brand-3': '#d4bd99',
  'brand-4': '#d4a3c5',
  'brand-5': '#e5dce4',
}

RGB Array

[171, 232, 107], [198, 210, 123], [212, 189, 153], [212, 163, 197], [229, 220, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABE86B, #C6D27B, #D4BD99, #D4A3C5, #E5DCE4 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: #abe86b; --color-2: #c6d27b; --color-3: #d4bd99; --color-4: #d4a3c5; --color-5: #e5dce4. 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