← Back to Editor

#ABA068 · #D29D37 · #CA8A43 · #B9765B · #D25D53

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

#ABA068

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ABA068
RGB
rgb(171, 160, 104)
HSL
hsl(50, 29%, 54%)
HSB
hsb(50, 39%, 67%)
CMYK
cmyk(0%, 6%, 39%, 33%)
Oklch
oklch(70.2% 0.076 98.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#D29D37

Ginger · GoldenRod · Warm Sun

HEX
#D29D37
RGB
rgb(210, 157, 55)
HSL
hsl(39, 63%, 52%)
HSB
hsb(39, 74%, 82%)
CMYK
cmyk(0%, 25%, 74%, 18%)
Oklch
oklch(72.9% 0.131 80.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#CA8A43

Ginger · GoldenRod · Warm Sun

HEX
#CA8A43
RGB
rgb(202, 138, 67)
HSL
hsl(32, 56%, 53%)
HSB
hsb(32, 67%, 79%)
CMYK
cmyk(0%, 32%, 67%, 21%)
Oklch
oklch(68.4% 0.117 66.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#B9765B

Tangerine · Sienna · Warm Sun

HEX
#B9765B
RGB
rgb(185, 118, 91)
HSL
hsl(17, 40%, 54%)
HSB
hsb(17, 51%, 73%)
CMYK
cmyk(0%, 36%, 51%, 27%)
Oklch
oklch(63.0% 0.093 42.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D25D53

Crimson · Tomato · Passion Red

HEX
#D25D53
RGB
rgb(210, 93, 83)
HSL
hsl(5, 59%, 57%)
HSB
hsb(5, 60%, 82%)
CMYK
cmyk(0%, 56%, 60%, 18%)
Oklch
oklch(62.2% 0.150 27.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABA068
6873AC

Analogous

AC7E68
ABA068
95AC68

Triadic

ABA068
68ACA0
A068AC

Split-Comp.

ABA068
6895AC
7E68AC

Tetradic

ABA068
68AC7E
6873AC
AC6895

Contrast Matrix WCAG 2.1 Contrast

ABA068
D29D37
CA8A43
B9765B
D25D53
—
1.1
Fail
1.1
Fail
1.4
Fail
1.5
Fail
1.1
Fail
—
1.2
Fail
1.5
Fail
1.6
Fail
1.1
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.4
Fail
1.5
Fail
1.2
Fail
—
1.1
Fail
1.5
Fail
1.6
Fail
1.3
Fail
1.1
Fail
—
White BG
2.6Fail
2.4Fail
2.9Fail
3.6AA Large
3.9AA Large
Black BG
8.0AAA
8.6AAA
7.2AAA
5.8AA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A676
BBBB50
AEAE54
9C9B62
9F9E55

Deuteranopia

A7A879
BEC256
B2B758
A0A563
A6AF56

Tritanopia

AA8083
CF6367
C76265
B66768
CC5758

Achromatopsia

9D9D9D
A1A1A1
959595
878787
7F7F7F

Shades & Tints Shades & Tints

#ABA068

Dark
Light

#D29D37

Dark
Light

#CA8A43

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aba068;
  --color-2: #d29d37;
  --color-3: #ca8a43;
  --color-4: #b9765b;
  --color-5: #d25d53;
}

SCSS

$color-1: #aba068;
$color-2: #d29d37;
$color-3: #ca8a43;
$color-4: #b9765b;
$color-5: #d25d53;

TAILWIND

colors: {
  'brand-1': '#aba068',
  'brand-2': '#d29d37',
  'brand-3': '#ca8a43',
  'brand-4': '#b9765b',
  'brand-5': '#d25d53',
}

RGB Array

[171, 160, 104], [210, 157, 55], [202, 138, 67], [185, 118, 91], [210, 93, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABA068, #D29D37, #CA8A43, #B9765B, #D25D53 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: #aba068; --color-2: #d29d37; --color-3: #ca8a43; --color-4: #b9765b; --color-5: #d25d53. 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