#5D80A6 + #69A9B4 + #8FCDC0 + #E5D3C9 + #E0F4DB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5D80A6

Azure · SteelBlue · Navy Blue

HEX

#5D80A6

RGB

rgb(93, 128, 166)

HSL

hsl(211, 29%, 51%)

HSB

hsb(211, 44%, 65%)

CMYK

cmyk(44%, 23%, 0%, 35%)

Oklch

oklch(58.9% 0.071 251.1)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#69A9B4

Slate Blue · CadetBlue · Lake Green

HEX

#69A9B4

RGB

rgb(105, 169, 180)

HSL

hsl(189, 33%, 56%)

HSB

hsb(189, 42%, 71%)

CMYK

cmyk(42%, 6%, 0%, 29%)

Oklch

oklch(69.6% 0.067 209.6)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#8FCDC0

Jade · SkyBlue · Lake Green

HEX

#8FCDC0

RGB

rgb(143, 205, 192)

HSL

hsl(167, 38%, 68%)

HSB

hsb(167, 30%, 80%)

CMYK

cmyk(30%, 0%, 6%, 20%)

Oklch

oklch(80.2% 0.066 180.0)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#E5D3C9

Apricot · LightGray · Peach Orange

HEX

#E5D3C9

RGB

rgb(229, 211, 201)

HSL

hsl(21, 35%, 84%)

HSB

hsb(21, 12%, 90%)

CMYK

cmyk(0%, 8%, 12%, 10%)

Oklch

oklch(87.9% 0.024 51.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#E0F4DB

Emerald · Beige · Mint Green

HEX

#E0F4DB

RGB

rgb(224, 244, 219)

HSL

hsl(108, 53%, 91%)

HSB

hsb(108, 10%, 96%)

CMYK

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

Oklch

oklch(94.6% 0.039 139.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5D80A6

A6835E

Analogous

5EA5A6

5D80A6

5F5EA6

Triadic

5D80A6

A65E81

81A65E

Split-Comp.

5D80A6

A65F5E

A5A65E

Tetradic

5D80A6

A65EA5

A6835E

5EA65F

Contrast Matrix WCAG 2.1 Contrast

5D80A6	69A9B4	8FCDC0	E5D3C9	E0F4DB
—	1.6 Fail	2.3 Fail	2.8 Fail	3.6 AA Large
1.6 Fail	—	1.5 Fail	1.8 Fail	2.3 Fail
2.3 Fail	1.5 Fail	—	1.2 Fail	1.6 Fail
2.8 Fail	1.8 Fail	1.2 Fail	—	1.3 Fail
3.6 AA Large	2.3 Fail	1.6 Fail	1.3 Fail	—

White BG

4.1AA Large

2.6Fail

1.8Fail

1.4Fail

1.2Fail

Black BG

5.1AA

7.9AAA

11.7AAA

14.5AAA

18.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6C9D

8585B1

AAAAC3

DDDDCB

E9E9E1

Deuteranopia

6A689B

817CB1

A6A2C4

DEE0CC

E8E6E3

Tritanopia

5F9694

6CAFAF

92C6C6

E4CDCE

E1E6E7

Achromatopsia

7A7A7A

979797

B9B9B9

D7D7D7

EBEBEB

Shades & Tints Shades & Tints

#5D80A6

Dark

Light

#69A9B4

Dark

Light

#8FCDC0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5d80a6;
  --color-2: #69a9b4;
  --color-3: #8fcdc0;
  --color-4: #e5d3c9;
  --color-5: #e0f4db;
}

SCSS

$color-1: #5d80a6;
$color-2: #69a9b4;
$color-3: #8fcdc0;
$color-4: #e5d3c9;
$color-5: #e0f4db;

TAILWIND

colors: {
  'brand-1': '#5d80a6',
  'brand-2': '#69a9b4',
  'brand-3': '#8fcdc0',
  'brand-4': '#e5d3c9',
  'brand-5': '#e0f4db',
}

RGB Array

[93, 128, 166], [105, 169, 180], [143, 205, 192], [229, 211, 201], [224, 244, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5D80A6, #69A9B4, #8FCDC0, #E5D3C9, #E0F4DB 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: #5d80a6; --color-2: #69a9b4; --color-3: #8fcdc0; --color-4: #e5d3c9; --color-5: #e0f4db. 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