← Back to Editor

#62474E · #D54966 · #E38473 · #D9B29C · #8AAD9E

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 Library

Color Details Color Details

#62474E

Dark Violet · DimGray · Camellia

HEX
#62474E
RGB
rgb(98, 71, 78)
HSL
hsl(344, 16%, 33%)
HSB
hsb(344, 28%, 38%)
CMYK
cmyk(0%, 28%, 20%, 62%)
Oklch
oklch(42.9% 0.038 1.7)

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

#D54966

Vermilion · Tomato · Passion Red

HEX
#D54966
RGB
rgb(213, 73, 102)
HSL
hsl(348, 63%, 56%)
HSB
hsb(348, 66%, 84%)
CMYK
cmyk(0%, 66%, 52%, 16%)
Oklch
oklch(60.6% 0.176 11.7)

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

#E38473

Peach Pink · LightCoral · Coral Red

HEX
#E38473
RGB
rgb(227, 132, 115)
HSL
hsl(9, 67%, 67%)
HSB
hsb(9, 49%, 89%)
CMYK
cmyk(0%, 42%, 49%, 11%)
Oklch
oklch(71.2% 0.120 31.1)

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

#D9B29C

Apricot · Tan · Warm Sun

HEX
#D9B29C
RGB
rgb(217, 178, 156)
HSL
hsl(22, 45%, 73%)
HSB
hsb(22, 28%, 85%)
CMYK
cmyk(0%, 18%, 28%, 15%)
Oklch
oklch(79.2% 0.055 51.0)

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

#8AAD9E

Jade · DarkSeaGreen · Apple Green

HEX
#8AAD9E
RGB
rgb(138, 173, 158)
HSL
hsl(154, 18%, 61%)
HSB
hsb(154, 20%, 68%)
CMYK
cmyk(20%, 0%, 9%, 32%)
Oklch
oklch(71.7% 0.044 167.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

62474E
47625A

Analogous

62475B
62474E
624D47

Triadic

62474E
4E6247
474E62

Split-Comp.

62474E
47624D
475B62

Tetradic

62474E
5B6247
47625A
4D4762

Contrast Matrix WCAG 2.1 Contrast

62474E
D54966
E38473
D9B29C
8AAD9E
—
2.0
Fail
3.1
AA Large
4.3
AA Large
3.4
AA Large
2.0
Fail
—
1.6
Fail
2.2
Fail
1.7
Fail
3.1
AA Large
1.6
Fail
—
1.4
Fail
1.1
Fail
4.3
AA Large
2.2
Fail
1.4
Fail
—
1.3
Fail
3.4
AA Large
1.7
Fail
1.1
Fail
1.3
Fail
—
White BG
8.3AAA
4.2AA Large
2.7Fail
1.9Fail
2.5Fail
Black BG
2.5Fail
5.0AA
7.8AAA
10.8AAA
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

56564C
98975F
BAB977
C8C8A1
9999A2

Deuteranopia

585A4C
A1AB5D
BFC678
CACDA3
9795A3

Tritanopia

614B4B
CE5958
DE7A7B
D7A6A6
8CA4A5

Achromatopsia

505050
767676
9E9E9E
BBBBBB
A1A1A1

Shades & Tints Shades & Tints

#62474E

Dark
Light

#D54966

Dark
Light

#E38473

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #62474e;
  --color-2: #d54966;
  --color-3: #e38473;
  --color-4: #d9b29c;
  --color-5: #8aad9e;
}

SCSS

$color-1: #62474e;
$color-2: #d54966;
$color-3: #e38473;
$color-4: #d9b29c;
$color-5: #8aad9e;

TAILWIND

colors: {
  'brand-1': '#62474e',
  'brand-2': '#d54966',
  'brand-3': '#e38473',
  'brand-4': '#d9b29c',
  'brand-5': '#8aad9e',
}

RGB Array

[98, 71, 78], [213, 73, 102], [227, 132, 115], [217, 178, 156], [138, 173, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #62474E, #D54966, #E38473, #D9B29C, #8AAD9E is ideal for: corporate websites, product showcases, portfolios. 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: #62474e; --color-2: #d54966; --color-3: #e38473; --color-4: #d9b29c; --color-5: #8aad9e. 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. 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