#8DB572 + #579AB3 + #3B658C + #314973 + #503266 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8DB572

Celadon · DarkSeaGreen · Olive Green

HEX

#8DB572

RGB

rgb(141, 181, 114)

HSL

hsl(96, 31%, 58%)

HSB

hsb(96, 37%, 71%)

CMYK

cmyk(22%, 0%, 37%, 29%)

Oklch

oklch(72.7% 0.102 133.5)

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

#579AB3

Slate Blue · CadetBlue · Lake Green

HEX

#579AB3

RGB

rgb(87, 154, 179)

HSL

hsl(196, 38%, 52%)

HSB

hsb(196, 51%, 70%)

CMYK

cmyk(51%, 14%, 0%, 30%)

Oklch

oklch(65.1% 0.078 224.3)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#3B658C

Slate Blue · DarkSlateBlue · Prussian Blue

HEX

#3B658C

RGB

rgb(59, 101, 140)

HSL

hsl(209, 41%, 39%)

HSB

hsb(209, 58%, 55%)

CMYK

cmyk(58%, 28%, 0%, 45%)

Oklch

oklch(49.4% 0.079 248.0)

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

#314973

Indigo · DarkSlateBlue · Prussian Blue

HEX

#314973

RGB

rgb(49, 73, 115)

HSL

hsl(218, 40%, 32%)

HSB

hsb(218, 57%, 45%)

CMYK

cmyk(57%, 37%, 0%, 55%)

Oklch

oklch(40.7% 0.077 261.0)

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

#503266

Dark Plum · DarkSlateBlue · Eggplant

HEX

#503266

RGB

rgb(80, 50, 102)

HSL

hsl(275, 34%, 30%)

HSB

hsb(275, 51%, 40%)

CMYK

cmyk(22%, 51%, 0%, 60%)

Oklch

oklch(37.7% 0.092 309.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8DB572

9B73B5

Analogous

AEB573

8DB572

73B579

Triadic

8DB572

738DB5

B5738D

Split-Comp.

8DB572

7973B5

B573AE

Tetradic

8DB572

73AEB5

9B73B5

B57973

Contrast Matrix WCAG 2.1 Contrast

8DB572	579AB3	3B658C	314973	503266
—	1.3 Fail	2.6 Fail	3.9 AA Large	4.5 AA
1.3 Fail	—	1.9 Fail	2.9 Fail	3.4 AA Large
2.6 Fail	1.9 Fail	—	1.5 Fail	1.7 Fail
3.9 AA Large	2.9 Fail	1.5 Fail	—	1.2 Fail
4.5 AA	3.4 AA Large	1.7 Fail	1.2 Fail	—

White BG

2.3Fail

3.1AA Large

6.1AA

9.0AAA

10.6AAA

Black BG

9.0AAA

6.7AA

3.4AA Large

2.3Fail

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9F82

7475AD

4D4E83

3B3C69

434359

Deuteranopia

9C9986

706BAC

4B4880

3A3866

454756

Tritanopia

8F8F92

5AA8A7

3D7B79

32615F

4F4F4D

Achromatopsia

A1A1A1

898989

5D5D5D

474747

414141

Shades & Tints Shades & Tints

#8DB572

Dark

Light

#579AB3

Dark

Light

#3B658C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8db572;
  --color-2: #579ab3;
  --color-3: #3b658c;
  --color-4: #314973;
  --color-5: #503266;
}

SCSS

$color-1: #8db572;
$color-2: #579ab3;
$color-3: #3b658c;
$color-4: #314973;
$color-5: #503266;

TAILWIND

colors: {
  'brand-1': '#8db572',
  'brand-2': '#579ab3',
  'brand-3': '#3b658c',
  'brand-4': '#314973',
  'brand-5': '#503266',
}

RGB Array

[141, 181, 114], [87, 154, 179], [59, 101, 140], [49, 73, 115], [80, 50, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8DB572, #579AB3, #3B658C, #314973, #503266 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: #8db572; --color-2: #579ab3; --color-3: #3b658c; --color-4: #314973; --color-5: #503266. 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