← Back to Editor

#565162 · #E3B289 · #D2A487 · #FED3AA · #F2DEB2

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#565162

Deep Indigo · DimGray · Charcoal

HEX
#565162
RGB
rgb(86, 81, 98)
HSL
hsl(258, 9%, 35%)
HSB
hsb(258, 17%, 38%)
CMYK
cmyk(12%, 17%, 0%, 62%)
Oklch
oklch(44.6% 0.028 298.7)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#E3B289

Apricot · BurlyWood · Warm Sun

HEX
#E3B289
RGB
rgb(227, 178, 137)
HSL
hsl(27, 62%, 71%)
HSB
hsb(27, 40%, 89%)
CMYK
cmyk(0%, 22%, 40%, 11%)
Oklch
oklch(79.8% 0.079 61.2)

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

#D2A487

Apricot · Tan · Warm Sun

HEX
#D2A487
RGB
rgb(210, 164, 135)
HSL
hsl(23, 45%, 68%)
HSB
hsb(23, 36%, 82%)
CMYK
cmyk(0%, 22%, 36%, 18%)
Oklch
oklch(75.4% 0.068 53.6)

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

#FED3AA

Apricot · Wheat · Peach Orange

HEX
#FED3AA
RGB
rgb(254, 211, 170)
HSL
hsl(29, 98%, 83%)
HSB
hsb(29, 33%, 100%)
CMYK
cmyk(0%, 17%, 33%, 0%)
Oklch
oklch(89.4% 0.072 65.3)

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

#F2DEB2

Goose Yellow · Wheat · Lemon Cream

HEX
#F2DEB2
RGB
rgb(242, 222, 178)
HSL
hsl(41, 71%, 82%)
HSB
hsb(41, 26%, 95%)
CMYK
cmyk(0%, 8%, 26%, 5%)
Oklch
oklch(90.6% 0.061 86.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

565162
5C6151

Analogous

515461
565162
5E5161

Triadic

565162
615651
516156

Split-Comp.

565162
615E51
546151

Tetradic

565162
615154
5C6151
51615E

Contrast Matrix WCAG 2.1 Contrast

565162
E3B289
D2A487
FED3AA
F2DEB2
—
4.0
AA Large
3.4
AA Large
5.5
AA
5.8
AA
4.0
AA Large
—
1.2
Fail
1.4
Fail
1.4
Fail
3.4
AA Large
1.2
Fail
—
1.6
Fail
1.7
Fail
5.5
AA
1.4
Fail
1.6
Fail
—
1.0
Fail
5.8
AA
1.4
Fail
1.7
Fail
1.0
Fail
—
White BG
7.6AAA
1.9Fail
2.2Fail
1.4Fail
1.3Fail
Black BG
2.7Fail
11.0AAA
9.4AAA
15.1AAA
15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

54545E
CECD93
BEBE8E
EBEBB4
E9E9BD

Deuteranopia

54555D
D1D495
C1C490
EEF1B6
EBECBF

Tritanopia

565B5A
E19B9C
D09495
FCBCBD
F1C5C7

Achromatopsia

545454
BCBCBC
AEAEAE
DBDBDB
DFDFDF

Shades & Tints Shades & Tints

#565162

Dark
Light

#E3B289

Dark
Light

#D2A487

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #565162;
  --color-2: #e3b289;
  --color-3: #d2a487;
  --color-4: #fed3aa;
  --color-5: #f2deb2;
}

SCSS

$color-1: #565162;
$color-2: #e3b289;
$color-3: #d2a487;
$color-4: #fed3aa;
$color-5: #f2deb2;

TAILWIND

colors: {
  'brand-1': '#565162',
  'brand-2': '#e3b289',
  'brand-3': '#d2a487',
  'brand-4': '#fed3aa',
  'brand-5': '#f2deb2',
}

RGB Array

[86, 81, 98], [227, 178, 137], [210, 164, 135], [254, 211, 170], [242, 222, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #565162, #E3B289, #D2A487, #FED3AA, #F2DEB2 is ideal for: health products, baby brands, fresh-style blogs, 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: #565162; --color-2: #e3b289; --color-3: #d2a487; --color-4: #fed3aa; --color-5: #f2deb2. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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