#582B5C + #5E6C78 + #62AC93 + #8FC287 + #BCC983 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#582B5C

Dark Plum · DarkSlateBlue · Eggplant

HEX

#582B5C

RGB

rgb(88, 43, 92)

HSL

hsl(295, 36%, 26%)

HSB

hsb(295, 53%, 36%)

CMYK

cmyk(4%, 53%, 0%, 64%)

Oklch

oklch(37.0% 0.097 324.2)

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

#5E6C78

Slate Blue · DimGray · Navy Blue

HEX

#5E6C78

RGB

rgb(94, 108, 120)

HSL

hsl(208, 12%, 42%)

HSB

hsb(208, 22%, 47%)

CMYK

cmyk(22%, 10%, 0%, 53%)

Oklch

oklch(52.4% 0.025 244.1)

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

#62AC93

Mineral Blue · CadetBlue · Lake Green

HEX

#62AC93

RGB

rgb(98, 172, 147)

HSL

hsl(160, 31%, 53%)

HSB

hsb(160, 43%, 67%)

CMYK

cmyk(43%, 0%, 15%, 33%)

Oklch

oklch(68.9% 0.084 170.0)

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

#8FC287

Celadon · DarkSeaGreen · Apple Green

HEX

#8FC287

RGB

rgb(143, 194, 135)

HSL

hsl(112, 33%, 65%)

HSB

hsb(112, 30%, 76%)

CMYK

cmyk(26%, 0%, 30%, 24%)

Oklch

oklch(76.3% 0.098 141.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#BCC983

Willow Green · Tan · Apple Green

HEX

#BCC983

RGB

rgb(188, 201, 131)

HSL

hsl(71, 39%, 65%)

HSB

hsb(71, 35%, 79%)

CMYK

cmyk(6%, 0%, 35%, 21%)

Oklch

oklch(80.9% 0.093 117.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

582B5C

2E5A2A

Analogous

3E2A5A

582B5C

5A2A46

Triadic

582B5C

5A562A

2A5A56

Split-Comp.

582B5C

465A2A

2A5A3E

Tetradic

582B5C

5A3E2A

2E5A2A

2A465A

Contrast Matrix WCAG 2.1 Contrast

582B5C	5E6C78	62AC93	8FC287	BCC983
—	2.0 Fail	4.1 AA Large	5.3 AA	6.2 AA
2.0 Fail	—	2.0 Fail	2.6 Fail	3.0 AA Large
4.1 AA Large	2.0 Fail	—	1.3 Fail	1.5 Fail
5.3 AA	2.6 Fail	1.3 Fail	—	1.2 Fail
6.2 AA	3.0 AA Large	1.5 Fail	1.2 Fail	—

White BG

11.0AAA

5.4AA

2.7Fail

2.1Fail

1.8Fail

Black BG

1.9Fail

3.9AA Large

7.8AAA

10.2AAA

11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

454450

646475

828399

A5A695

C2C294

Deuteranopia

474B4D

636274

7E789B

A29E99

C1C098

Tritanopia

564745

5F7372

669E9F

92A1A3

BDA1A4

Achromatopsia

3E3E3E

696969

939393

ACACAC

BDBDBD

Shades & Tints Shades & Tints

#582B5C

Dark

Light

#5E6C78

Dark

Light

#62AC93

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #582b5c;
  --color-2: #5e6c78;
  --color-3: #62ac93;
  --color-4: #8fc287;
  --color-5: #bcc983;
}

SCSS

$color-1: #582b5c;
$color-2: #5e6c78;
$color-3: #62ac93;
$color-4: #8fc287;
$color-5: #bcc983;

TAILWIND

colors: {
  'brand-1': '#582b5c',
  'brand-2': '#5e6c78',
  'brand-3': '#62ac93',
  'brand-4': '#8fc287',
  'brand-5': '#bcc983',
}

RGB Array

[88, 43, 92], [94, 108, 120], [98, 172, 147], [143, 194, 135], [188, 201, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #582B5C, #5E6C78, #62AC93, #8FC287, #BCC983 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: #582b5c; --color-2: #5e6c78; --color-3: #62ac93; --color-4: #8fc287; --color-5: #bcc983. 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