#5A8DA4 + #8E8EA0 + #E67893 + #F3B2A4 + #FFEABD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5A8DA4

Slate Blue · CadetBlue · Mint Ice

HEX

#5A8DA4

RGB

rgb(90, 141, 164)

HSL

hsl(199, 29%, 50%)

HSB

hsb(199, 45%, 64%)

CMYK

cmyk(45%, 14%, 0%, 36%)

Oklch

oklch(61.6% 0.065 228.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#8E8EA0

Deep Indigo · LightSlateGray · Silver Sand

HEX

#8E8EA0

RGB

rgb(142, 142, 160)

HSL

hsl(240, 9%, 59%)

HSB

hsb(240, 11%, 63%)

CMYK

cmyk(11%, 11%, 0%, 37%)

Oklch

oklch(65.3% 0.027 285.6)

Traditional「Deep Indigo」· Paint「Silver Sand」· Creative Urban Concrete

#E67893

Peach Pink · LightCoral · Coral Red

HEX

#E67893

RGB

rgb(230, 120, 147)

HSL

hsl(345, 69%, 69%)

HSB

hsb(345, 48%, 90%)

CMYK

cmyk(0%, 48%, 36%, 10%)

Oklch

oklch(70.4% 0.138 5.7)

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

#F3B2A4

Peach Pink · LightPink · Coral Red

HEX

#F3B2A4

RGB

rgb(243, 178, 164)

HSL

hsl(11, 77%, 80%)

HSB

hsb(11, 33%, 95%)

CMYK

cmyk(0%, 27%, 33%, 5%)

Oklch

oklch(82.0% 0.079 32.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FFEABD

Goose Yellow · Bisque · Lemon Cream

HEX

#FFEABD

RGB

rgb(255, 234, 189)

HSL

hsl(41, 100%, 87%)

HSB

hsb(41, 26%, 100%)

CMYK

cmyk(0%, 8%, 26%, 0%)

Oklch

oklch(94.3% 0.062 85.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A8DA4

A4725B

Analogous

5BA497

5A8DA4

5B68A4

Triadic

5A8DA4

A45B8D

8DA45B

Split-Comp.

5A8DA4

A45B68

A4975B

Tetradic

5A8DA4

975BA4

A4725B

68A45B

Contrast Matrix WCAG 2.1 Contrast

5A8DA4	8E8EA0	E67893	F3B2A4	FFEABD
—	1.1 Fail	1.3 Fail	2.0 Fail	3.1 AA Large
1.1 Fail	—	1.1 Fail	1.8 Fail	2.7 Fail
1.3 Fail	1.1 Fail	—	1.6 Fail	2.4 Fail
2.0 Fail	1.8 Fail	1.6 Fail	—	1.5 Fail
3.1 AA Large	2.7 Fail	2.4 Fail	1.5 Fail	—

White BG

3.6AA Large

3.2AA Large

2.8Fail

1.8Fail

1.2Fail

Black BG

5.8AA

6.5AA

7.5AAA

11.7AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

70719E

8E8E9C

B6B58C

D7D6A7

F6F6C8

Deuteranopia

6D699D

8E8E9B

BDC58B

DBE0A8

F7F9CB

Tritanopia

5D9A99

8E9897

E18786

F0AAAB

FED0D2

Achromatopsia

808080

909090

9C9C9C

C4C4C4

EBEBEB

Shades & Tints Shades & Tints

#5A8DA4

Dark

Light

#8E8EA0

Dark

Light

#E67893

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a8da4;
  --color-2: #8e8ea0;
  --color-3: #e67893;
  --color-4: #f3b2a4;
  --color-5: #ffeabd;
}

SCSS

$color-1: #5a8da4;
$color-2: #8e8ea0;
$color-3: #e67893;
$color-4: #f3b2a4;
$color-5: #ffeabd;

TAILWIND

colors: {
  'brand-1': '#5a8da4',
  'brand-2': '#8e8ea0',
  'brand-3': '#e67893',
  'brand-4': '#f3b2a4',
  'brand-5': '#ffeabd',
}

RGB Array

[90, 141, 164], [142, 142, 160], [230, 120, 147], [243, 178, 164], [255, 234, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A8DA4, #8E8EA0, #E67893, #F3B2A4, #FFEABD 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: #5a8da4; --color-2: #8e8ea0; --color-3: #e67893; --color-4: #f3b2a4; --color-5: #ffeabd. 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