← Back to Editor

#5A515A · #1B7B6E · #DD5D87 · #EE8775 · #F6A680

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

#5A515A

Ink Gray · DimGray · Charcoal

HEX
#5A515A
RGB
rgb(90, 81, 90)
HSL
hsl(300, 5%, 34%)
HSB
hsb(300, 10%, 35%)
CMYK
cmyk(0%, 10%, 0%, 65%)
Oklch
oklch(44.7% 0.018 325.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#1B7B6E

Mineral Blue · Teal · Mint Ice

HEX
#1B7B6E
RGB
rgb(27, 123, 110)
HSL
hsl(172, 64%, 29%)
HSB
hsb(172, 78%, 48%)
CMYK
cmyk(78%, 0%, 11%, 52%)
Oklch
oklch(52.7% 0.087 181.4)

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

#DD5D87

Rouge · LightCoral · Rose Pink

HEX
#DD5D87
RGB
rgb(221, 93, 135)
HSL
hsl(340, 65%, 62%)
HSB
hsb(340, 58%, 87%)
CMYK
cmyk(0%, 58%, 39%, 13%)
Oklch
oklch(65.1% 0.164 2.3)

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

#EE8775

Peach Pink · LightCoral · Coral Red

HEX
#EE8775
RGB
rgb(238, 135, 117)
HSL
hsl(9, 78%, 70%)
HSB
hsb(9, 51%, 93%)
CMYK
cmyk(0%, 43%, 51%, 7%)
Oklch
oklch(73.1% 0.130 30.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F6A680

Apricot · LightSalmon · Warm Sun

HEX
#F6A680
RGB
rgb(246, 166, 128)
HSL
hsl(19, 87%, 73%)
HSB
hsb(19, 48%, 96%)
CMYK
cmyk(0%, 33%, 48%, 4%)
Oklch
oklch(79.5% 0.108 46.1)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A515A
525B52

Analogous

57525B
5A515A
5B5257

Triadic

5A515A
5B5B52
525B5B

Split-Comp.

5A515A
575B52
525B57

Tetradic

5A515A
5B5752
525B52
52575B

Contrast Matrix WCAG 2.1 Contrast

5A515A
1B7B6E
DD5D87
EE8775
F6A680
—
1.5
Fail
2.2
Fail
3.0
AA Large
3.9
AA Large
1.5
Fail
—
1.5
Fail
2.0
Fail
2.6
Fail
2.2
Fail
1.5
Fail
—
1.4
Fail
1.8
Fail
3.0
AA Large
2.0
Fail
1.4
Fail
—
1.3
Fail
3.9
AA Large
2.6
Fail
1.8
Fail
1.3
Fail
—
White BG
7.6AAA
5.1AA
3.5AA Large
2.5Fail
2.0Fail
Black BG
2.8Fail
4.1AA Large
6.0AA
8.4AAA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

565658
454571
A6A47D
C1C079
D3D389

Deuteranopia

575757
3F3872
ADB77A
C7CF7A
D8DE8B

Tritanopia

5A5656
207474
D77573
E97D7E
F29092

Achromatopsia

555555
5D5D5D
888888
A4A4A4
BABABA

Shades & Tints Shades & Tints

#5A515A

Dark
Light

#1B7B6E

Dark
Light

#DD5D87

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a515a;
  --color-2: #1b7b6e;
  --color-3: #dd5d87;
  --color-4: #ee8775;
  --color-5: #f6a680;
}

SCSS

$color-1: #5a515a;
$color-2: #1b7b6e;
$color-3: #dd5d87;
$color-4: #ee8775;
$color-5: #f6a680;

TAILWIND

colors: {
  'brand-1': '#5a515a',
  'brand-2': '#1b7b6e',
  'brand-3': '#dd5d87',
  'brand-4': '#ee8775',
  'brand-5': '#f6a680',
}

RGB Array

[90, 81, 90], [27, 123, 110], [221, 93, 135], [238, 135, 117], [246, 166, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A515A, #1B7B6E, #DD5D87, #EE8775, #F6A680 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: #5a515a; --color-2: #1b7b6e; --color-3: #dd5d87; --color-4: #ee8775; --color-5: #f6a680. 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