#56787D + #8F8575 + #B5B659 + #BBDE68 + #B2FF5E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#56787D

Slate Blue · DimGray · Mint Ice

HEX

#56787D

RGB

rgb(86, 120, 125)

HSL

hsl(188, 18%, 41%)

HSB

hsb(188, 31%, 49%)

CMYK

cmyk(31%, 4%, 0%, 51%)

Oklch

oklch(54.9% 0.039 207.4)

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

#8F8575

Ginger · Gray · Warm Sun

HEX

#8F8575

RGB

rgb(143, 133, 117)

HSL

hsl(37, 10%, 51%)

HSB

hsb(37, 18%, 56%)

CMYK

cmyk(0%, 7%, 18%, 44%)

Oklch

oklch(62.1% 0.026 79.7)

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

#B5B659

Autumn Sage · Tan · Sunflower

HEX

#B5B659

RGB

rgb(181, 182, 89)

HSL

hsl(61, 39%, 53%)

HSB

hsb(61, 51%, 71%)

CMYK

cmyk(1%, 0%, 51%, 29%)

Oklch

oklch(75.6% 0.117 109.4)

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

#BBDE68

Willow Green · Tan · Apple Green

HEX

#BBDE68

RGB

rgb(187, 222, 104)

HSL

hsl(78, 64%, 64%)

HSB

hsb(78, 53%, 87%)

CMYK

cmyk(16%, 0%, 53%, 13%)

Oklch

oklch(85.1% 0.150 123.3)

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

#B2FF5E

Willow Green · GreenYellow · Apple Green

HEX

#B2FF5E

RGB

rgb(178, 255, 94)

HSL

hsl(89, 100%, 68%)

HSB

hsb(89, 63%, 100%)

CMYK

cmyk(30%, 0%, 63%, 0%)

Oklch

oklch(91.9% 0.205 131.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

56787D

7B5B56

Analogous

567B6E

56787D

56647B

Triadic

56787D

7B5676

767B56

Split-Comp.

56787D

7B5664

7B6E56

Tetradic

56787D

6E567B

7B5B56

647B56

Contrast Matrix WCAG 2.1 Contrast

56787D	8F8575	B5B659	BBDE68	B2FF5E
—	1.3 Fail	2.2 Fail	3.1 AA Large	4.0 AA Large
1.3 Fail	—	1.7 Fail	2.4 Fail	3.0 AA Large
2.2 Fail	1.7 Fail	—	1.4 Fail	1.8 Fail
3.1 AA Large	2.4 Fail	1.4 Fail	—	1.3 Fail
4.0 AA Large	3.0 AA Large	1.8 Fail	1.3 Fail	—

White BG

4.8AA

3.6AA Large

2.1Fail

1.5Fail

1.2Fail

Black BG

4.4AA Large

5.8AA

9.8AAA

13.8AAA

17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

65657C

8B8B79

B5B570

CACA85

D3D485

Deuteranopia

63607C

8B8C7A

B5B575

C8C68B

CFC98E

Tritanopia

587B7B

8F7C7D

B58185

BD9BA0

B6A4AA

Achromatopsia

6E6E6E

868686

ABABAB

C6C6C6

D6D6D6

Shades & Tints Shades & Tints

#56787D

Dark

Light

#8F8575

Dark

Light

#B5B659

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #56787d;
  --color-2: #8f8575;
  --color-3: #b5b659;
  --color-4: #bbde68;
  --color-5: #b2ff5e;
}

SCSS

$color-1: #56787d;
$color-2: #8f8575;
$color-3: #b5b659;
$color-4: #bbde68;
$color-5: #b2ff5e;

TAILWIND

colors: {
  'brand-1': '#56787d',
  'brand-2': '#8f8575',
  'brand-3': '#b5b659',
  'brand-4': '#bbde68',
  'brand-5': '#b2ff5e',
}

RGB Array

[86, 120, 125], [143, 133, 117], [181, 182, 89], [187, 222, 104], [178, 255, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #56787D, #8F8575, #B5B659, #BBDE68, #B2FF5E 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: #56787d; --color-2: #8f8575; --color-3: #b5b659; --color-4: #bbde68; --color-5: #b2ff5e. 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