← Back to Editor

#574444 · #806262 · #D17777 · #E0A98D · #F2E3AA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#574444

Crimson · DarkSlateGray · Wine Red

HEX
#574444
RGB
rgb(87, 68, 68)
HSL
hsl(0, 12%, 30%)
HSB
hsb(0, 22%, 34%)
CMYK
cmyk(0%, 22%, 22%, 66%)
Oklch
oklch(40.7% 0.026 18.3)

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

#806262

Crimson · DimGray · Passion Red

HEX
#806262
RGB
rgb(128, 98, 98)
HSL
hsl(0, 13%, 44%)
HSB
hsb(0, 23%, 50%)
CMYK
cmyk(0%, 23%, 23%, 50%)
Oklch
oklch(52.6% 0.039 18.5)

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

#D17777

Peach Pink · LightCoral · Coral Red

HEX
#D17777
RGB
rgb(209, 119, 119)
HSL
hsl(0, 49%, 64%)
HSB
hsb(0, 43%, 82%)
CMYK
cmyk(0%, 43%, 43%, 18%)
Oklch
oklch(66.8% 0.113 20.5)

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

#E0A98D

Apricot · BurlyWood · Warm Sun

HEX
#E0A98D
RGB
rgb(224, 169, 141)
HSL
hsl(20, 57%, 72%)
HSB
hsb(20, 37%, 88%)
CMYK
cmyk(0%, 25%, 37%, 12%)
Oklch
oklch(77.9% 0.076 48.2)

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

#F2E3AA

Goose Yellow · Wheat · Lemon Cream

HEX
#F2E3AA
RGB
rgb(242, 227, 170)
HSL
hsl(48, 73%, 81%)
HSB
hsb(48, 30%, 95%)
CMYK
cmyk(0%, 6%, 30%, 5%)
Oklch
oklch(91.4% 0.075 95.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

574444
435656

Analogous

56434D
574444
564D43

Triadic

574444
435643
434356

Split-Comp.

574444
43564D
434D56

Tetradic

574444
4D5643
435656
4D4356

Contrast Matrix WCAG 2.1 Contrast

574444
806262
D17777
E0A98D
F2E3AA
—
1.7
Fail
2.9
Fail
4.4
AA Large
7.1
AAA
1.7
Fail
—
1.7
Fail
2.7
Fail
4.3
AA Large
2.9
Fail
1.7
Fail
—
1.5
Fail
2.5
Fail
4.4
AA Large
2.7
Fail
1.5
Fail
—
1.6
Fail
7.1
AAA
4.3
AA Large
2.5
Fail
1.6
Fail
—
White BG
9.1AAA
5.5AA
3.2AA Large
2.1Fail
1.3Fail
Black BG
2.3Fail
3.8AA Large
6.6AA
10.2AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F44
737362
AAA977
C8C894
ECEBB8

Deuteranopia

505144
757762
AFB677
CBCF95
ECEDBB

Tritanopia

564444
7F6262
CC7777
DD999A
F1C3C5

Achromatopsia

4A4A4A
6B6B6B
929292
B6B6B6
E1E1E1

Shades & Tints Shades & Tints

#574444

Dark
Light

#806262

Dark
Light

#D17777

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #574444;
  --color-2: #806262;
  --color-3: #d17777;
  --color-4: #e0a98d;
  --color-5: #f2e3aa;
}

SCSS

$color-1: #574444;
$color-2: #806262;
$color-3: #d17777;
$color-4: #e0a98d;
$color-5: #f2e3aa;

TAILWIND

colors: {
  'brand-1': '#574444',
  'brand-2': '#806262',
  'brand-3': '#d17777',
  'brand-4': '#e0a98d',
  'brand-5': '#f2e3aa',
}

RGB Array

[87, 68, 68], [128, 98, 98], [209, 119, 119], [224, 169, 141], [242, 227, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #574444, #806262, #D17777, #E0A98D, #F2E3AA 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: #574444; --color-2: #806262; --color-3: #d17777; --color-4: #e0a98d; --color-5: #f2e3aa. 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