#AB82AE + #D692A7 + #E1B5B6 + #DDE0E7 + #90A0D3 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AB82AE

Dark Plum · DarkGray · Violet

HEX

#AB82AE

RGB

rgb(171, 130, 174)

HSL

hsl(296, 21%, 60%)

HSB

hsb(296, 25%, 68%)

CMYK

cmyk(2%, 25%, 0%, 32%)

Oklch

oklch(66.1% 0.079 324.2)

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

#D692A7

Rouge · Tan · Rose Pink

HEX

#D692A7

RGB

rgb(214, 146, 167)

HSL

hsl(341, 45%, 71%)

HSB

hsb(341, 32%, 84%)

CMYK

cmyk(0%, 32%, 22%, 16%)

Oklch

oklch(73.3% 0.086 359.3)

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

#E1B5B6

Peach Pink · LightPink · Coral Red

HEX

#E1B5B6

RGB

rgb(225, 181, 182)

HSL

hsl(359, 42%, 80%)

HSB

hsb(359, 20%, 88%)

CMYK

cmyk(0%, 20%, 19%, 12%)

Oklch

oklch(81.2% 0.051 16.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DDE0E7

Azure · Lavender · Sky Blue

HEX

#DDE0E7

RGB

rgb(221, 224, 231)

HSL

hsl(222, 17%, 89%)

HSB

hsb(222, 4%, 91%)

CMYK

cmyk(4%, 3%, 0%, 9%)

Oklch

oklch(90.6% 0.010 267.4)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#90A0D3

Azure · LightSteelBlue · Cobalt Blue

HEX

#90A0D3

RGB

rgb(144, 160, 211)

HSL

hsl(226, 43%, 70%)

HSB

hsb(226, 32%, 83%)

CMYK

cmyk(32%, 24%, 0%, 17%)

Oklch

oklch(71.2% 0.077 270.9)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB82AE

86AE84

Analogous

9684AE

AB82AE

AE849C

Triadic

AB82AE

AEAC84

84AEAC

Split-Comp.

AB82AE

9CAE84

84AE96

Tetradic

AB82AE

AE9684

86AE84

849CAE

Contrast Matrix WCAG 2.1 Contrast

AB82AE	D692A7	E1B5B6	DDE0E7	90A0D3
—	1.3 Fail	1.8 Fail	2.4 Fail	1.2 Fail
1.3 Fail	—	1.3 Fail	1.9 Fail	1.0 Fail
1.8 Fail	1.3 Fail	—	1.4 Fail	1.4 Fail
2.4 Fail	1.9 Fail	1.4 Fail	—	1.9 Fail
1.2 Fail	1.0 Fail	1.4 Fail	1.9 Fail	—

White BG

3.2AA Large

2.5Fail

1.8Fail

1.3Fail

2.6Fail

Black BG

6.5AA

8.5AAA

11.5AAA

15.9AAA

8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9999A3

B9B8A2

CECEB6

DEDEE5

9797C7

Deuteranopia

9C9FA1

BDC2A1

D1D4B6

DEDEE5

9695C4

Tritanopia

A99B99

D39E9D

DFB6B6

DDE4E4

91BDBB

Achromatopsia

939393

A9A9A9

C2C2C2

E0E0E0

A1A1A1

Shades & Tints Shades & Tints

#AB82AE

Dark

Light

#D692A7

Dark

Light

#E1B5B6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab82ae;
  --color-2: #d692a7;
  --color-3: #e1b5b6;
  --color-4: #dde0e7;
  --color-5: #90a0d3;
}

SCSS

$color-1: #ab82ae;
$color-2: #d692a7;
$color-3: #e1b5b6;
$color-4: #dde0e7;
$color-5: #90a0d3;

TAILWIND

colors: {
  'brand-1': '#ab82ae',
  'brand-2': '#d692a7',
  'brand-3': '#e1b5b6',
  'brand-4': '#dde0e7',
  'brand-5': '#90a0d3',
}

RGB Array

[171, 130, 174], [214, 146, 167], [225, 181, 182], [221, 224, 231], [144, 160, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #AB82AE, #D692A7, #E1B5B6, #DDE0E7, #90A0D3 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: #ab82ae; --color-2: #d692a7; --color-3: #e1b5b6; --color-4: #dde0e7; --color-5: #90a0d3. 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 sunset-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