← Back to Editor

#645E6A · #B4B0A2 · #FDCEA3 · #F8A37C · #E07D5D

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

#645E6A

Ink Gray · DimGray · Charcoal

HEX
#645E6A
RGB
rgb(100, 94, 106)
HSL
hsl(270, 6%, 39%)
HSB
hsb(270, 11%, 42%)
CMYK
cmyk(6%, 11%, 0%, 58%)
Oklch
oklch(49.2% 0.020 308.0)

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

#B4B0A2

Ginger · DarkGray · Sunflower

HEX
#B4B0A2
RGB
rgb(180, 176, 162)
HSL
hsl(47, 11%, 67%)
HSB
hsb(47, 10%, 71%)
CMYK
cmyk(0%, 2%, 10%, 29%)
Oklch
oklch(75.7% 0.020 93.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FDCEA3

Apricot · Wheat · Peach Orange

HEX
#FDCEA3
RGB
rgb(253, 206, 163)
HSL
hsl(29, 96%, 82%)
HSB
hsb(29, 36%, 99%)
CMYK
cmyk(0%, 19%, 36%, 1%)
Oklch
oklch(88.2% 0.077 64.0)

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

#F8A37C

Apricot · LightSalmon · Warm Sun

HEX
#F8A37C
RGB
rgb(248, 163, 124)
HSL
hsl(19, 90%, 73%)
HSB
hsb(19, 50%, 97%)
CMYK
cmyk(0%, 34%, 50%, 3%)
Oklch
oklch(79.1% 0.114 45.3)

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

#E07D5D

Apricot · Salmon · Warm Sun

HEX
#E07D5D
RGB
rgb(224, 125, 93)
HSL
hsl(15, 68%, 62%)
HSB
hsb(15, 58%, 88%)
CMYK
cmyk(0%, 44%, 58%, 12%)
Oklch
oklch(69.2% 0.131 38.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

645E6A
63695D

Analogous

5D5D69
645E6A
695D69

Triadic

645E6A
69635D
5D6963

Split-Comp.

645E6A
69695D
5D695D

Tetradic

645E6A
695D5D
63695D
5D6969

Contrast Matrix WCAG 2.1 Contrast

645E6A
B4B0A2
FDCEA3
F8A37C
E07D5D
—
2.9
Fail
4.3
AA Large
3.1
AA Large
2.2
Fail
2.9
Fail
—
1.5
Fail
1.1
Fail
1.3
Fail
4.3
AA Large
1.5
Fail
—
1.4
Fail
2.0
Fail
3.1
AA Large
1.1
Fail
1.4
Fail
—
1.4
Fail
2.2
Fail
1.3
Fail
2.0
Fail
1.4
Fail
—
White BG
6.3AA
2.2Fail
1.4Fail
2.0Fail
2.9Fail
Black BG
3.4AA Large
9.7AAA
14.5AAA
10.5AAA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

616167
B2B2A5
E9E8AD
D3D285
B5B465

Deuteranopia

626266
B3B3A6
EBEFB0
D8DF88
BBC267

Tritanopia

646564
B4A8A9
FBB6B7
F48D8F
DB6B6C

Achromatopsia

616161
B0B0B0
D7D7D7
B8B8B8
979797

Shades & Tints Shades & Tints

#645E6A

Dark
Light

#B4B0A2

Dark
Light

#FDCEA3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #645e6a;
  --color-2: #b4b0a2;
  --color-3: #fdcea3;
  --color-4: #f8a37c;
  --color-5: #e07d5d;
}

SCSS

$color-1: #645e6a;
$color-2: #b4b0a2;
$color-3: #fdcea3;
$color-4: #f8a37c;
$color-5: #e07d5d;

TAILWIND

colors: {
  'brand-1': '#645e6a',
  'brand-2': '#b4b0a2',
  'brand-3': '#fdcea3',
  'brand-4': '#f8a37c',
  'brand-5': '#e07d5d',
}

RGB Array

[100, 94, 106], [180, 176, 162], [253, 206, 163], [248, 163, 124], [224, 125, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #645E6A, #B4B0A2, #FDCEA3, #F8A37C, #E07D5D 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: #645e6a; --color-2: #b4b0a2; --color-3: #fdcea3; --color-4: #f8a37c; --color-5: #e07d5d. 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