← Back to Editor

#57B0D2 · #ABB91E · #CF5198 · #D4133F · #1A1114

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

#57B0D2

Lake Blue · MediumTurquoise · Lake Green

HEX
#57B0D2
RGB
rgb(87, 176, 210)
HSL
hsl(197, 58%, 58%)
HSB
hsb(197, 59%, 82%)
CMYK
cmyk(59%, 16%, 0%, 18%)
Oklch
oklch(71.6% 0.098 225.7)

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

#ABB91E

Autumn Sage · GoldenRod · Honey Gold

HEX
#ABB91E
RGB
rgb(171, 185, 30)
HSL
hsl(65, 72%, 42%)
HSB
hsb(65, 84%, 73%)
CMYK
cmyk(8%, 0%, 84%, 27%)
Oklch
oklch(75.0% 0.163 115.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#CF5198

Rose Purple · LightCoral · Rose Pink

HEX
#CF5198
RGB
rgb(207, 81, 152)
HSL
hsl(326, 57%, 56%)
HSB
hsb(326, 61%, 81%)
CMYK
cmyk(0%, 61%, 27%, 19%)
Oklch
oklch(62.1% 0.176 348.5)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#D4133F

Vermilion · Crimson · Passion Red

HEX
#D4133F
RGB
rgb(212, 19, 63)
HSL
hsl(346, 84%, 45%)
HSB
hsb(346, 91%, 83%)
CMYK
cmyk(0%, 91%, 70%, 17%)
Oklch
oklch(55.6% 0.216 18.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#1A1114

Dark Violet · Black · Raspberry

HEX
#1A1114
RGB
rgb(26, 17, 20)
HSL
hsl(340, 21%, 8%)
HSB
hsb(340, 35%, 10%)
CMYK
cmyk(0%, 35%, 23%, 90%)
Oklch
oklch(19.1% 0.016 356.9)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57B0D2
D27956

Analogous

56D2B7
57B0D2
5671D2

Triadic

57B0D2
D256AF
AFD256

Split-Comp.

57B0D2
D25671
D2B756

Tetradic

57B0D2
B756D2
D27956
71D256

Contrast Matrix WCAG 2.1 Contrast

57B0D2
ABB91E
CF5198
D4133F
1A1114
—
1.1
Fail
1.6
Fail
2.2
Fail
7.5
AAA
1.1
Fail
—
1.8
Fail
2.4
Fail
8.5
AAA
1.6
Fail
1.8
Fail
—
1.3
Fail
4.7
AA
2.2
Fail
2.4
Fail
1.3
Fail
—
3.5
AA Large
7.5
AAA
8.5
AAA
4.7
AA
3.5
AA Large
—
White BG
2.5Fail
2.2Fail
4.0AA Large
5.3AA
18.5AAA
Black BG
8.5AAA
9.7AAA
5.3AA
4.0AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7ECA
B1B144
989787
807F34
161613

Deuteranopia

7872C8
B0AF4D
A0A983
8C9A32
171713

Tritanopia

5BC3C2
AC6168
C97976
CA2C2A
1A1313

Achromatopsia

999999
A3A3A3
7F7F7F
525252
141414

Shades & Tints Shades & Tints

#57B0D2

Dark
Light

#ABB91E

Dark
Light

#CF5198

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57b0d2;
  --color-2: #abb91e;
  --color-3: #cf5198;
  --color-4: #d4133f;
  --color-5: #1a1114;
}

SCSS

$color-1: #57b0d2;
$color-2: #abb91e;
$color-3: #cf5198;
$color-4: #d4133f;
$color-5: #1a1114;

TAILWIND

colors: {
  'brand-1': '#57b0d2',
  'brand-2': '#abb91e',
  'brand-3': '#cf5198',
  'brand-4': '#d4133f',
  'brand-5': '#1a1114',
}

RGB Array

[87, 176, 210], [171, 185, 30], [207, 81, 152], [212, 19, 63], [26, 17, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #57B0D2, #ABB91E, #CF5198, #D4133F, #1A1114 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: #57b0d2; --color-2: #abb91e; --color-3: #cf5198; --color-4: #d4133f; --color-5: #1a1114. 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