← Back to Editor

#08566C · #528FA6 · #BAE0D3 · #E0DDB8 · #FE4B8A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#08566C

Lake Blue · Teal · Peacock Green

HEX
#08566C
RGB
rgb(8, 86, 108)
HSL
hsl(193, 86%, 23%)
HSB
hsb(193, 93%, 42%)
CMYK
cmyk(93%, 20%, 0%, 58%)
Oklch
oklch(42.2% 0.076 223.7)

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

#528FA6

Slate Blue · CadetBlue · Mint Ice

HEX
#528FA6
RGB
rgb(82, 143, 166)
HSL
hsl(196, 34%, 49%)
HSB
hsb(196, 51%, 65%)
CMYK
cmyk(51%, 14%, 0%, 35%)
Oklch
oklch(61.8% 0.072 224.5)

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

#BAE0D3

Jade · LightBlue · Apple Green

HEX
#BAE0D3
RGB
rgb(186, 224, 211)
HSL
hsl(159, 38%, 80%)
HSB
hsb(159, 17%, 88%)
CMYK
cmyk(17%, 0%, 6%, 12%)
Oklch
oklch(87.6% 0.044 172.5)

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

#E0DDB8

Fresh Green · Wheat · Lemon Cream

HEX
#E0DDB8
RGB
rgb(224, 221, 184)
HSL
hsl(56, 39%, 80%)
HSB
hsb(56, 18%, 88%)
CMYK
cmyk(0%, 1%, 18%, 12%)
Oklch
oklch(89.0% 0.049 103.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#FE4B8A

Rouge · LightCoral · Rose Pink

HEX
#FE4B8A
RGB
rgb(254, 75, 138)
HSL
hsl(339, 99%, 65%)
HSB
hsb(339, 70%, 100%)
CMYK
cmyk(0%, 70%, 46%, 0%)
Oklch
oklch(68.2% 0.218 3.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

08566C
6D1E08

Analogous

086D51
08566C
08256D

Triadic

08566C
6D0857
576D08

Split-Comp.

08566C
6D0825
6D5108

Tetradic

08566C
51086D
6D1E08
256D08

Contrast Matrix WCAG 2.1 Contrast

08566C
528FA6
BAE0D3
E0DDB8
FE4B8A
—
2.3
Fail
5.7
AA
5.9
AA
2.6
Fail
2.3
Fail
—
2.5
Fail
2.6
Fail
1.1
Fail
5.7
AA
2.5
Fail
—
1.0
Fail
2.2
Fail
5.9
AA
2.6
Fail
1.0
Fail
—
2.3
Fail
2.6
Fail
1.1
Fail
2.2
Fail
2.3
Fail
—
White BG
8.2AAA
3.6AA Large
1.4Fail
1.4Fail
3.2AA Large
Black BG
2.6Fail
5.8AA
14.7AAA
15.2AAA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A67
6C6DA0
CACBD6
DFDFC1
B0AF7B

Deuteranopia

251F65
69649F
C8C5D7
DFDFC3
BBC877

Tritanopia

0C6262
559C9B
BCD9D9
E0C8CA
F56F6C

Achromatopsia

414141
7F7F7F
D3D3D3
DADADA
888888

Shades & Tints Shades & Tints

#08566C

Dark
Light

#528FA6

Dark
Light

#BAE0D3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #08566c;
  --color-2: #528fa6;
  --color-3: #bae0d3;
  --color-4: #e0ddb8;
  --color-5: #fe4b8a;
}

SCSS

$color-1: #08566c;
$color-2: #528fa6;
$color-3: #bae0d3;
$color-4: #e0ddb8;
$color-5: #fe4b8a;

TAILWIND

colors: {
  'brand-1': '#08566c',
  'brand-2': '#528fa6',
  'brand-3': '#bae0d3',
  'brand-4': '#e0ddb8',
  'brand-5': '#fe4b8a',
}

RGB Array

[8, 86, 108], [82, 143, 166], [186, 224, 211], [224, 221, 184], [254, 75, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #08566C, #528FA6, #BAE0D3, #E0DDB8, #FE4B8A is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #08566c; --color-2: #528fa6; --color-3: #bae0d3; --color-4: #e0ddb8; --color-5: #fe4b8a. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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