← Back to Editor

#DDC585 · #C1B078 · #97946B · #A07A56 · #222B2A

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

#DDC585

Ginger · BurlyWood · Sunflower

HEX
#DDC585
RGB
rgb(221, 197, 133)
HSL
hsl(44, 56%, 69%)
HSB
hsb(44, 40%, 87%)
CMYK
cmyk(0%, 11%, 40%, 13%)
Oklch
oklch(82.9% 0.087 89.8)

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

#C1B078

Ginger · Tan · Sunflower

HEX
#C1B078
RGB
rgb(193, 176, 120)
HSL
hsl(46, 37%, 61%)
HSB
hsb(46, 38%, 76%)
CMYK
cmyk(0%, 9%, 38%, 24%)
Oklch
oklch(75.8% 0.077 93.2)

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

#97946B

Autumn Sage · Gray · Sunflower

HEX
#97946B
RGB
rgb(151, 148, 107)
HSL
hsl(56, 17%, 51%)
HSB
hsb(56, 29%, 59%)
CMYK
cmyk(0%, 2%, 29%, 41%)
Oklch
oklch(65.9% 0.057 104.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#A07A56

Tangerine · Gray · Amber Brown

HEX
#A07A56
RGB
rgb(160, 122, 86)
HSL
hsl(29, 30%, 48%)
HSB
hsb(29, 46%, 63%)
CMYK
cmyk(0%, 24%, 46%, 37%)
Oklch
oklch(60.8% 0.069 64.4)

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

#222B2A

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#222B2A
RGB
rgb(34, 43, 42)
HSL
hsl(173, 12%, 15%)
HSB
hsb(173, 21%, 17%)
CMYK
cmyk(21%, 0%, 2%, 83%)
Oklch
oklch(28.0% 0.013 188.2)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDC585
849BDC

Analogous

DC9884
DDC585
C8DC84

Triadic

DDC585
84DCC5
C584DC

Split-Comp.

DDC585
84C8DC
9884DC

Tetradic

DDC585
84DC98
849BDC
DC84C8

Contrast Matrix WCAG 2.1 Contrast

DDC585
C1B078
97946B
A07A56
222B2A
—
1.3
Fail
1.8
Fail
2.3
Fail
8.6
AAA
1.3
Fail
—
1.4
Fail
1.8
Fail
6.7
AA
1.8
Fail
1.4
Fail
—
1.2
Fail
4.7
AA
2.3
Fail
1.8
Fail
1.2
Fail
—
3.7
AA Large
8.6
AAA
6.7
AA
4.7
AA
3.7
AA Large
—
White BG
1.7Fail
2.2Fail
3.1AA Large
3.9AA Large
14.5AAA
Black BG
12.4AAA
9.7AAA
6.8AA
5.4AA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D294
BAB986
969675
908F5F
26262A

Deuteranopia

D4D698
BBBC89
969677
929561
25252A

Tritanopia

DCA1A3
C09093
977D7E
9E6667
222A2A

Achromatopsia

C5C5C5
AFAFAF
909090
818181
282828

Shades & Tints Shades & Tints

#DDC585

Dark
Light

#C1B078

Dark
Light

#97946B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ddc585;
  --color-2: #c1b078;
  --color-3: #97946b;
  --color-4: #a07a56;
  --color-5: #222b2a;
}

SCSS

$color-1: #ddc585;
$color-2: #c1b078;
$color-3: #97946b;
$color-4: #a07a56;
$color-5: #222b2a;

TAILWIND

colors: {
  'brand-1': '#ddc585',
  'brand-2': '#c1b078',
  'brand-3': '#97946b',
  'brand-4': '#a07a56',
  'brand-5': '#222b2a',
}

RGB Array

[221, 197, 133], [193, 176, 120], [151, 148, 107], [160, 122, 86], [34, 43, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDC585, #C1B078, #97946B, #A07A56, #222B2A 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: #ddc585; --color-2: #c1b078; --color-3: #97946b; --color-4: #a07a56; --color-5: #222b2a. 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