← Back to Editor

#A19352 · #C3A255 · #CBB86C · #DDC77C · #F6E192

warm

A 5-color warm 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

#A19352

Ochre · Gray · Honey Gold

HEX
#A19352
RGB
rgb(161, 147, 82)
HSL
hsl(49, 33%, 48%)
HSB
hsb(49, 49%, 63%)
CMYK
cmyk(0%, 9%, 49%, 37%)
Oklch
oklch(66.1% 0.087 97.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#C3A255

Ginger · SandyBrown · Sunflower

HEX
#C3A255
RGB
rgb(195, 162, 85)
HSL
hsl(42, 48%, 55%)
HSB
hsb(42, 56%, 76%)
CMYK
cmyk(0%, 17%, 56%, 24%)
Oklch
oklch(72.6% 0.104 86.5)

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

#CBB86C

Ginger · Tan · Sunflower

HEX
#CBB86C
RGB
rgb(203, 184, 108)
HSL
hsl(48, 48%, 61%)
HSB
hsb(48, 47%, 80%)
CMYK
cmyk(0%, 9%, 47%, 20%)
Oklch
oklch(78.2% 0.099 95.7)

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

#DDC77C

Ginger · BurlyWood · Sunflower

HEX
#DDC77C
RGB
rgb(221, 199, 124)
HSL
hsl(46, 59%, 68%)
HSB
hsb(46, 44%, 87%)
CMYK
cmyk(0%, 10%, 44%, 13%)
Oklch
oklch(83.2% 0.098 93.6)

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

#F6E192

Goose Yellow · Khaki · Lemon Cream

HEX
#F6E192
RGB
rgb(246, 225, 146)
HSL
hsl(47, 85%, 77%)
HSB
hsb(47, 41%, 96%)
CMYK
cmyk(0%, 9%, 41%, 4%)
Oklch
oklch(90.9% 0.101 95.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A19352
5261A3

Analogous

A36C52
A19352
89A352

Triadic

A19352
52A394
9452A3

Split-Comp.

A19352
5289A3
6C52A3

Tetradic

A19352
52A36C
5261A3
A35289

Contrast Matrix WCAG 2.1 Contrast

A19352
C3A255
CBB86C
DDC77C
F6E192
—
1.3
Fail
1.6
Fail
1.8
Fail
2.4
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
1.9
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
2.4
Fail
1.9
Fail
1.5
Fail
1.3
Fail
—
White BG
3.1AA Large
2.4Fail
2.0Fail
1.7Fail
1.3Fail
Black BG
6.8AA
8.6AAA
10.6AAA
12.5AAA
16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9B62
B5B468
C3C37E
D3D38E
EDEDA5

Deuteranopia

9C9D66
B7B96C
C4C583
D5D693
EEF0AA

Tritanopia

A06E71
C1767A
CA8D90
DC9CA0
F5B4B8

Achromatopsia

909090
A3A3A3
B5B5B5
C5C5C5
DEDEDE

Shades & Tints Shades & Tints

#A19352

Dark
Light

#C3A255

Dark
Light

#CBB86C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a19352;
  --color-2: #c3a255;
  --color-3: #cbb86c;
  --color-4: #ddc77c;
  --color-5: #f6e192;
}

SCSS

$color-1: #a19352;
$color-2: #c3a255;
$color-3: #cbb86c;
$color-4: #ddc77c;
$color-5: #f6e192;

TAILWIND

colors: {
  'brand-1': '#a19352',
  'brand-2': '#c3a255',
  'brand-3': '#cbb86c',
  'brand-4': '#ddc77c',
  'brand-5': '#f6e192',
}

RGB Array

[161, 147, 82], [195, 162, 85], [203, 184, 108], [221, 199, 124], [246, 225, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #A19352, #C3A255, #CBB86C, #DDC77C, #F6E192 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: #a19352; --color-2: #c3a255; --color-3: #cbb86c; --color-4: #ddc77c; --color-5: #f6e192. 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 warm-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