← Back to Editor

#4D6A63 · #D65A77 · #F58E56 · #E6AD90 · #C8D9C9

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

#4D6A63

Mineral Blue · DimGray · Mint Ice

HEX
#4D6A63
RGB
rgb(77, 106, 99)
HSL
hsl(166, 16%, 36%)
HSB
hsb(166, 27%, 42%)
CMYK
cmyk(27%, 0%, 7%, 58%)
Oklch
oklch(49.9% 0.036 178.2)

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

#D65A77

Crimson · LightCoral · Passion Red

HEX
#D65A77
RGB
rgb(214, 90, 119)
HSL
hsl(346, 60%, 60%)
HSB
hsb(346, 58%, 84%)
CMYK
cmyk(0%, 58%, 44%, 16%)
Oklch
oklch(63.2% 0.158 8.3)

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

#F58E56

Apricot · Coral · Warm Sun

HEX
#F58E56
RGB
rgb(245, 142, 86)
HSL
hsl(21, 89%, 65%)
HSB
hsb(21, 65%, 96%)
CMYK
cmyk(0%, 42%, 65%, 4%)
Oklch
oklch(74.6% 0.144 48.0)

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

#E6AD90

Apricot · BurlyWood · Warm Sun

HEX
#E6AD90
RGB
rgb(230, 173, 144)
HSL
hsl(20, 63%, 73%)
HSB
hsb(20, 37%, 90%)
CMYK
cmyk(0%, 25%, 37%, 10%)
Oklch
oklch(79.3% 0.078 48.1)

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

#C8D9C9

Celadon · LightGray · Mint Green

HEX
#C8D9C9
RGB
rgb(200, 217, 201)
HSL
hsl(124, 18%, 82%)
HSB
hsb(124, 8%, 85%)
CMYK
cmyk(8%, 0%, 7%, 15%)
Oklch
oklch(86.8% 0.028 147.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D6A63
6A4D54

Analogous

4D6A55
4D6A63
4D636A

Triadic

4D6A63
644D6A
6A644D

Split-Comp.

4D6A63
6A4D63
6A554D

Tetradic

4D6A63
554D6A
6A4D54
636A4D

Contrast Matrix WCAG 2.1 Contrast

4D6A63
D65A77
F58E56
E6AD90
C8D9C9
—
1.6
Fail
2.5
Fail
3.0
AA Large
4.0
AA Large
1.6
Fail
—
1.6
Fail
1.9
Fail
2.5
Fail
2.5
Fail
1.6
Fail
—
1.2
Fail
1.6
Fail
3.0
AA Large
1.9
Fail
1.2
Fail
—
1.3
Fail
4.0
AA Large
2.5
Fail
1.6
Fail
1.3
Fail
—
White BG
5.9AA
3.8AA Large
2.4Fail
2.0Fail
1.5Fail
Black BG
3.6AA Large
5.6AA
8.9AAA
10.7AAA
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A65
A09F70
C8C764
CDCD97
CFD0CD

Deuteranopia

585665
A8B16E
CED667
D1D599
CECDCE

Tritanopia

4E6666
D06A69
F06E71
E39D9E
C9D0D1

Achromatopsia

616161
828282
A6A6A6
BBBBBB
D2D2D2

Shades & Tints Shades & Tints

#4D6A63

Dark
Light

#D65A77

Dark
Light

#F58E56

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d6a63;
  --color-2: #d65a77;
  --color-3: #f58e56;
  --color-4: #e6ad90;
  --color-5: #c8d9c9;
}

SCSS

$color-1: #4d6a63;
$color-2: #d65a77;
$color-3: #f58e56;
$color-4: #e6ad90;
$color-5: #c8d9c9;

TAILWIND

colors: {
  'brand-1': '#4d6a63',
  'brand-2': '#d65a77',
  'brand-3': '#f58e56',
  'brand-4': '#e6ad90',
  'brand-5': '#c8d9c9',
}

RGB Array

[77, 106, 99], [214, 90, 119], [245, 142, 86], [230, 173, 144], [200, 217, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D6A63, #D65A77, #F58E56, #E6AD90, #C8D9C9 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: #4d6a63; --color-2: #d65a77; --color-3: #f58e56; --color-4: #e6ad90; --color-5: #c8d9c9. 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