← Back to Editor

#203057 · #587775 · #86C598 · #B2E1AA · #B0F3FE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#203057

Indigo · MidnightBlue · Prussian Blue

HEX
#203057
RGB
rgb(32, 48, 87)
HSL
hsl(223, 46%, 23%)
HSB
hsb(223, 63%, 34%)
CMYK
cmyk(63%, 45%, 0%, 66%)
Oklch
oklch(31.7% 0.073 265.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#587775

Mineral Blue · DimGray · Mint Ice

HEX
#587775
RGB
rgb(88, 119, 117)
HSL
hsl(176, 15%, 41%)
HSB
hsb(176, 26%, 47%)
CMYK
cmyk(26%, 0%, 2%, 53%)
Oklch
oklch(54.5% 0.036 191.2)

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

#86C598

Celadon · DarkSeaGreen · Apple Green

HEX
#86C598
RGB
rgb(134, 197, 152)
HSL
hsl(137, 35%, 65%)
HSB
hsb(137, 32%, 77%)
CMYK
cmyk(32%, 0%, 23%, 23%)
Oklch
oklch(76.8% 0.091 152.8)

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

#B2E1AA

Celadon · Silver · Apple Green

HEX
#B2E1AA
RGB
rgb(178, 225, 170)
HSL
hsl(111, 48%, 77%)
HSB
hsb(111, 24%, 88%)
CMYK
cmyk(21%, 0%, 24%, 12%)
Oklch
oklch(86.3% 0.089 141.0)

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

#B0F3FE

Sky Blue · LightBlue · Glacier Blue

HEX
#B0F3FE
RGB
rgb(176, 243, 254)
HSL
hsl(188, 98%, 84%)
HSB
hsb(188, 31%, 100%)
CMYK
cmyk(31%, 4%, 0%, 0%)
Oklch
oklch(92.3% 0.068 208.7)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

203057
564620

Analogous

204A56
203057
2B2056

Triadic

203057
56202F
2F5620

Split-Comp.

203057
562B20
4A5620

Tetradic

203057
56204A
564620
20562B

Contrast Matrix WCAG 2.1 Contrast

203057
587775
86C598
B2E1AA
B0F3FE
—
2.7
Fail
6.4
AA
8.8
AAA
10.5
AAA
2.7
Fail
—
2.4
Fail
3.3
AA Large
4.0
AA Large
6.4
AA
2.4
Fail
—
1.4
Fail
1.6
Fail
8.8
AAA
3.3
AA Large
1.4
Fail
—
1.2
Fail
10.5
AAA
4.0
AA Large
1.6
Fail
1.2
Fail
—
White BG
12.9AAA
4.9AA
2.0Fail
1.5Fail
1.2Fail
Black BG
1.6Fail
4.3AA Large
10.5AAA
14.2AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

27274E
656675
A1A2A3
C6C7B7
CDCEFB

Deuteranopia

26254B
646176
9E99A6
C4C0BB
C9C4FB

Tritanopia

214644
5A7676
89ABAD
B4C2C4
B3F9F9

Achromatopsia

303030
6E6E6E
ADADAD
CDCDCD
E0E0E0

Shades & Tints Shades & Tints

#203057

Dark
Light

#587775

Dark
Light

#86C598

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #203057;
  --color-2: #587775;
  --color-3: #86c598;
  --color-4: #b2e1aa;
  --color-5: #b0f3fe;
}

SCSS

$color-1: #203057;
$color-2: #587775;
$color-3: #86c598;
$color-4: #b2e1aa;
$color-5: #b0f3fe;

TAILWIND

colors: {
  'brand-1': '#203057',
  'brand-2': '#587775',
  'brand-3': '#86c598',
  'brand-4': '#b2e1aa',
  'brand-5': '#b0f3fe',
}

RGB Array

[32, 48, 87], [88, 119, 117], [134, 197, 152], [178, 225, 170], [176, 243, 254]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #203057, #587775, #86C598, #B2E1AA, #B0F3FE 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: #203057; --color-2: #587775; --color-3: #86c598; --color-4: #b2e1aa; --color-5: #b0f3fe. 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