← Back to Editor

#565F68 · #A3AAB0 · #D5C3B5 · #E3E1D5 · #776A5A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#565F68

Indigo · DimGray · Charcoal

HEX
#565F68
RGB
rgb(86, 95, 104)
HSL
hsl(210, 9%, 37%)
HSB
hsb(210, 17%, 41%)
CMYK
cmyk(17%, 9%, 0%, 59%)
Oklch
oklch(48.1% 0.018 248.2)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#A3AAB0

Sky Blue · DarkGray · Silver Sand

HEX
#A3AAB0
RGB
rgb(163, 170, 176)
HSL
hsl(208, 8%, 66%)
HSB
hsb(208, 7%, 69%)
CMYK
cmyk(7%, 3%, 0%, 31%)
Oklch
oklch(73.4% 0.012 243.7)

Traditional「Sky Blue」· Paint「Silver Sand」· Creative Urban Concrete

#D5C3B5

Apricot · Silver · Peach Orange

HEX
#D5C3B5
RGB
rgb(213, 195, 181)
HSL
hsl(26, 28%, 77%)
HSB
hsb(26, 15%, 84%)
CMYK
cmyk(0%, 8%, 15%, 16%)
Oklch
oklch(82.8% 0.028 60.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#E3E1D5

Fresh Green · LightGray · Lemon Cream

HEX
#E3E1D5
RGB
rgb(227, 225, 213)
HSL
hsl(51, 20%, 86%)
HSB
hsb(51, 6%, 89%)
CMYK
cmyk(0%, 1%, 6%, 11%)
Oklch
oklch(90.8% 0.016 99.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#776A5A

Ochre · DimGray · Amber Brown

HEX
#776A5A
RGB
rgb(119, 106, 90)
HSL
hsl(33, 14%, 41%)
HSB
hsb(33, 24%, 47%)
CMYK
cmyk(0%, 11%, 24%, 53%)
Oklch
oklch(53.2% 0.029 72.9)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

565F68
675E56

Analogous

566767
565F68
565667

Triadic

565F68
67565E
5E6756

Split-Comp.

565F68
675656
676756

Tetradic

565F68
675667
675E56
566756

Contrast Matrix WCAG 2.1 Contrast

565F68
A3AAB0
D5C3B5
E3E1D5
776A5A
—
2.8
Fail
3.8
AA Large
4.9
AA
1.2
Fail
2.8
Fail
—
1.4
Fail
1.8
Fail
2.2
Fail
3.8
AA Large
1.4
Fail
—
1.3
Fail
3.1
AA Large
4.9
AA
1.8
Fail
1.3
Fail
—
4.0
AA Large
1.2
Fail
2.2
Fail
3.1
AA Large
4.0
AA Large
—
White BG
6.5AA
2.4Fail
1.7Fail
1.3Fail
5.3AA
Black BG
3.2AA Large
8.9AAA
12.3AAA
16.0AAA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A66
A6A6AF
CDCDB8
E2E2D8
71715E

Deuteranopia

595965
A6A5AE
CED0B9
E2E2D9
72735F

Tritanopia

566464
A3ADAD
D4BBBC
E3DADB
766162

Achromatopsia

5D5D5D
A9A9A9
C7C7C7
E0E0E0
6C6C6C

Shades & Tints Shades & Tints

#565F68

Dark
Light

#A3AAB0

Dark
Light

#D5C3B5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #565f68;
  --color-2: #a3aab0;
  --color-3: #d5c3b5;
  --color-4: #e3e1d5;
  --color-5: #776a5a;
}

SCSS

$color-1: #565f68;
$color-2: #a3aab0;
$color-3: #d5c3b5;
$color-4: #e3e1d5;
$color-5: #776a5a;

TAILWIND

colors: {
  'brand-1': '#565f68',
  'brand-2': '#a3aab0',
  'brand-3': '#d5c3b5',
  'brand-4': '#e3e1d5',
  'brand-5': '#776a5a',
}

RGB Array

[86, 95, 104], [163, 170, 176], [213, 195, 181], [227, 225, 213], [119, 106, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #565F68, #A3AAB0, #D5C3B5, #E3E1D5, #776A5A is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #565f68; --color-2: #a3aab0; --color-3: #d5c3b5; --color-4: #e3e1d5; --color-5: #776a5a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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