← Back to Editor

#54589D · #229CC9 · #54C4DB · #B8DFD6 · #F0ECE4

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

#54589D

Indigo · DarkSlateBlue · Navy Blue

HEX
#54589D
RGB
rgb(84, 88, 157)
HSL
hsl(237, 30%, 47%)
HSB
hsb(237, 46%, 62%)
CMYK
cmyk(46%, 44%, 0%, 38%)
Oklch
oklch(49.0% 0.109 279.0)

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

#229CC9

Lake Blue · LightSeaGreen · Mint Ice

HEX
#229CC9
RGB
rgb(34, 156, 201)
HSL
hsl(196, 71%, 46%)
HSB
hsb(196, 83%, 79%)
CMYK
cmyk(83%, 22%, 0%, 21%)
Oklch
oklch(65.0% 0.120 229.1)

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

#54C4DB

Lake Blue · MediumTurquoise · Lake Green

HEX
#54C4DB
RGB
rgb(84, 196, 219)
HSL
hsl(190, 65%, 59%)
HSB
hsb(190, 62%, 86%)
CMYK
cmyk(62%, 11%, 0%, 14%)
Oklch
oklch(76.5% 0.106 213.4)

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

#B8DFD6

Jade · LightBlue · Glacier Blue

HEX
#B8DFD6
RGB
rgb(184, 223, 214)
HSL
hsl(166, 38%, 80%)
HSB
hsb(166, 17%, 87%)
CMYK
cmyk(17%, 0%, 4%, 13%)
Oklch
oklch(87.3% 0.043 179.7)

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

#F0ECE4

Goose Yellow · Linen · Lemon Cream

HEX
#F0ECE4
RGB
rgb(240, 236, 228)
HSL
hsl(40, 29%, 92%)
HSB
hsb(40, 5%, 94%)
CMYK
cmyk(0%, 2%, 5%, 6%)
Oklch
oklch(94.4% 0.012 84.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

54589D
9C9854

Analogous

547B9C
54589D
74549C

Triadic

54589D
9C5457
579C54

Split-Comp.

54589D
9C7454
7B9C54

Tetradic

54589D
9C547B
9C9854
549C74

Contrast Matrix WCAG 2.1 Contrast

54589D
229CC9
54C4DB
B8DFD6
F0ECE4
—
2.0
Fail
3.2
AA Large
4.5
AA Large
5.5
AA
2.0
Fail
—
1.5
Fail
2.2
Fail
2.7
Fail
3.2
AA Large
1.5
Fail
—
1.4
Fail
1.7
Fail
4.5
AA Large
2.2
Fail
1.4
Fail
—
1.2
Fail
5.5
AA
2.7
Fail
1.7
Fail
1.2
Fail
—
White BG
6.4AA
3.1AA Large
2.0Fail
1.4Fail
1.2Fail
Black BG
3.3AA Large
6.7AA
10.3AAA
14.6AAA
17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

56568C
5758BE
8486D5
C9C9D8
EEEEE6

Deuteranopia

565588
5047BC
7E76D4
C7C4D9
EFEFE6

Tritanopia

547F7C
28B6B4
5AD1D0
BADADA
F0E7E8

Achromatopsia

5F5F5F
7D7D7D
A5A5A5
D2D2D2
ECECEC

Shades & Tints Shades & Tints

#54589D

Dark
Light

#229CC9

Dark
Light

#54C4DB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #54589d;
  --color-2: #229cc9;
  --color-3: #54c4db;
  --color-4: #b8dfd6;
  --color-5: #f0ece4;
}

SCSS

$color-1: #54589d;
$color-2: #229cc9;
$color-3: #54c4db;
$color-4: #b8dfd6;
$color-5: #f0ece4;

TAILWIND

colors: {
  'brand-1': '#54589d',
  'brand-2': '#229cc9',
  'brand-3': '#54c4db',
  'brand-4': '#b8dfd6',
  'brand-5': '#f0ece4',
}

RGB Array

[84, 88, 157], [34, 156, 201], [84, 196, 219], [184, 223, 214], [240, 236, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #54589D, #229CC9, #54C4DB, #B8DFD6, #F0ECE4 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: #54589d; --color-2: #229cc9; --color-3: #54c4db; --color-4: #b8dfd6; --color-5: #f0ece4. 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