← Back to Editor

#579A77 · #9B996C · #CDA166 · #F9A04E · #D5CA98

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

#579A77

Celadon · MediumSeaGreen · Olive Green

HEX
#579A77
RGB
rgb(87, 154, 119)
HSL
hsl(149, 28%, 47%)
HSB
hsb(149, 44%, 60%)
CMYK
cmyk(44%, 0%, 23%, 40%)
Oklch
oklch(63.2% 0.087 159.7)

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

#9B996C

Autumn Sage · Gray · Sunflower

HEX
#9B996C
RGB
rgb(155, 153, 108)
HSL
hsl(57, 19%, 52%)
HSB
hsb(57, 30%, 61%)
CMYK
cmyk(0%, 1%, 30%, 39%)
Oklch
oklch(67.3% 0.062 105.8)

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

#CDA166

Ginger · DarkSalmon · Warm Sun

HEX
#CDA166
RGB
rgb(205, 161, 102)
HSL
hsl(34, 51%, 60%)
HSB
hsb(34, 50%, 80%)
CMYK
cmyk(0%, 21%, 50%, 20%)
Oklch
oklch(73.7% 0.092 73.7)

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

#F9A04E

Apricot · SandyBrown · Warm Sun

HEX
#F9A04E
RGB
rgb(249, 160, 78)
HSL
hsl(29, 93%, 64%)
HSB
hsb(29, 69%, 98%)
CMYK
cmyk(0%, 36%, 69%, 2%)
Oklch
oklch(78.1% 0.143 60.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D5CA98

Goose Yellow · Tan · Sunflower

HEX
#D5CA98
RGB
rgb(213, 202, 152)
HSL
hsl(49, 42%, 72%)
HSB
hsb(49, 29%, 84%)
CMYK
cmyk(0%, 5%, 29%, 16%)
Oklch
oklch(83.6% 0.067 97.2)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

579A77
995679

Analogous

579956
579A77
569998

Triadic

579A77
775699
997756

Split-Comp.

579A77
985699
995657

Tetradic

579A77
565799
995679
999856

Contrast Matrix WCAG 2.1 Contrast

579A77
9B996C
CDA166
F9A04E
D5CA98
—
1.1
Fail
1.4
Fail
1.6
Fail
2.0
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.4
Fail
1.6
Fail
1.4
Fail
1.1
Fail
—
1.3
Fail
2.0
Fail
1.8
Fail
1.4
Fail
1.3
Fail
—
White BG
3.3AA Large
2.9Fail
2.4Fail
2.1Fail
1.6Fail
Black BG
6.3AA
7.2AAA
8.9AAA
10.2AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

74757F
9A9A77
BABA74
D2D262
D0D0A4

Deuteranopia

706B82
9A9A7A
BDC078
D8DE67
D1D2A7

Tritanopia

5A8688
9B7F81
CB8082
F57275
D4AEB0

Achromatopsia

828282
949494
A7A7A7
B1B1B1
C8C8C8

Shades & Tints Shades & Tints

#579A77

Dark
Light

#9B996C

Dark
Light

#CDA166

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #579a77;
  --color-2: #9b996c;
  --color-3: #cda166;
  --color-4: #f9a04e;
  --color-5: #d5ca98;
}

SCSS

$color-1: #579a77;
$color-2: #9b996c;
$color-3: #cda166;
$color-4: #f9a04e;
$color-5: #d5ca98;

TAILWIND

colors: {
  'brand-1': '#579a77',
  'brand-2': '#9b996c',
  'brand-3': '#cda166',
  'brand-4': '#f9a04e',
  'brand-5': '#d5ca98',
}

RGB Array

[87, 154, 119], [155, 153, 108], [205, 161, 102], [249, 160, 78], [213, 202, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #579A77, #9B996C, #CDA166, #F9A04E, #D5CA98 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: #579a77; --color-2: #9b996c; --color-3: #cda166; --color-4: #f9a04e; --color-5: #d5ca98. 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