← Back to Editor

#9DA164 · #4B8286 · #586C75 · #5C4F66 · #AD6885

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9DA164

Autumn Sage · Gray · Sunflower

HEX
#9DA164
RGB
rgb(157, 161, 100)
HSL
hsl(64, 24%, 51%)
HSB
hsb(64, 38%, 63%)
CMYK
cmyk(2%, 0%, 38%, 37%)
Oklch
oklch(69.1% 0.082 111.6)

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

#4B8286

Slate Blue · SlateGray · Mint Ice

HEX
#4B8286
RGB
rgb(75, 130, 134)
HSL
hsl(184, 28%, 41%)
HSB
hsb(184, 44%, 53%)
CMYK
cmyk(44%, 3%, 0%, 47%)
Oklch
oklch(57.0% 0.059 201.7)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#586C75

Slate Blue · DimGray · Mint Ice

HEX
#586C75
RGB
rgb(88, 108, 117)
HSL
hsl(199, 14%, 40%)
HSB
hsb(199, 25%, 46%)
CMYK
cmyk(25%, 8%, 0%, 54%)
Oklch
oklch(51.8% 0.028 226.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#5C4F66

Dark Plum · DimGray · Eggplant

HEX
#5C4F66
RGB
rgb(92, 79, 102)
HSL
hsl(274, 13%, 35%)
HSB
hsb(274, 23%, 40%)
CMYK
cmyk(10%, 23%, 0%, 60%)
Oklch
oklch(44.9% 0.040 310.2)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#AD6885

Dark Violet · Gray · Rose Pink

HEX
#AD6885
RGB
rgb(173, 104, 133)
HSL
hsl(335, 30%, 54%)
HSB
hsb(335, 40%, 68%)
CMYK
cmyk(0%, 40%, 23%, 32%)
Oklch
oklch(60.2% 0.095 353.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DA164
6864A0

Analogous

A08664
9DA164
7EA064

Triadic

9DA164
649CA0
A0649C

Split-Comp.

9DA164
647EA0
8664A0

Tetradic

9DA164
64A086
6864A0
A0647E

Contrast Matrix WCAG 2.1 Contrast

9DA164
4B8286
586C75
5C4F66
AD6885
—
1.6
Fail
2.0
Fail
2.8
Fail
1.5
Fail
1.6
Fail
—
1.3
Fail
1.7
Fail
1.1
Fail
2.0
Fail
1.3
Fail
—
1.4
Fail
1.3
Fail
2.8
Fail
1.7
Fail
1.4
Fail
—
1.8
Fail
1.5
Fail
1.1
Fail
1.3
Fail
1.8
Fail
—
White BG
2.7Fail
4.3AA Large
5.5AA
7.6AAA
4.1AA Large
Black BG
7.7AAA
4.8AA
3.8AA Large
2.8Fail
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9F9F73
636385
616173
565660
8F8F7E

Deuteranopia

9F9E76
605C85
605E72
57585F
93987C

Tritanopia

9D7E81
4E8484
597171
5B5C5B
AA7877

Achromatopsia

999999
727272
676767
565656
808080

Shades & Tints Shades & Tints

#9DA164

Dark
Light

#4B8286

Dark
Light

#586C75

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9da164;
  --color-2: #4b8286;
  --color-3: #586c75;
  --color-4: #5c4f66;
  --color-5: #ad6885;
}

SCSS

$color-1: #9da164;
$color-2: #4b8286;
$color-3: #586c75;
$color-4: #5c4f66;
$color-5: #ad6885;

TAILWIND

colors: {
  'brand-1': '#9da164',
  'brand-2': '#4b8286',
  'brand-3': '#586c75',
  'brand-4': '#5c4f66',
  'brand-5': '#ad6885',
}

RGB Array

[157, 161, 100], [75, 130, 134], [88, 108, 117], [92, 79, 102], [173, 104, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9DA164, #4B8286, #586C75, #5C4F66, #AD6885 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9da164; --color-2: #4b8286; --color-3: #586c75; --color-4: #5c4f66; --color-5: #ad6885. 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. Restrained colors convey professionalism and trust. 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