← Back to Editor

#5B6179 · #98C2DA · #F5F4BB · #EA7D45 · #7A2230

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

#5B6179

Indigo · DimGray · Navy Blue

HEX
#5B6179
RGB
rgb(91, 97, 121)
HSL
hsl(228, 14%, 42%)
HSB
hsb(228, 25%, 47%)
CMYK
cmyk(25%, 20%, 0%, 53%)
Oklch
oklch(49.7% 0.039 273.9)

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

#98C2DA

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#98C2DA
RGB
rgb(152, 194, 218)
HSL
hsl(202, 47%, 73%)
HSB
hsb(202, 30%, 85%)
CMYK
cmyk(30%, 11%, 0%, 15%)
Oklch
oklch(79.2% 0.056 233.5)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#F5F4BB

Fresh Green · Bisque · Lemon Cream

HEX
#F5F4BB
RGB
rgb(245, 244, 187)
HSL
hsl(59, 74%, 85%)
HSB
hsb(59, 24%, 96%)
CMYK
cmyk(0%, 0%, 24%, 4%)
Oklch
oklch(95.4% 0.073 106.9)

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

#EA7D45

Tangerine · Coral · Warm Sun

HEX
#EA7D45
RGB
rgb(234, 125, 69)
HSL
hsl(20, 80%, 59%)
HSB
hsb(20, 71%, 92%)
CMYK
cmyk(0%, 47%, 71%, 8%)
Oklch
oklch(70.2% 0.152 46.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#7A2230

Crimson · Brown · Wine Red

HEX
#7A2230
RGB
rgb(122, 34, 48)
HSL
hsl(350, 56%, 31%)
HSB
hsb(350, 72%, 48%)
CMYK
cmyk(0%, 72%, 61%, 52%)
Oklch
oklch(39.5% 0.121 15.6)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B6179
7A745C

Analogous

5C717A
5B6179
655C7A

Triadic

5B6179
7A5C62
627A5C

Split-Comp.

5B6179
7A655C
717A5C

Tetradic

5B6179
7A5C71
7A745C
5C7A65

Contrast Matrix WCAG 2.1 Contrast

5B6179
98C2DA
F5F4BB
EA7D45
7A2230
—
3.2
AA Large
5.4
AA
2.2
Fail
1.6
Fail
3.2
AA Large
—
1.7
Fail
1.5
Fail
5.3
AA
5.4
AA
1.7
Fail
—
2.5
Fail
8.8
AAA
2.2
Fail
1.5
Fail
2.5
Fail
—
3.6
AA Large
1.6
Fail
5.3
AA
8.8
AAA
3.6
AA Large
—
White BG
6.1AA
1.9Fail
1.1Fail
2.8Fail
10.0AAA
Black BG
3.4AA Large
11.1AAA
18.5AAA
7.5AAA
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E73
AAABD4
F5F5C9
BBBA53
54532D

Deuteranopia

5D5D72
A8A5D3
F5F5CC
C1C956
59602C

Tritanopia

5B6F6E
9AD0CF
F5D4D6
E55D60
762A29

Achromatopsia

626262
B8B8B8
EEEEEE
979797
3E3E3E

Shades & Tints Shades & Tints

#5B6179

Dark
Light

#98C2DA

Dark
Light

#F5F4BB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b6179;
  --color-2: #98c2da;
  --color-3: #f5f4bb;
  --color-4: #ea7d45;
  --color-5: #7a2230;
}

SCSS

$color-1: #5b6179;
$color-2: #98c2da;
$color-3: #f5f4bb;
$color-4: #ea7d45;
$color-5: #7a2230;

TAILWIND

colors: {
  'brand-1': '#5b6179',
  'brand-2': '#98c2da',
  'brand-3': '#f5f4bb',
  'brand-4': '#ea7d45',
  'brand-5': '#7a2230',
}

RGB Array

[91, 97, 121], [152, 194, 218], [245, 244, 187], [234, 125, 69], [122, 34, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B6179, #98C2DA, #F5F4BB, #EA7D45, #7A2230 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: #5b6179; --color-2: #98c2da; --color-3: #f5f4bb; --color-4: #ea7d45; --color-5: #7a2230. 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