← Back to Editor

#DDD3B8 · #651410 · #737975 · #584D47 · #2D2317

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

#DDD3B8

Goose Yellow · Wheat · Lemon Cream

HEX
#DDD3B8
RGB
rgb(221, 211, 184)
HSL
hsl(44, 35%, 79%)
HSB
hsb(44, 17%, 87%)
CMYK
cmyk(0%, 5%, 17%, 13%)
Oklch
oklch(86.8% 0.038 90.1)

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

#651410

Vermilion · Maroon · Wine Red

HEX
#651410
RGB
rgb(101, 20, 16)
HSL
hsl(3, 73%, 23%)
HSB
hsb(3, 84%, 40%)
CMYK
cmyk(0%, 80%, 84%, 60%)
Oklch
oklch(33.5% 0.115 28.1)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#737975

Ink Gray · Gray · Warm Gray

HEX
#737975
RGB
rgb(115, 121, 117)
HSL
hsl(140, 3%, 46%)
HSB
hsb(140, 5%, 47%)
CMYK
cmyk(5%, 0%, 3%, 53%)
Oklch
oklch(57.0% 0.009 156.9)

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

#584D47

Tangerine · DarkOliveGreen · Amber Brown

HEX
#584D47
RGB
rgb(88, 77, 71)
HSL
hsl(21, 11%, 31%)
HSB
hsb(21, 19%, 35%)
CMYK
cmyk(0%, 12%, 19%, 65%)
Oklch
oklch(42.9% 0.018 50.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#2D2317

Ochre · Black · Cinnamon

HEX
#2D2317
RGB
rgb(45, 35, 23)
HSL
hsl(33, 32%, 13%)
HSB
hsb(33, 49%, 18%)
CMYK
cmyk(0%, 22%, 49%, 82%)
Oklch
oklch(26.4% 0.026 71.4)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDD3B8
B7C1DC

Analogous

DCBFB7
DDD3B8
D3DCB7

Triadic

DDD3B8
B7DCD2
D2B7DC

Split-Comp.

DDD3B8
B7D3DC
BFB7DC

Tetradic

DDD3B8
B7DCBF
B7C1DC
DCB7D3

Contrast Matrix WCAG 2.1 Contrast

DDD3B8
651410
737975
584D47
2D2317
—
8.5
AAA
3.0
Fail
5.5
AA
10.3
AAA
8.5
AAA
—
2.8
Fail
1.5
Fail
1.2
Fail
3.0
Fail
2.8
Fail
—
1.8
Fail
3.5
AA Large
5.5
AA
1.5
Fail
1.8
Fail
—
1.9
Fail
10.3
AAA
1.2
Fail
3.5
AA Large
1.9
Fail
—
White BG
1.5Fail
12.6AAA
4.4AA Large
8.2AAA
15.4AAA
Black BG
14.1AAA
1.7Fail
4.7AA
2.6Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9BF
424111
767676
535348
29291A

Deuteranopia

D9DAC0
474D11
757576
545549
292A1B

Tritanopia

DDC4C5
611212
737777
574A4A
2D1C1D

Achromatopsia

D3D3D3
2C2C2C
777777
505050
252525

Shades & Tints Shades & Tints

#DDD3B8

Dark
Light

#651410

Dark
Light

#737975

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ddd3b8;
  --color-2: #651410;
  --color-3: #737975;
  --color-4: #584d47;
  --color-5: #2d2317;
}

SCSS

$color-1: #ddd3b8;
$color-2: #651410;
$color-3: #737975;
$color-4: #584d47;
$color-5: #2d2317;

TAILWIND

colors: {
  'brand-1': '#ddd3b8',
  'brand-2': '#651410',
  'brand-3': '#737975',
  'brand-4': '#584d47',
  'brand-5': '#2d2317',
}

RGB Array

[221, 211, 184], [101, 20, 16], [115, 121, 117], [88, 77, 71], [45, 35, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDD3B8, #651410, #737975, #584D47, #2D2317 is ideal for: tech websites, dark mode UIs, game UIs, 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: #ddd3b8; --color-2: #651410; --color-3: #737975; --color-4: #584d47; --color-5: #2d2317. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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