← Back to Editor

#ABA28C · #878661 · #826214 · #4F4C43 · #292826

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#ABA28C

Ginger · DarkGray · Sunflower

HEX
#ABA28C
RGB
rgb(171, 162, 140)
HSL
hsl(43, 16%, 61%)
HSB
hsb(43, 18%, 67%)
CMYK
cmyk(0%, 5%, 18%, 33%)
Oklch
oklch(71.4% 0.033 88.4)

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

#878661

Autumn Sage · Gray · Honey Gold

HEX
#878661
RGB
rgb(135, 134, 97)
HSL
hsl(58, 16%, 45%)
HSB
hsb(58, 28%, 53%)
CMYK
cmyk(0%, 1%, 28%, 47%)
Oklch
oklch(61.1% 0.053 106.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#826214

Ochre · Olive · Honey Gold

HEX
#826214
RGB
rgb(130, 98, 20)
HSL
hsl(43, 73%, 29%)
HSB
hsb(43, 85%, 51%)
CMYK
cmyk(0%, 25%, 85%, 49%)
Oklch
oklch(51.5% 0.098 84.2)

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

#4F4C43

Ochre · DarkSlateGray · Charcoal

HEX
#4F4C43
RGB
rgb(79, 76, 67)
HSL
hsl(45, 8%, 29%)
HSB
hsb(45, 15%, 31%)
CMYK
cmyk(0%, 4%, 15%, 69%)
Oklch
oklch(41.7% 0.015 91.7)

Traditional「Ochre」· Paint「Charcoal」· Creative Midnight Shadow

#292826

Ink Black · DarkSlateGray · Dark Stone

HEX
#292826
RGB
rgb(41, 40, 38)
HSL
hsl(40, 4%, 15%)
HSB
hsb(40, 7%, 16%)
CMYK
cmyk(0%, 2%, 7%, 84%)
Oklch
oklch(27.7% 0.004 84.6)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABA28C
8C95AB

Analogous

AB938C
ABA28C
A5AB8C

Triadic

ABA28C
8CABA2
A28CAB

Split-Comp.

ABA28C
8CA5AB
938CAB

Tetradic

ABA28C
8CAB93
8C95AB
AB8CA5

Contrast Matrix WCAG 2.1 Contrast

ABA28C
878661
826214
4F4C43
292826
—
1.5
Fail
2.2
Fail
3.4
AA Large
5.8
AA
1.5
Fail
—
1.5
Fail
2.3
Fail
3.9
AA Large
2.2
Fail
1.5
Fail
—
1.5
Fail
2.6
Fail
3.4
AA Large
2.3
Fail
1.5
Fail
—
1.7
Fail
5.8
AA
3.9
AA Large
2.6
Fail
1.7
Fail
—
White BG
2.5Fail
3.7AA Large
5.7AA
8.6AAA
14.7AAA
Black BG
8.3AAA
5.6AA
3.7AA Large
2.4Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A791
87876A
747427
4E4E45
292926

Deuteranopia

A8A893
87876C
76782B
4E4E46
292927

Tritanopia

AB9696
877173
803639
4F4747
292727

Achromatopsia

A2A2A2
828282
636363
4C4C4C
282828

Shades & Tints Shades & Tints

#ABA28C

Dark
Light

#878661

Dark
Light

#826214

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aba28c;
  --color-2: #878661;
  --color-3: #826214;
  --color-4: #4f4c43;
  --color-5: #292826;
}

SCSS

$color-1: #aba28c;
$color-2: #878661;
$color-3: #826214;
$color-4: #4f4c43;
$color-5: #292826;

TAILWIND

colors: {
  'brand-1': '#aba28c',
  'brand-2': '#878661',
  'brand-3': '#826214',
  'brand-4': '#4f4c43',
  'brand-5': '#292826',
}

RGB Array

[171, 162, 140], [135, 134, 97], [130, 98, 20], [79, 76, 67], [41, 40, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #ABA28C, #878661, #826214, #4F4C43, #292826 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #aba28c; --color-2: #878661; --color-3: #826214; --color-4: #4f4c43; --color-5: #292826. 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 warm-style 5-color scheme is especially suited for finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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