← Back to Editor

#474C58 · #347E6C · #ACB6A4 · #F5D9BF · #D07E8E

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

#474C58

Indigo · DarkSlateGray · Prussian Blue

HEX
#474C58
RGB
rgb(71, 76, 88)
HSL
hsl(222, 11%, 31%)
HSB
hsb(222, 19%, 35%)
CMYK
cmyk(19%, 14%, 0%, 65%)
Oklch
oklch(41.7% 0.021 267.5)

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

#347E6C

Mineral Blue · SeaGreen · Mint Ice

HEX
#347E6C
RGB
rgb(52, 126, 108)
HSL
hsl(165, 42%, 35%)
HSB
hsb(165, 59%, 49%)
CMYK
cmyk(59%, 0%, 14%, 51%)
Oklch
oklch(54.1% 0.079 174.7)

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

#ACB6A4

Celadon · DarkGray · Apple Green

HEX
#ACB6A4
RGB
rgb(172, 182, 164)
HSL
hsl(93, 11%, 68%)
HSB
hsb(93, 10%, 71%)
CMYK
cmyk(5%, 0%, 10%, 29%)
Oklch
oklch(76.3% 0.028 131.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#F5D9BF

Apricot · Wheat · Peach Orange

HEX
#F5D9BF
RGB
rgb(245, 217, 191)
HSL
hsl(29, 73%, 85%)
HSB
hsb(29, 22%, 96%)
CMYK
cmyk(0%, 11%, 22%, 4%)
Oklch
oklch(90.2% 0.047 65.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D07E8E

Peach Pink · LightCoral · Coral Red

HEX
#D07E8E
RGB
rgb(208, 126, 142)
HSL
hsl(348, 47%, 65%)
HSB
hsb(348, 39%, 82%)
CMYK
cmyk(0%, 39%, 32%, 18%)
Oklch
oklch(68.5% 0.103 7.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

474C58
585346

Analogous

465458
474C58
4A4658

Triadic

474C58
58464C
4C5846

Split-Comp.

474C58
584A46
545846

Tetradic

474C58
584654
585346
46584A

Contrast Matrix WCAG 2.1 Contrast

474C58
347E6C
ACB6A4
F5D9BF
D07E8E
—
1.8
Fail
4.1
AA Large
6.4
AA
2.9
Fail
1.8
Fail
—
2.3
Fail
3.6
AA Large
1.6
Fail
4.1
AA Large
2.3
Fail
—
1.6
Fail
1.4
Fail
6.4
AA
3.6
AA Large
1.6
Fail
—
2.2
Fail
2.9
Fail
1.6
Fail
1.4
Fail
2.2
Fail
—
White BG
8.6AAA
4.8AA
2.1Fail
1.3Fail
3.0Fail
Black BG
2.4Fail
4.3AA Large
10.0AAA
15.6AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

494955
545570
B0B0A8
E9E9C5
ACAC8A

Deuteranopia

494954
504A71
B0AFA9
EBEDC7
B1B789

Tritanopia

475352
387475
ADACAD
F4CACB
CC8786

Achromatopsia

4C4C4C
666666
B1B1B1
DEDEDE
989898

Shades & Tints Shades & Tints

#474C58

Dark
Light

#347E6C

Dark
Light

#ACB6A4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #474c58;
  --color-2: #347e6c;
  --color-3: #acb6a4;
  --color-4: #f5d9bf;
  --color-5: #d07e8e;
}

SCSS

$color-1: #474c58;
$color-2: #347e6c;
$color-3: #acb6a4;
$color-4: #f5d9bf;
$color-5: #d07e8e;

TAILWIND

colors: {
  'brand-1': '#474c58',
  'brand-2': '#347e6c',
  'brand-3': '#acb6a4',
  'brand-4': '#f5d9bf',
  'brand-5': '#d07e8e',
}

RGB Array

[71, 76, 88], [52, 126, 108], [172, 182, 164], [245, 217, 191], [208, 126, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #474C58, #347E6C, #ACB6A4, #F5D9BF, #D07E8E 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: #474c58; --color-2: #347e6c; --color-3: #acb6a4; --color-4: #f5d9bf; --color-5: #d07e8e. 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