← Back to Editor

#574F59 · #837B91 · #AC99AE · #C8B8C1 · #F6F4C2

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

#574F59

Ink Gray · DimGray · Charcoal

HEX
#574F59
RGB
rgb(87, 79, 89)
HSL
hsl(288, 6%, 33%)
HSB
hsb(288, 11%, 35%)
CMYK
cmyk(2%, 11%, 0%, 65%)
Oklch
oklch(43.9% 0.019 319.5)

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

#837B91

Deep Indigo · Gray · Warm Gray

HEX
#837B91
RGB
rgb(131, 123, 145)
HSL
hsl(262, 9%, 53%)
HSB
hsb(262, 15%, 57%)
CMYK
cmyk(10%, 15%, 0%, 43%)
Oklch
oklch(59.8% 0.034 301.9)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#AC99AE

Lilac · DarkGray · Lilac Purple

HEX
#AC99AE
RGB
rgb(172, 153, 174)
HSL
hsl(294, 11%, 64%)
HSB
hsb(294, 12%, 68%)
CMYK
cmyk(1%, 12%, 0%, 32%)
Oklch
oklch(70.6% 0.037 323.0)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#C8B8C1

Mauve · Silver · Rose Pink

HEX
#C8B8C1
RGB
rgb(200, 184, 193)
HSL
hsl(326, 13%, 75%)
HSB
hsb(326, 8%, 78%)
CMYK
cmyk(0%, 8%, 4%, 22%)
Oklch
oklch(79.9% 0.022 342.7)

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

#F6F4C2

Fresh Green · Bisque · Lemon Cream

HEX
#F6F4C2
RGB
rgb(246, 244, 194)
HSL
hsl(58, 74%, 86%)
HSB
hsb(58, 21%, 96%)
CMYK
cmyk(0%, 1%, 21%, 4%)
Oklch
oklch(95.6% 0.065 105.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

574F59
51594F

Analogous

524F59
574F59
594F56

Triadic

574F59
59574F
4F5957

Split-Comp.

574F59
56594F
4F5952

Tetradic

574F59
59524F
51594F
4F5659

Contrast Matrix WCAG 2.1 Contrast

574F59
837B91
AC99AE
C8B8C1
F6F4C2
—
2.0
Fail
3.0
Fail
4.2
AA Large
7.0
AA
2.0
Fail
—
1.5
Fail
2.1
Fail
3.6
AA Large
3.0
Fail
1.5
Fail
—
1.4
Fail
2.4
Fail
4.2
AA Large
2.1
Fail
1.4
Fail
—
1.7
Fail
7.0
AA
3.6
AA Large
2.4
Fail
1.7
Fail
—
White BG
7.9AAA
4.0AA Large
2.7Fail
1.9Fail
1.1Fail
Black BG
2.7Fail
5.2AA
7.9AAA
11.1AAA
18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

545357
807F8C
A4A4A9
C1C1BF
F5F5CE

Deuteranopia

545556
80818A
A5A6A8
C2C3BE
F5F5D1

Tritanopia

575554
838787
ABA5A4
C7BDBD
F6D8DA

Achromatopsia

535353
808080
A1A1A1
BEBEBE
EFEFEF

Shades & Tints Shades & Tints

#574F59

Dark
Light

#837B91

Dark
Light

#AC99AE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #574f59;
  --color-2: #837b91;
  --color-3: #ac99ae;
  --color-4: #c8b8c1;
  --color-5: #f6f4c2;
}

SCSS

$color-1: #574f59;
$color-2: #837b91;
$color-3: #ac99ae;
$color-4: #c8b8c1;
$color-5: #f6f4c2;

TAILWIND

colors: {
  'brand-1': '#574f59',
  'brand-2': '#837b91',
  'brand-3': '#ac99ae',
  'brand-4': '#c8b8c1',
  'brand-5': '#f6f4c2',
}

RGB Array

[87, 79, 89], [131, 123, 145], [172, 153, 174], [200, 184, 193], [246, 244, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #574F59, #837B91, #AC99AE, #C8B8C1, #F6F4C2 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #574f59; --color-2: #837b91; --color-3: #ac99ae; --color-4: #c8b8c1; --color-5: #f6f4c2. 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. Restrained colors convey professionalism and trust. 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