#ABE4B0 + #82B995 + #D1B2A2 + #BD829D + #B35E7F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ABE4B0

Emerald · LightGreen · Apple Green

HEX

#ABE4B0

RGB

rgb(171, 228, 176)

HSL

hsl(125, 51%, 78%)

HSB

hsb(125, 25%, 89%)

CMYK

cmyk(25%, 0%, 23%, 11%)

Oklch

oklch(86.6% 0.092 147.0)

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

#82B995

Celadon · DarkSeaGreen · Apple Green

HEX

#82B995

RGB

rgb(130, 185, 149)

HSL

hsl(141, 28%, 62%)

HSB

hsb(141, 30%, 73%)

CMYK

cmyk(30%, 0%, 19%, 27%)

Oklch

oklch(73.7% 0.078 155.3)

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

#D1B2A2

Apricot · Tan · Warm Sun

HEX

#D1B2A2

RGB

rgb(209, 178, 162)

HSL

hsl(20, 34%, 73%)

HSB

hsb(20, 22%, 82%)

CMYK

cmyk(0%, 15%, 22%, 18%)

Oklch

oklch(78.6% 0.042 48.9)

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

#BD829D

Rouge · DarkGray · Rose Pink

HEX

#BD829D

RGB

rgb(189, 130, 157)

HSL

hsl(333, 31%, 63%)

HSB

hsb(333, 31%, 74%)

CMYK

cmyk(0%, 31%, 17%, 26%)

Oklch

oklch(67.4% 0.081 350.4)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#B35E7F

Dark Violet · Gray · Rose Pink

HEX

#B35E7F

RGB

rgb(179, 94, 127)

HSL

hsl(337, 36%, 54%)

HSB

hsb(337, 47%, 70%)

CMYK

cmyk(0%, 47%, 29%, 30%)

Oklch

oklch(59.1% 0.116 356.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABE4B0

E4AADF

Analogous

C2E4AA

ABE4B0

AAE4CC

Triadic

ABE4B0

AFAAE4

E4AFAA

Split-Comp.

ABE4B0

CCAAE4

E4AAC2

Tetradic

ABE4B0

AAC2E4

E4AADF

E4CCAA

Contrast Matrix WCAG 2.1 Contrast

ABE4B0	82B995	D1B2A2	BD829D	B35E7F
—	1.6 Fail	1.4 Fail	2.1 Fail	3.0 Fail
1.6 Fail	—	1.1 Fail	1.4 Fail	1.9 Fail
1.4 Fail	1.1 Fail	—	1.5 Fail	2.2 Fail
2.1 Fail	1.4 Fail	1.5 Fail	—	1.4 Fail
3.0 Fail	1.9 Fail	2.2 Fail	1.4 Fail	—

White BG

1.5Fail

2.3Fail

2.0Fail

3.1AA Large

4.4AA Large

Black BG

14.5AAA

9.3AAA

10.6AAA

6.8AA

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C4BD

9A9A9E

C4C3A6

A3A396

8E8D77

Deuteranopia

C0BCC0

9793A0

C5C8A7

A7AB95

939A75

Tritanopia

AEC7C9

85A5A6

CFA9AA

BA9190

AF716F

Achromatopsia

CDCDCD

A4A4A4

B9B9B9

979797

7B7B7B

Shades & Tints Shades & Tints

#ABE4B0

Dark

Light

#82B995

Dark

Light

#D1B2A2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abe4b0;
  --color-2: #82b995;
  --color-3: #d1b2a2;
  --color-4: #bd829d;
  --color-5: #b35e7f;
}

SCSS

$color-1: #abe4b0;
$color-2: #82b995;
$color-3: #d1b2a2;
$color-4: #bd829d;
$color-5: #b35e7f;

TAILWIND

colors: {
  'brand-1': '#abe4b0',
  'brand-2': '#82b995',
  'brand-3': '#d1b2a2',
  'brand-4': '#bd829d',
  'brand-5': '#b35e7f',
}

RGB Array

[171, 228, 176], [130, 185, 149], [209, 178, 162], [189, 130, 157], [179, 94, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABE4B0, #82B995, #D1B2A2, #BD829D, #B35E7F 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: #abe4b0; --color-2: #82b995; --color-3: #d1b2a2; --color-4: #bd829d; --color-5: #b35e7f. 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