← Back to Editor

#565E61 · #474751 · #637E6D · #B5BD96 · #678F75

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#565E61

Ink Gray · DimGray · Charcoal

HEX
#565E61
RGB
rgb(86, 94, 97)
HSL
hsl(196, 6%, 36%)
HSB
hsb(196, 11%, 38%)
CMYK
cmyk(11%, 3%, 0%, 62%)
Oklch
oklch(47.6% 0.011 222.2)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#474751

Dark Cyan · DarkSlateGray · Charcoal

HEX
#474751
RGB
rgb(71, 71, 81)
HSL
hsl(240, 7%, 30%)
HSB
hsb(240, 12%, 32%)
CMYK
cmyk(12%, 12%, 0%, 68%)
Oklch
oklch(40.2% 0.017 285.6)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#637E6D

Celadon · DimGray · Olive Green

HEX
#637E6D
RGB
rgb(99, 126, 109)
HSL
hsl(142, 12%, 44%)
HSB
hsb(142, 21%, 49%)
CMYK
cmyk(21%, 0%, 13%, 51%)
Oklch
oklch(56.7% 0.041 157.2)

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

#B5BD96

Willow Green · DarkGray · Apple Green

HEX
#B5BD96
RGB
rgb(181, 189, 150)
HSL
hsl(72, 23%, 66%)
HSB
hsb(72, 21%, 74%)
CMYK
cmyk(4%, 0%, 21%, 26%)
Oklch
oklch(78.2% 0.054 117.1)

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

#678F75

Celadon · Gray · Olive Green

HEX
#678F75
RGB
rgb(103, 143, 117)
HSL
hsl(141, 16%, 48%)
HSB
hsb(141, 28%, 56%)
CMYK
cmyk(28%, 0%, 18%, 44%)
Oklch
oklch(61.3% 0.059 155.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

565E61
615956

Analogous

56615F
565E61
565961

Triadic

565E61
61565E
5E6156

Split-Comp.

565E61
615659
615F56

Tetradic

565E61
5F5661
615956
596156

Contrast Matrix WCAG 2.1 Contrast

565E61
474751
637E6D
B5BD96
678F75
—
1.4
Fail
1.5
Fail
3.4
AA Large
1.8
Fail
1.4
Fail
—
2.1
Fail
4.7
AA
2.5
Fail
1.5
Fail
2.1
Fail
—
2.3
Fail
1.2
Fail
3.4
AA Large
4.7
AA
2.3
Fail
—
1.9
Fail
1.8
Fail
2.5
Fail
1.2
Fail
1.9
Fail
—
White BG
6.6AA
9.2AAA
4.4AA Large
2.0Fail
3.6AA Large
Black BG
3.2AA Large
2.3Fail
4.7AA
10.7AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

595A60
47474F
6F6F71
B8B99F
78797B

Deuteranopia

595860
47474E
6D6B72
B8B7A2
76737D

Tritanopia

566060
474D4C
647475
B5A7A9
698081

Achromatopsia

5C5C5C
484848
747474
B6B6B6
808080

Shades & Tints Shades & Tints

#565E61

Dark
Light

#474751

Dark
Light

#637E6D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #565e61;
  --color-2: #474751;
  --color-3: #637e6d;
  --color-4: #b5bd96;
  --color-5: #678f75;
}

SCSS

$color-1: #565e61;
$color-2: #474751;
$color-3: #637e6d;
$color-4: #b5bd96;
$color-5: #678f75;

TAILWIND

colors: {
  'brand-1': '#565e61',
  'brand-2': '#474751',
  'brand-3': '#637e6d',
  'brand-4': '#b5bd96',
  'brand-5': '#678f75',
}

RGB Array

[86, 94, 97], [71, 71, 81], [99, 126, 109], [181, 189, 150], [103, 143, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #565E61, #474751, #637E6D, #B5BD96, #678F75 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: #565e61; --color-2: #474751; --color-3: #637e6d; --color-4: #b5bd96; --color-5: #678f75. 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