← Back to Editor

#DFBF99 · #818382 · #615E71 · #492D53 · #471B36

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

#DFBF99

Goose Yellow · BurlyWood · Warm Sun

HEX
#DFBF99
RGB
rgb(223, 191, 153)
HSL
hsl(33, 52%, 74%)
HSB
hsb(33, 31%, 87%)
CMYK
cmyk(0%, 14%, 31%, 13%)
Oklch
oklch(82.3% 0.062 71.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#818382

Ash · Gray · Warm Gray

HEX
#818382
RGB
rgb(129, 131, 130)
HSL
hsl(150, 1%, 51%)
HSB
hsb(150, 2%, 51%)
CMYK
cmyk(2%, 0%, 1%, 49%)
Oklch
oklch(60.8% 0.003 165.0)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#615E71

Deep Indigo · DimGray · Warm Gray

HEX
#615E71
RGB
rgb(97, 94, 113)
HSL
hsl(249, 9%, 41%)
HSB
hsb(249, 17%, 44%)
CMYK
cmyk(14%, 17%, 0%, 56%)
Oklch
oklch(49.2% 0.030 292.5)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#492D53

Dark Plum · DarkSlateGray · Eggplant

HEX
#492D53
RGB
rgb(73, 45, 83)
HSL
hsl(284, 30%, 25%)
HSB
hsb(284, 46%, 33%)
CMYK
cmyk(12%, 46%, 0%, 67%)
Oklch
oklch(34.8% 0.073 316.8)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#471B36

Rose Purple · DarkSlateGray · Raspberry

HEX
#471B36
RGB
rgb(71, 27, 54)
HSL
hsl(323, 45%, 19%)
HSB
hsb(323, 62%, 28%)
CMYK
cmyk(0%, 62%, 24%, 72%)
Oklch
oklch(29.8% 0.077 345.0)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFBF99
9AB9DF

Analogous

DF9E9A
DFBF99
DCDF9A

Triadic

DFBF99
9ADFC0
C09ADF

Split-Comp.

DFBF99
9ADCDF
9E9ADF

Tetradic

DFBF99
9ADF9E
9AB9DF
DF9ADC

Contrast Matrix WCAG 2.1 Contrast

DFBF99
818382
615E71
492D53
471B36
—
2.2
Fail
3.6
AA Large
6.8
AA
8.2
AAA
2.2
Fail
—
1.6
Fail
3.1
AA Large
3.7
AA Large
3.6
AA Large
1.6
Fail
—
1.9
Fail
2.3
Fail
6.8
AA
3.1
AA Large
1.9
Fail
—
1.2
Fail
8.2
AAA
3.7
AA Large
2.3
Fail
1.2
Fail
—
White BG
1.7Fail
3.8AA Large
6.3AA
11.8AAA
14.2AAA
Black BG
12.0AAA
5.5AA
3.3AA Large
1.8Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1A2
828282
60606C
3D3D4A
34342F

Deuteranopia

D3D5A4
828282
60606B
3F4148
373A2E

Tritanopia

DDA9AB
818282
616968
484341
452A29

Achromatopsia

C4C4C4
828282
616161
3A3A3A
2B2B2B

Shades & Tints Shades & Tints

#DFBF99

Dark
Light

#818382

Dark
Light

#615E71

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfbf99;
  --color-2: #818382;
  --color-3: #615e71;
  --color-4: #492d53;
  --color-5: #471b36;
}

SCSS

$color-1: #dfbf99;
$color-2: #818382;
$color-3: #615e71;
$color-4: #492d53;
$color-5: #471b36;

TAILWIND

colors: {
  'brand-1': '#dfbf99',
  'brand-2': '#818382',
  'brand-3': '#615e71',
  'brand-4': '#492d53',
  'brand-5': '#471b36',
}

RGB Array

[223, 191, 153], [129, 131, 130], [97, 94, 113], [73, 45, 83], [71, 27, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFBF99, #818382, #615E71, #492D53, #471B36 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dfbf99; --color-2: #818382; --color-3: #615e71; --color-4: #492d53; --color-5: #471b36. 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. Restrained colors convey professionalism and trust. 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