← Back to Editor

#AE9956 · #7A7E5D · #584B38 · #AD552D · #CA9144

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

#AE9956

Ginger · Gray · Sunflower

HEX
#AE9956
RGB
rgb(174, 153, 86)
HSL
hsl(46, 35%, 51%)
HSB
hsb(46, 51%, 68%)
CMYK
cmyk(0%, 12%, 51%, 32%)
Oklch
oklch(68.7% 0.090 92.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#7A7E5D

Autumn Sage · DimGray · Honey Gold

HEX
#7A7E5D
RGB
rgb(122, 126, 93)
HSL
hsl(67, 15%, 43%)
HSB
hsb(67, 26%, 49%)
CMYK
cmyk(3%, 0%, 26%, 51%)
Oklch
oklch(58.1% 0.048 113.5)

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

#584B38

Ochre · DarkOliveGreen · Amber Brown

HEX
#584B38
RGB
rgb(88, 75, 56)
HSL
hsl(36, 22%, 28%)
HSB
hsb(36, 36%, 35%)
CMYK
cmyk(0%, 15%, 36%, 65%)
Oklch
oklch(42.1% 0.034 77.0)

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

#AD552D

Tangerine · Sienna · Amber Brown

HEX
#AD552D
RGB
rgb(173, 85, 45)
HSL
hsl(19, 59%, 43%)
HSB
hsb(19, 74%, 68%)
CMYK
cmyk(0%, 51%, 74%, 32%)
Oklch
oklch(55.0% 0.127 43.5)

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

#CA9144

Ginger · GoldenRod · Warm Sun

HEX
#CA9144
RGB
rgb(202, 145, 68)
HSL
hsl(34, 56%, 53%)
HSB
hsb(34, 66%, 79%)
CMYK
cmyk(0%, 28%, 66%, 21%)
Oklch
oklch(69.8% 0.116 71.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AE9956
566BAE

Analogous

AE6E56
AE9956
96AE56

Triadic

AE9956
56AE99
9956AE

Split-Comp.

AE9956
5696AE
6E56AE

Tetradic

AE9956
56AE6E
566BAE
AE5696

Contrast Matrix WCAG 2.1 Contrast

AE9956
7A7E5D
584B38
AD552D
CA9144
—
1.5
Fail
3.0
AA Large
1.8
Fail
1.0
Fail
1.5
Fail
—
2.0
Fail
1.2
Fail
1.5
Fail
3.0
AA Large
2.0
Fail
—
1.7
Fail
3.1
AA Large
1.8
Fail
1.2
Fail
1.7
Fail
—
1.9
Fail
1.0
Fail
1.5
Fail
3.1
AA Large
1.9
Fail
—
White BG
2.8Fail
4.2AA Large
8.5AAA
5.1AA
2.7Fail
Black BG
7.5AAA
5.0AA
2.5Fail
4.1AA Large
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A566
7C7C65
52523D
878637
B1B157

Deuteranopia

A6A86A
7C7B67
53543E
8C9339
B5B95B

Tritanopia

AD7376
7A6B6D
574041
A93E40
C76569

Achromatopsia

989898
797979
4D4D4D
6B6B6B
999999

Shades & Tints Shades & Tints

#AE9956

Dark
Light

#7A7E5D

Dark
Light

#584B38

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ae9956;
  --color-2: #7a7e5d;
  --color-3: #584b38;
  --color-4: #ad552d;
  --color-5: #ca9144;
}

SCSS

$color-1: #ae9956;
$color-2: #7a7e5d;
$color-3: #584b38;
$color-4: #ad552d;
$color-5: #ca9144;

TAILWIND

colors: {
  'brand-1': '#ae9956',
  'brand-2': '#7a7e5d',
  'brand-3': '#584b38',
  'brand-4': '#ad552d',
  'brand-5': '#ca9144',
}

RGB Array

[174, 153, 86], [122, 126, 93], [88, 75, 56], [173, 85, 45], [202, 145, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AE9956, #7A7E5D, #584B38, #AD552D, #CA9144 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: #ae9956; --color-2: #7a7e5d; --color-3: #584b38; --color-4: #ad552d; --color-5: #ca9144. 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