← Back to Editor

#656862 · #ED6660 · #F48A39 · #E0C541 · #CDDCC8

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#656862

Ink Gray · DimGray · Charcoal

HEX
#656862
RGB
rgb(101, 104, 98)
HSL
hsl(90, 3%, 40%)
HSB
hsb(90, 6%, 41%)
CMYK
cmyk(3%, 0%, 6%, 59%)
Oklch
oklch(51.3% 0.010 128.7)

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

#ED6660

Peach Pink · Tomato · Coral Red

HEX
#ED6660
RGB
rgb(237, 102, 96)
HSL
hsl(3, 80%, 65%)
HSB
hsb(3, 59%, 93%)
CMYK
cmyk(0%, 57%, 59%, 7%)
Oklch
oklch(67.7% 0.168 25.1)

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

#F48A39

Tangerine · Coral · Warm Sun

HEX
#F48A39
RGB
rgb(244, 138, 57)
HSL
hsl(26, 89%, 59%)
HSB
hsb(26, 77%, 96%)
CMYK
cmyk(0%, 43%, 77%, 4%)
Oklch
oklch(73.5% 0.158 54.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#E0C541

Autumn Sage · GoldenRod · Sunflower

HEX
#E0C541
RGB
rgb(224, 197, 65)
HSL
hsl(50, 72%, 57%)
HSB
hsb(50, 71%, 88%)
CMYK
cmyk(0%, 12%, 71%, 12%)
Oklch
oklch(82.4% 0.148 97.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CDDCC8

Celadon · LightGray · Mint Green

HEX
#CDDCC8
RGB
rgb(205, 220, 200)
HSL
hsl(105, 22%, 82%)
HSB
hsb(105, 9%, 86%)
CMYK
cmyk(7%, 0%, 9%, 14%)
Oklch
oklch(87.8% 0.031 137.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

656862
666369

Analogous

696963
656862
636963

Triadic

656862
636669
696366

Split-Comp.

656862
636369
696369

Tetradic

656862
636969
666369
696363

Contrast Matrix WCAG 2.1 Contrast

656862
ED6660
F48A39
E0C541
CDDCC8
—
1.8
Fail
2.3
Fail
3.3
AA Large
4.0
AA Large
1.8
Fail
—
1.3
Fail
1.8
Fail
2.2
Fail
2.3
Fail
1.3
Fail
—
1.4
Fail
1.7
Fail
3.3
AA Large
1.8
Fail
1.4
Fail
—
1.2
Fail
4.0
AA Large
2.2
Fail
1.7
Fail
1.2
Fail
—
White BG
5.7AA
3.1AA Large
2.5Fail
1.7Fail
1.4Fail
Black BG
3.7AA Large
6.7AA
8.5AAA
12.2AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

666663
B3B161
C6C54D
D4D461
D3D4CD

Deuteranopia

666664
BAC462
CCD451
D6D869
D3D2CE

Tritanopia

656565
E66363
EF5C5F
DF7A80
CED1D2

Achromatopsia

666666
8E8E8E
A0A0A0
BEBEBE
D5D5D5

Shades & Tints Shades & Tints

#656862

Dark
Light

#ED6660

Dark
Light

#F48A39

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #656862;
  --color-2: #ed6660;
  --color-3: #f48a39;
  --color-4: #e0c541;
  --color-5: #cddcc8;
}

SCSS

$color-1: #656862;
$color-2: #ed6660;
$color-3: #f48a39;
$color-4: #e0c541;
$color-5: #cddcc8;

TAILWIND

colors: {
  'brand-1': '#656862',
  'brand-2': '#ed6660',
  'brand-3': '#f48a39',
  'brand-4': '#e0c541',
  'brand-5': '#cddcc8',
}

RGB Array

[101, 104, 98], [237, 102, 96], [244, 138, 57], [224, 197, 65], [205, 220, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #656862, #ED6660, #F48A39, #E0C541, #CDDCC8 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: #656862; --color-2: #ed6660; --color-3: #f48a39; --color-4: #e0c541; --color-5: #cddcc8. 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