← Back to Editor

#ADA581 · #80664F · #CD7045 · #E58946 · #F4D199

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

#ADA581

Ginger · DarkSeaGreen · Sunflower

HEX
#ADA581
RGB
rgb(173, 165, 129)
HSL
hsl(49, 21%, 59%)
HSB
hsb(49, 25%, 68%)
CMYK
cmyk(0%, 5%, 25%, 32%)
Oklch
oklch(71.9% 0.050 97.0)

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

#80664F

Tangerine · DimGray · Amber Brown

HEX
#80664F
RGB
rgb(128, 102, 79)
HSL
hsl(28, 24%, 41%)
HSB
hsb(28, 38%, 50%)
CMYK
cmyk(0%, 20%, 38%, 50%)
Oklch
oklch(53.0% 0.048 63.0)

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

#CD7045

Tangerine · Chocolate · Warm Sun

HEX
#CD7045
RGB
rgb(205, 112, 69)
HSL
hsl(19, 58%, 54%)
HSB
hsb(19, 66%, 80%)
CMYK
cmyk(0%, 45%, 66%, 20%)
Oklch
oklch(64.2% 0.131 44.5)

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

#E58946

Tangerine · Coral · Warm Sun

HEX
#E58946
RGB
rgb(229, 137, 70)
HSL
hsl(25, 75%, 59%)
HSB
hsb(25, 69%, 90%)
CMYK
cmyk(0%, 40%, 69%, 10%)
Oklch
oklch(71.6% 0.139 54.3)

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

#F4D199

Goose Yellow · Khaki · Peach Orange

HEX
#F4D199
RGB
rgb(244, 209, 153)
HSL
hsl(37, 81%, 78%)
HSB
hsb(37, 37%, 96%)
CMYK
cmyk(0%, 14%, 37%, 4%)
Oklch
oklch(87.7% 0.082 79.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADA581
8089AC

Analogous

AC8E80
ADA581
9FAC80

Triadic

ADA581
80ACA4
A480AC

Split-Comp.

ADA581
809FAC
8E80AC

Tetradic

ADA581
80AC8E
8089AC
AC809F

Contrast Matrix WCAG 2.1 Contrast

ADA581
80664F
CD7045
E58946
F4D199
—
2.2
Fail
1.4
Fail
1.1
Fail
1.7
Fail
2.2
Fail
—
1.5
Fail
2.0
Fail
3.7
AA Large
1.4
Fail
1.5
Fail
—
1.3
Fail
2.4
Fail
1.1
Fail
2.0
Fail
1.3
Fail
—
1.8
Fail
1.7
Fail
3.7
AA Large
2.4
Fail
1.8
Fail
—
White BG
2.5Fail
5.3AA
3.5AA Large
2.6Fail
1.5Fail
Black BG
8.5AAA
3.9AA Large
6.0AA
8.0AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA98A
757555
A5A44F
BDBC56
E5E5A7

Deuteranopia

AAAB8C
767856
AAB152
C3C95A
E7E9AA

Tritanopia

AD9192
7F595A
C85859
E06366
F2B1B4

Achromatopsia

A3A3A3
6B6B6B
878787
9D9D9D
D5D5D5

Shades & Tints Shades & Tints

#ADA581

Dark
Light

#80664F

Dark
Light

#CD7045

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ada581;
  --color-2: #80664f;
  --color-3: #cd7045;
  --color-4: #e58946;
  --color-5: #f4d199;
}

SCSS

$color-1: #ada581;
$color-2: #80664f;
$color-3: #cd7045;
$color-4: #e58946;
$color-5: #f4d199;

TAILWIND

colors: {
  'brand-1': '#ada581',
  'brand-2': '#80664f',
  'brand-3': '#cd7045',
  'brand-4': '#e58946',
  'brand-5': '#f4d199',
}

RGB Array

[173, 165, 129], [128, 102, 79], [205, 112, 69], [229, 137, 70], [244, 209, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ADA581, #80664F, #CD7045, #E58946, #F4D199 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: #ada581; --color-2: #80664f; --color-3: #cd7045; --color-4: #e58946; --color-5: #f4d199. 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