← Back to Editor

#A18C3D · #DAC473 · #D8CE93 · #CABD79 · #9DA874

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

#A18C3D

Ochre · DarkGoldenRod · Honey Gold

HEX
#A18C3D
RGB
rgb(161, 140, 61)
HSL
hsl(47, 45%, 44%)
HSB
hsb(47, 62%, 63%)
CMYK
cmyk(0%, 13%, 62%, 37%)
Oklch
oklch(64.3% 0.102 94.5)

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

#DAC473

Ginger · BurlyWood · Sunflower

HEX
#DAC473
RGB
rgb(218, 196, 115)
HSL
hsl(47, 58%, 65%)
HSB
hsb(47, 47%, 85%)
CMYK
cmyk(0%, 10%, 47%, 15%)
Oklch
oklch(82.1% 0.104 94.6)

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

#D8CE93

Fresh Green · BurlyWood · Sunflower

HEX
#D8CE93
RGB
rgb(216, 206, 147)
HSL
hsl(51, 47%, 71%)
HSB
hsb(51, 32%, 85%)
CMYK
cmyk(0%, 5%, 32%, 15%)
Oklch
oklch(84.6% 0.078 99.7)

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

#CABD79

Fresh Green · Tan · Sunflower

HEX
#CABD79
RGB
rgb(202, 189, 121)
HSL
hsl(50, 43%, 63%)
HSB
hsb(50, 40%, 79%)
CMYK
cmyk(0%, 6%, 40%, 21%)
Oklch
oklch(79.4% 0.089 98.7)

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

#9DA874

Grass Green · DarkSeaGreen · Olive Green

HEX
#9DA874
RGB
rgb(157, 168, 116)
HSL
hsl(73, 23%, 56%)
HSB
hsb(73, 31%, 66%)
CMYK
cmyk(7%, 0%, 31%, 34%)
Oklch
oklch(71.0% 0.073 118.0)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A18C3D
3E54A3

Analogous

A35A3E
A18C3D
86A33E

Triadic

A18C3D
3EA38D
8D3EA3

Split-Comp.

A18C3D
3E86A3
5A3EA3

Tetradic

A18C3D
3EA35A
3E54A3
A33E86

Contrast Matrix WCAG 2.1 Contrast

A18C3D
DAC473
D8CE93
CABD79
9DA874
—
1.9
Fail
2.1
Fail
1.7
Fail
1.3
Fail
1.9
Fail
—
1.1
Fail
1.1
Fail
1.5
Fail
2.1
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
1.7
Fail
1.1
Fail
1.2
Fail
—
1.3
Fail
1.3
Fail
1.5
Fail
1.6
Fail
1.3
Fail
—
White BG
3.3AA Large
1.7Fail
1.6Fail
1.9Fail
2.5Fail
Black BG
6.3AA
12.1AAA
13.2AAA
11.1AAA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

989850
D0D087
D4D4A1
C4C489
A2A281

Deuteranopia

999B55
D2D38B
D4D5A5
C5C68D
A1A084

Tritanopia

A05F63
D99699
D8ADAF
C99699
9E8B8D

Achromatopsia

898989
C1C1C1
CACACA
B9B9B9
9F9F9F

Shades & Tints Shades & Tints

#A18C3D

Dark
Light

#DAC473

Dark
Light

#D8CE93

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a18c3d;
  --color-2: #dac473;
  --color-3: #d8ce93;
  --color-4: #cabd79;
  --color-5: #9da874;
}

SCSS

$color-1: #a18c3d;
$color-2: #dac473;
$color-3: #d8ce93;
$color-4: #cabd79;
$color-5: #9da874;

TAILWIND

colors: {
  'brand-1': '#a18c3d',
  'brand-2': '#dac473',
  'brand-3': '#d8ce93',
  'brand-4': '#cabd79',
  'brand-5': '#9da874',
}

RGB Array

[161, 140, 61], [218, 196, 115], [216, 206, 147], [202, 189, 121], [157, 168, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A18C3D, #DAC473, #D8CE93, #CABD79, #9DA874 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: #a18c3d; --color-2: #dac473; --color-3: #d8ce93; --color-4: #cabd79; --color-5: #9da874. 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