← Back to Editor

#C06222 · #D4CD97 · #9D9B72 · #928A77 · #E2D1A6

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 Library

Color Details Color Details

#C06222

Tangerine · Chocolate · Amber Brown

HEX
#C06222
RGB
rgb(192, 98, 34)
HSL
hsl(24, 70%, 44%)
HSB
hsb(24, 82%, 75%)
CMYK
cmyk(0%, 49%, 82%, 25%)
Oklch
oklch(59.8% 0.141 50.2)

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

#D4CD97

Fresh Green · Tan · Sunflower

HEX
#D4CD97
RGB
rgb(212, 205, 151)
HSL
hsl(53, 41%, 71%)
HSB
hsb(53, 29%, 83%)
CMYK
cmyk(0%, 3%, 29%, 17%)
Oklch
oklch(84.1% 0.071 101.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#9D9B72

Autumn Sage · Gray · Sunflower

HEX
#9D9B72
RGB
rgb(157, 155, 114)
HSL
hsl(57, 18%, 53%)
HSB
hsb(57, 27%, 62%)
CMYK
cmyk(0%, 1%, 27%, 38%)
Oklch
oklch(68.1% 0.057 105.5)

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

#928A77

Ginger · Gray · Sunflower

HEX
#928A77
RGB
rgb(146, 138, 119)
HSL
hsl(42, 11%, 52%)
HSB
hsb(42, 18%, 57%)
CMYK
cmyk(0%, 5%, 18%, 43%)
Oklch
oklch(63.5% 0.029 87.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E2D1A6

Goose Yellow · Wheat · Lemon Cream

HEX
#E2D1A6
RGB
rgb(226, 209, 166)
HSL
hsl(43, 51%, 77%)
HSB
hsb(43, 27%, 89%)
CMYK
cmyk(0%, 8%, 27%, 11%)
Oklch
oklch(86.4% 0.060 89.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C06222
2280BF

Analogous

BF2231
C06222
BFAF22

Triadic

C06222
22BF60
6022BF

Split-Comp.

C06222
22BFAF
2231BF

Tetradic

C06222
31BF22
2280BF
AF22BF

Contrast Matrix WCAG 2.1 Contrast

C06222
D4CD97
9D9B72
928A77
E2D1A6
—
2.6
Fail
1.5
Fail
1.2
Fail
2.8
Fail
2.6
Fail
—
1.8
Fail
2.1
Fail
1.1
Fail
1.5
Fail
1.8
Fail
—
1.2
Fail
1.9
Fail
1.2
Fail
2.1
Fail
1.2
Fail
—
2.3
Fail
2.8
Fail
1.1
Fail
1.9
Fail
2.3
Fail
—
White BG
4.2AA Large
1.6Fail
2.9Fail
3.4AA Large
1.5Fail
Black BG
5.0AA
13.0AAA
7.4AAA
6.1AA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

979631
D1D1A4
9C9C7C
8F8E7C
DBDAB0

Deuteranopia

9DA435
D1D2A7
9C9C7E
8F907D
DCDDB3

Tritanopia

BB3E40
D4AEB1
9D8485
927F80
E1B9BA

Achromatopsia

777777
C9C9C9
979797
8A8A8A
D1D1D1

Shades & Tints Shades & Tints

#C06222

Dark
Light

#D4CD97

Dark
Light

#9D9B72

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c06222;
  --color-2: #d4cd97;
  --color-3: #9d9b72;
  --color-4: #928a77;
  --color-5: #e2d1a6;
}

SCSS

$color-1: #c06222;
$color-2: #d4cd97;
$color-3: #9d9b72;
$color-4: #928a77;
$color-5: #e2d1a6;

TAILWIND

colors: {
  'brand-1': '#c06222',
  'brand-2': '#d4cd97',
  'brand-3': '#9d9b72',
  'brand-4': '#928a77',
  'brand-5': '#e2d1a6',
}

RGB Array

[192, 98, 34], [212, 205, 151], [157, 155, 114], [146, 138, 119], [226, 209, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C06222, #D4CD97, #9D9B72, #928A77, #E2D1A6 is ideal for: corporate websites, product showcases, portfolios. 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: #c06222; --color-2: #d4cd97; --color-3: #9d9b72; --color-4: #928a77; --color-5: #e2d1a6. 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. 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