← Back to Editor

#C3AB3D · #A89632 · #886842 · #E83A43 · #DB7C84

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

#C3AB3D

Ochre · GoldenRod · Honey Gold

HEX
#C3AB3D
RGB
rgb(195, 171, 61)
HSL
hsl(49, 53%, 50%)
HSB
hsb(49, 69%, 76%)
CMYK
cmyk(0%, 12%, 69%, 24%)
Oklch
oklch(74.2% 0.130 96.7)

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

#A89632

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A89632
RGB
rgb(168, 150, 50)
HSL
hsl(51, 54%, 43%)
HSB
hsb(51, 70%, 66%)
CMYK
cmyk(0%, 11%, 70%, 34%)
Oklch
oklch(67.1% 0.119 98.9)

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

#886842

Ochre · Sienna · Amber Brown

HEX
#886842
RGB
rgb(136, 104, 66)
HSL
hsl(33, 35%, 40%)
HSB
hsb(33, 51%, 53%)
CMYK
cmyk(0%, 24%, 51%, 47%)
Oklch
oklch(54.0% 0.067 70.4)

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

#E83A43

Vermilion · Crimson · Passion Red

HEX
#E83A43
RGB
rgb(232, 58, 67)
HSL
hsl(357, 79%, 57%)
HSB
hsb(357, 75%, 91%)
CMYK
cmyk(0%, 75%, 71%, 9%)
Oklch
oklch(61.6% 0.210 23.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#DB7C84

Peach Pink · LightCoral · Coral Red

HEX
#DB7C84
RGB
rgb(219, 124, 132)
HSL
hsl(355, 57%, 67%)
HSB
hsb(355, 43%, 86%)
CMYK
cmyk(0%, 43%, 40%, 14%)
Oklch
oklch(69.2% 0.118 15.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3AB3D
3C55C3

Analogous

C3673C
C3AB3D
98C33C

Triadic

C3AB3D
3CC3AA
AA3CC3

Split-Comp.

C3AB3D
3C98C3
673CC3

Tetradic

C3AB3D
3CC367
3C55C3
C33C98

Contrast Matrix WCAG 2.1 Contrast

C3AB3D
A89632
886842
E83A43
DB7C84
—
1.3
Fail
2.2
Fail
1.8
Fail
1.3
Fail
1.3
Fail
—
1.7
Fail
1.4
Fail
1.0
Fail
2.2
Fail
1.7
Fail
—
1.2
Fail
1.8
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
1.4
Fail
1.3
Fail
1.0
Fail
1.8
Fail
1.4
Fail
—
White BG
2.3Fail
3.0Fail
5.1AA
4.1AA Large
2.9Fail
Black BG
9.2AAA
7.1AAA
4.1AA Large
5.1AA
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B858
A0A04A
7A7A4B
9D9B41
B2B182

Deuteranopia

BABC5E
A1A350
7C7E4D
A7B440
B7BE82

Tritanopia

C26D71
A75D62
865254
DF3F3F
D68180

Achromatopsia

A6A6A6
909090
6D6D6D
6F6F6F
999999

Shades & Tints Shades & Tints

#C3AB3D

Dark
Light

#A89632

Dark
Light

#886842

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3ab3d;
  --color-2: #a89632;
  --color-3: #886842;
  --color-4: #e83a43;
  --color-5: #db7c84;
}

SCSS

$color-1: #c3ab3d;
$color-2: #a89632;
$color-3: #886842;
$color-4: #e83a43;
$color-5: #db7c84;

TAILWIND

colors: {
  'brand-1': '#c3ab3d',
  'brand-2': '#a89632',
  'brand-3': '#886842',
  'brand-4': '#e83a43',
  'brand-5': '#db7c84',
}

RGB Array

[195, 171, 61], [168, 150, 50], [136, 104, 66], [232, 58, 67], [219, 124, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C3AB3D, #A89632, #886842, #E83A43, #DB7C84 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: #c3ab3d; --color-2: #a89632; --color-3: #886842; --color-4: #e83a43; --color-5: #db7c84. 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