#575C6D + #49393E + #1A8B1C + #9BA42D + #C1BF61 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#575C6D

Indigo · DimGray · Prussian Blue

HEX

#575C6D

RGB

rgb(87, 92, 109)

HSL

hsl(226, 11%, 38%)

HSB

hsb(226, 20%, 43%)

CMYK

cmyk(20%, 16%, 0%, 57%)

Oklch

oklch(47.7% 0.028 272.4)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#49393E

Dark Violet · DarkSlateGray · Raspberry

HEX

#49393E

RGB

rgb(73, 57, 62)

HSL

hsl(341, 12%, 25%)

HSB

hsb(341, 22%, 29%)

CMYK

cmyk(0%, 22%, 15%, 71%)

Oklch

oklch(36.4% 0.024 357.7)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#1A8B1C

Pine Green · ForestGreen · Forest Green

HEX

#1A8B1C

RGB

rgb(26, 139, 28)

HSL

hsl(121, 68%, 32%)

HSB

hsb(121, 81%, 55%)

CMYK

cmyk(81%, 0%, 80%, 45%)

Oklch

oklch(55.6% 0.174 142.9)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#9BA42D

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#9BA42D

RGB

rgb(155, 164, 45)

HSL

hsl(65, 57%, 41%)

HSB

hsb(65, 73%, 64%)

CMYK

cmyk(5%, 0%, 73%, 36%)

Oklch

oklch(69.0% 0.138 113.8)

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

#C1BF61

Autumn Sage · Tan · Sunflower

HEX

#C1BF61

RGB

rgb(193, 191, 97)

HSL

hsl(59, 44%, 57%)

HSB

hsb(59, 50%, 76%)

CMYK

cmyk(0%, 1%, 50%, 24%)

Oklch

oklch(78.7% 0.117 107.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

575C6D

6C6756

Analogous

56666C

575C6D

5C566C

Triadic

575C6D

6C565B

5B6C56

Split-Comp.

575C6D

6C5C56

666C56

Tetradic

575C6D

6C5666

6C6756

566C5C

Contrast Matrix WCAG 2.1 Contrast

575C6D	49393E	1A8B1C	9BA42D	C1BF61
—	1.6 Fail	1.5 Fail	2.5 Fail	3.5 AA Large
1.6 Fail	—	2.5 Fail	4.0 AA Large	5.6 AA
1.5 Fail	2.5 Fail	—	1.6 Fail	2.3 Fail
2.5 Fail	4.0 AA Large	1.6 Fail	—	1.4 Fail
3.5 AA Large	5.6 AA	2.3 Fail	1.4 Fail	—

White BG

6.7AA

10.8AAA

4.4AA Large

2.7Fail

1.9Fail

Black BG

3.2AA Large

1.9Fail

4.8AA

7.7AAA

10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

595969

42423D

4B4C37

9F9F4A

C0C078

Deuteranopia

595968

43443D

443C3D

9E9E51

C0C07D

Tritanopia

576665

483C3C

204C51

9B6166

C18A8E

Achromatopsia

5C5C5C

3E3E3E

5D5D5D

949494

B5B5B5

Shades & Tints Shades & Tints

#575C6D

Dark

Light

#49393E

Dark

Light

#1A8B1C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #575c6d;
  --color-2: #49393e;
  --color-3: #1a8b1c;
  --color-4: #9ba42d;
  --color-5: #c1bf61;
}

SCSS

$color-1: #575c6d;
$color-2: #49393e;
$color-3: #1a8b1c;
$color-4: #9ba42d;
$color-5: #c1bf61;

TAILWIND

colors: {
  'brand-1': '#575c6d',
  'brand-2': '#49393e',
  'brand-3': '#1a8b1c',
  'brand-4': '#9ba42d',
  'brand-5': '#c1bf61',
}

RGB Array

[87, 92, 109], [73, 57, 62], [26, 139, 28], [155, 164, 45], [193, 191, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #575C6D, #49393E, #1A8B1C, #9BA42D, #C1BF61 is ideal for: tech websites, dark mode UIs, game UIs. 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: #575c6d; --color-2: #49393e; --color-3: #1a8b1c; --color-4: #9ba42d; --color-5: #c1bf61. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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