#AB67BE + #E57EB3 + #DFBB89 + #C5DD85 + #E2E5E5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AB67BE

Dark Plum · MediumOrchid · Violet

HEX

#AB67BE

RGB

rgb(171, 103, 190)

HSL

hsl(287, 40%, 57%)

HSB

hsb(287, 46%, 75%)

CMYK

cmyk(10%, 46%, 0%, 25%)

Oklch

oklch(62.2% 0.145 318.6)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#E57EB3

Mauve · Orchid · Rose Pink

HEX

#E57EB3

RGB

rgb(229, 126, 179)

HSL

hsl(329, 66%, 70%)

HSB

hsb(329, 45%, 90%)

CMYK

cmyk(0%, 45%, 22%, 10%)

Oklch

oklch(72.2% 0.141 349.0)

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

#DFBB89

Goose Yellow · BurlyWood · Warm Sun

HEX

#DFBB89

RGB

rgb(223, 187, 137)

HSL

hsl(35, 57%, 71%)

HSB

hsb(35, 39%, 87%)

CMYK

cmyk(0%, 16%, 39%, 13%)

Oklch

oklch(81.2% 0.077 75.4)

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

#C5DD85

Willow Green · Tan · Apple Green

HEX

#C5DD85

RGB

rgb(197, 221, 133)

HSL

hsl(76, 56%, 69%)

HSB

hsb(76, 40%, 87%)

CMYK

cmyk(11%, 0%, 40%, 13%)

Oklch

oklch(86.0% 0.116 121.3)

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

#E2E5E5

Plain White · Lavender · Cloud White

HEX

#E2E5E5

RGB

rgb(226, 229, 229)

HSL

hsl(180, 5%, 89%)

HSB

hsb(180, 1%, 90%)

CMYK

cmyk(1%, 0%, 0%, 10%)

Oklch

oklch(92.0% 0.003 197.1)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB67BE

78BD65

Analogous

7E65BD

AB67BE

BD65A4

Triadic

AB67BE

BDAA65

65BDAA

Split-Comp.

AB67BE

A4BD65

65BD7E

Tetradic

AB67BE

BD7E65

78BD65

65A4BD

Contrast Matrix WCAG 2.1 Contrast

AB67BE	E57EB3	DFBB89	C5DD85	E2E5E5
—	1.5 Fail	2.1 Fail	2.6 Fail	3.1 AA Large
1.5 Fail	—	1.5 Fail	1.8 Fail	2.1 Fail
2.1 Fail	1.5 Fail	—	1.2 Fail	1.4 Fail
2.6 Fail	1.8 Fail	1.2 Fail	—	1.2 Fail
3.1 AA Large	2.1 Fail	1.4 Fail	1.2 Fail	—

White BG

3.9AA Large

2.6Fail

1.8Fail

1.5Fail

1.3Fail

Black BG

5.4AA

8.0AAA

11.6AAA

14.1AAA

16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8DA9

B8B7A6

CFCF95

CFD09A

E3E3E5

Deuteranopia

9297A4

BEC6A3

D2D498

CECC9F

E3E3E5

Tritanopia

A89895

E09C9A

DD9FA1

C6ABAF

E2E5E5

Achromatopsia

858585

A3A3A3

C0C0C0

CCCCCC

E4E4E4

Shades & Tints Shades & Tints

#AB67BE

Dark

Light

#E57EB3

Dark

Light

#DFBB89

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab67be;
  --color-2: #e57eb3;
  --color-3: #dfbb89;
  --color-4: #c5dd85;
  --color-5: #e2e5e5;
}

SCSS

$color-1: #ab67be;
$color-2: #e57eb3;
$color-3: #dfbb89;
$color-4: #c5dd85;
$color-5: #e2e5e5;

TAILWIND

colors: {
  'brand-1': '#ab67be',
  'brand-2': '#e57eb3',
  'brand-3': '#dfbb89',
  'brand-4': '#c5dd85',
  'brand-5': '#e2e5e5',
}

RGB Array

[171, 103, 190], [229, 126, 179], [223, 187, 137], [197, 221, 133], [226, 229, 229]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB67BE, #E57EB3, #DFBB89, #C5DD85, #E2E5E5 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: #ab67be; --color-2: #e57eb3; --color-3: #dfbb89; --color-4: #c5dd85; --color-5: #e2e5e5. 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