← Back to Editor

#ABB286 · #E66804 · #D4AD6C · #DDD3A0 · #925818

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 LibraryData Visualization

Color Details Color Details

#ABB286

Willow Green · DarkSeaGreen · Apple Green

HEX
#ABB286
RGB
rgb(171, 178, 134)
HSL
hsl(70, 22%, 61%)
HSB
hsb(70, 25%, 70%)
CMYK
cmyk(4%, 0%, 25%, 30%)
Oklch
oklch(74.7% 0.061 115.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#E66804

Tangerine · Chocolate · Amber Brown

HEX
#E66804
RGB
rgb(230, 104, 4)
HSL
hsl(27, 97%, 46%)
HSB
hsb(27, 98%, 90%)
CMYK
cmyk(0%, 55%, 98%, 10%)
Oklch
oklch(66.1% 0.179 48.0)

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

#D4AD6C

Ginger · BurlyWood · Warm Sun

HEX
#D4AD6C
RGB
rgb(212, 173, 108)
HSL
hsl(38, 55%, 63%)
HSB
hsb(38, 49%, 83%)
CMYK
cmyk(0%, 18%, 49%, 17%)
Oklch
oklch(76.8% 0.095 79.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#DDD3A0

Fresh Green · Wheat · Sunflower

HEX
#DDD3A0
RGB
rgb(221, 211, 160)
HSL
hsl(50, 47%, 75%)
HSB
hsb(50, 28%, 87%)
CMYK
cmyk(0%, 5%, 28%, 13%)
Oklch
oklch(86.2% 0.068 98.3)

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

#925818

Ochre · Sienna · Amber Brown

HEX
#925818
RGB
rgb(146, 88, 24)
HSL
hsl(31, 72%, 33%)
HSB
hsb(31, 84%, 57%)
CMYK
cmyk(0%, 40%, 84%, 43%)
Oklch
oklch(51.6% 0.107 62.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABB286
8D86B1

Analogous

B1A386
ABB286
94B186

Triadic

ABB286
86AAB1
B186AA

Split-Comp.

ABB286
8694B1
A386B1

Tetradic

ABB286
86B1A3
8D86B1
B18694

Contrast Matrix WCAG 2.1 Contrast

ABB286
E66804
D4AD6C
DDD3A0
925818
—
1.5
Fail
1.1
Fail
1.5
Fail
2.6
Fail
1.5
Fail
—
1.6
Fail
2.2
Fail
1.7
Fail
1.1
Fail
1.6
Fail
—
1.4
Fail
2.8
Fail
1.5
Fail
2.2
Fail
1.4
Fail
—
3.8
AA Large
2.6
Fail
1.7
Fail
2.8
Fail
3.8
AA Large
—
White BG
2.2Fail
3.3AA Large
2.1Fail
1.5Fail
5.8AA
Black BG
9.4AAA
6.3AA
10.0AAA
13.9AAA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAE91
AFAE1C
C3C37C
D9D9AC
797827

Deuteranopia

AEAD93
B7C022
C5C880
D9DAAF
7C812B

Tritanopia

AB999B
E02F34
D2888B
DDB6B8
8F3436

Achromatopsia

ABABAB
828282
B1B1B1
D0D0D0
626262

Shades & Tints Shades & Tints

#ABB286

Dark
Light

#E66804

Dark
Light

#D4AD6C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abb286;
  --color-2: #e66804;
  --color-3: #d4ad6c;
  --color-4: #ddd3a0;
  --color-5: #925818;
}

SCSS

$color-1: #abb286;
$color-2: #e66804;
$color-3: #d4ad6c;
$color-4: #ddd3a0;
$color-5: #925818;

TAILWIND

colors: {
  'brand-1': '#abb286',
  'brand-2': '#e66804',
  'brand-3': '#d4ad6c',
  'brand-4': '#ddd3a0',
  'brand-5': '#925818',
}

RGB Array

[171, 178, 134], [230, 104, 4], [212, 173, 108], [221, 211, 160], [146, 88, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABB286, #E66804, #D4AD6C, #DDD3A0, #925818 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: #abb286; --color-2: #e66804; --color-3: #d4ad6c; --color-4: #ddd3a0; --color-5: #925818. 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