← Back to Editor

#474D6E · #A35272 · #D17C77 · #F0CA9E · #91B897

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

#474D6E

Indigo · DarkSlateBlue · Prussian Blue

HEX
#474D6E
RGB
rgb(71, 77, 110)
HSL
hsl(231, 22%, 35%)
HSB
hsb(231, 35%, 43%)
CMYK
cmyk(35%, 30%, 0%, 57%)
Oklch
oklch(42.9% 0.055 275.9)

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

#A35272

Dark Violet · Gray · Camellia

HEX
#A35272
RGB
rgb(163, 82, 114)
HSL
hsl(336, 33%, 48%)
HSB
hsb(336, 50%, 64%)
CMYK
cmyk(0%, 50%, 30%, 36%)
Oklch
oklch(54.6% 0.113 356.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#D17C77

Peach Pink · LightCoral · Coral Red

HEX
#D17C77
RGB
rgb(209, 124, 119)
HSL
hsl(3, 49%, 64%)
HSB
hsb(3, 43%, 82%)
CMYK
cmyk(0%, 41%, 43%, 18%)
Oklch
oklch(67.7% 0.107 23.9)

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

#F0CA9E

Goose Yellow · Wheat · Peach Orange

HEX
#F0CA9E
RGB
rgb(240, 202, 158)
HSL
hsl(32, 73%, 78%)
HSB
hsb(32, 34%, 94%)
CMYK
cmyk(0%, 16%, 34%, 6%)
Oklch
oklch(86.1% 0.072 70.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#91B897

Celadon · DarkSeaGreen · Apple Green

HEX
#91B897
RGB
rgb(145, 184, 151)
HSL
hsl(129, 22%, 65%)
HSB
hsb(129, 21%, 72%)
CMYK
cmyk(21%, 0%, 18%, 28%)
Oklch
oklch(74.5% 0.063 149.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

474D6E
6D6746

Analogous

465F6D
474D6E
53466D

Triadic

474D6E
6D464C
4C6D46

Split-Comp.

474D6E
6D5346
5F6D46

Tetradic

474D6E
6D465F
6D6746
466D53

Contrast Matrix WCAG 2.1 Contrast

474D6E
A35272
D17C77
F0CA9E
91B897
—
1.6
Fail
2.7
Fail
5.3
AA
3.7
AA Large
1.6
Fail
—
1.7
Fail
3.4
AA Large
2.4
Fail
2.7
Fail
1.7
Fail
—
2.0
Fail
1.4
Fail
5.3
AA
3.4
AA Large
2.0
Fail
—
1.4
Fail
3.7
AA Large
2.4
Fail
1.4
Fail
1.4
Fail
—
White BG
8.2AAA
5.2AA
3.1AA Large
1.5Fail
2.2Fail
Black BG
2.6Fail
4.0AA Large
6.9AA
13.6AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A66
807F6A
ACAB78
E0DFA9
A2A29F

Deuteranopia

494964
858B68
B1B779
E2E5AB
A09DA1

Tritanopia

47605E
9F6463
CD7979
EEB1B3
93A5A7

Achromatopsia

4F4F4F
6E6E6E
959595
D0D0D0
A9A9A9

Shades & Tints Shades & Tints

#474D6E

Dark
Light

#A35272

Dark
Light

#D17C77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #474d6e;
  --color-2: #a35272;
  --color-3: #d17c77;
  --color-4: #f0ca9e;
  --color-5: #91b897;
}

SCSS

$color-1: #474d6e;
$color-2: #a35272;
$color-3: #d17c77;
$color-4: #f0ca9e;
$color-5: #91b897;

TAILWIND

colors: {
  'brand-1': '#474d6e',
  'brand-2': '#a35272',
  'brand-3': '#d17c77',
  'brand-4': '#f0ca9e',
  'brand-5': '#91b897',
}

RGB Array

[71, 77, 110], [163, 82, 114], [209, 124, 119], [240, 202, 158], [145, 184, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #474D6E, #A35272, #D17C77, #F0CA9E, #91B897 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: #474d6e; --color-2: #a35272; --color-3: #d17c77; --color-4: #f0ca9e; --color-5: #91b897. 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