← Back to Editor

#A04D26 · #B97A2A · #CAAB46 · #989B4C · #798043

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

#A04D26

Tangerine · Sienna · Amber Brown

HEX
#A04D26
RGB
rgb(160, 77, 38)
HSL
hsl(19, 62%, 39%)
HSB
hsb(19, 76%, 63%)
CMYK
cmyk(0%, 52%, 76%, 37%)
Oklch
oklch(51.7% 0.122 43.9)

TraditionalTangerine」· PaintAmber Brown」· Creative Blush Sunrise

#B97A2A

Ochre · Chocolate · Amber Brown

HEX
#B97A2A
RGB
rgb(185, 122, 42)
HSL
hsl(34, 63%, 45%)
HSB
hsb(34, 77%, 73%)
CMYK
cmyk(0%, 34%, 77%, 27%)
Oklch
oklch(63.1% 0.121 68.1)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

#CAAB46

Ginger · GoldenRod · Sunflower

HEX
#CAAB46
RGB
rgb(202, 171, 70)
HSL
hsl(46, 55%, 53%)
HSB
hsb(46, 65%, 79%)
CMYK
cmyk(0%, 15%, 65%, 21%)
Oklch
oklch(75.0% 0.124 92.0)

TraditionalGinger」· PaintSunflower」· Creative Blush Sunrise

#989B4C

Autumn Sage · Gray · Honey Gold

HEX
#989B4C
RGB
rgb(152, 155, 76)
HSL
hsl(62, 34%, 45%)
HSB
hsb(62, 51%, 61%)
CMYK
cmyk(2%, 0%, 51%, 39%)
Oklch
oklch(67.0% 0.103 110.8)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#798043

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#798043
RGB
rgb(121, 128, 67)
HSL
hsl(67, 31%, 38%)
HSB
hsb(67, 48%, 50%)
CMYK
cmyk(5%, 0%, 48%, 50%)
Oklch
oklch(58.0% 0.084 114.4)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A04D26
267AA1

Analogous

A1263C
A04D26
A18B26

Triadic

A04D26
26A14D
4D26A1

Split-Comp.

A04D26
26A18B
263CA1

Tetradic

A04D26
3CA126
267AA1
8B26A1

Contrast Matrix WCAG 2.1 Contrast

A04D26
B97A2A
CAAB46
989B4C
798043
1.6
Fail
2.6
Fail
2.0
Fail
1.4
Fail
1.6
Fail
1.6
Fail
1.2
Fail
1.2
Fail
2.6
Fail
1.6
Fail
1.3
Fail
1.9
Fail
2.0
Fail
1.2
Fail
1.3
Fail
1.4
Fail
1.4
Fail
1.2
Fail
1.9
Fail
1.4
Fail
White BG
5.9AA
3.6AA Large
2.2Fail
2.9Fail
4.2AA Large
Black BG
3.6AA Large
5.9AA
9.4AAA
7.1AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7B2F
9E9D3D
BDBC5E
99995F
7C7C52

Deuteranopia

818732
A1A642
BEC164
999964
7C7B55

Tritanopia

9C3739
B64D50
C87276
986E72
795D60

Achromatopsia

616161
848484
A9A9A9
919191
777777

Shades & Tints Shades & Tints

#A04D26

Dark
Light

#B97A2A

Dark
Light

#CAAB46

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a04d26;
  --color-2: #b97a2a;
  --color-3: #caab46;
  --color-4: #989b4c;
  --color-5: #798043;
}

SCSS

$color-1: #a04d26;
$color-2: #b97a2a;
$color-3: #caab46;
$color-4: #989b4c;
$color-5: #798043;

TAILWIND

colors: {
  'brand-1': '#a04d26',
  'brand-2': '#b97a2a',
  'brand-3': '#caab46',
  'brand-4': '#989b4c',
  'brand-5': '#798043',
}

RGB Array

[160, 77, 38], [185, 122, 42], [202, 171, 70], [152, 155, 76], [121, 128, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #A04D26, #B97A2A, #CAAB46, #989B4C, #798043 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: #a04d26; --color-2: #b97a2a; --color-3: #caab46; --color-4: #989b4c; --color-5: #798043. 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