← Back to Editor

#515151 · #A4C2B6 · #E3D9CF · #F5E7B6 · #DF9C58

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

#515151

Ink Gray · DarkSlateGray · Charcoal

HEX
#515151
RGB
rgb(81, 81, 81)
HSL
hsl(0, 0%, 32%)
HSB
hsb(0, 0%, 32%)
CMYK
cmyk(0%, 0%, 0%, 68%)
Oklch
oklch(43.5% 0.000 89.9)

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

#A4C2B6

Jade · DarkGray · Apple Green

HEX
#A4C2B6
RGB
rgb(164, 194, 182)
HSL
hsl(156, 20%, 70%)
HSB
hsb(156, 15%, 76%)
CMYK
cmyk(15%, 0%, 6%, 24%)
Oklch
oklch(78.8% 0.037 169.2)

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

#E3D9CF

Goose Yellow · LightGray · Peach Orange

HEX
#E3D9CF
RGB
rgb(227, 217, 207)
HSL
hsl(30, 26%, 85%)
HSB
hsb(30, 9%, 89%)
CMYK
cmyk(0%, 4%, 9%, 11%)
Oklch
oklch(89.1% 0.017 67.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F5E7B6

Goose Yellow · Wheat · Lemon Cream

HEX
#F5E7B6
RGB
rgb(245, 231, 182)
HSL
hsl(47, 76%, 84%)
HSB
hsb(47, 26%, 96%)
CMYK
cmyk(0%, 6%, 26%, 4%)
Oklch
oklch(92.7% 0.065 94.0)

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

#DF9C58

Ginger · SandyBrown · Warm Sun

HEX
#DF9C58
RGB
rgb(223, 156, 88)
HSL
hsl(30, 68%, 61%)
HSB
hsb(30, 61%, 87%)
CMYK
cmyk(0%, 30%, 61%, 13%)
Oklch
oklch(74.5% 0.117 64.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

515151
525252

Analogous

525252
515151
525252

Triadic

515151
525252
525252

Split-Comp.

515151
525252
525252

Tetradic

515151
525252
525252
525252

Contrast Matrix WCAG 2.1 Contrast

515151
A4C2B6
E3D9CF
F5E7B6
DF9C58
—
4.1
AA Large
5.7
AA
6.4
AA
3.4
AA Large
4.1
AA Large
—
1.4
Fail
1.5
Fail
1.2
Fail
5.7
AA
1.4
Fail
—
1.1
Fail
1.7
Fail
6.4
AA
1.5
Fail
1.1
Fail
—
1.9
Fail
3.4
AA Large
1.2
Fail
1.7
Fail
1.9
Fail
—
White BG
7.9AAA
1.9Fail
1.4Fail
1.2Fail
2.3Fail
Black BG
2.6Fail
11.0AAA
15.1AAA
17.0AAA
9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

515151
B1B1B9
DFDFD1
EFEFC2
C2C168

Deuteranopia

515151
AFADBA
DFE0D2
F0F1C5
C6CB6C

Tritanopia

515151
A5BBBC
E2D3D4
F4CBCD
DC7578

Achromatopsia

515151
B8B8B8
DBDBDB
E6E6E6
A8A8A8

Shades & Tints Shades & Tints

#515151

Dark
Light

#A4C2B6

Dark
Light

#E3D9CF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #515151;
  --color-2: #a4c2b6;
  --color-3: #e3d9cf;
  --color-4: #f5e7b6;
  --color-5: #df9c58;
}

SCSS

$color-1: #515151;
$color-2: #a4c2b6;
$color-3: #e3d9cf;
$color-4: #f5e7b6;
$color-5: #df9c58;

TAILWIND

colors: {
  'brand-1': '#515151',
  'brand-2': '#a4c2b6',
  'brand-3': '#e3d9cf',
  'brand-4': '#f5e7b6',
  'brand-5': '#df9c58',
}

RGB Array

[81, 81, 81], [164, 194, 182], [227, 217, 207], [245, 231, 182], [223, 156, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #515151, #A4C2B6, #E3D9CF, #F5E7B6, #DF9C58 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: #515151; --color-2: #a4c2b6; --color-3: #e3d9cf; --color-4: #f5e7b6; --color-5: #df9c58. 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