← Back to Editor

#3C568B · #89927D · #A79B8B · #A7B5B6 · #E8DBC4

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

#3C568B

Indigo · DarkSlateBlue · Prussian Blue

HEX
#3C568B
RGB
rgb(60, 86, 139)
HSL
hsl(220, 40%, 39%)
HSB
hsb(220, 57%, 55%)
CMYK
cmyk(57%, 38%, 0%, 45%)
Oklch
oklch(45.8% 0.092 263.4)

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

#89927D

Grass Green · Gray · Warm Gray

HEX
#89927D
RGB
rgb(137, 146, 125)
HSL
hsl(86, 9%, 53%)
HSB
hsb(86, 14%, 57%)
CMYK
cmyk(6%, 0%, 14%, 43%)
Oklch
oklch(64.7% 0.032 126.2)

Traditional「Grass Green」· Paint「Warm Gray」· Creative Urban Concrete

#A79B8B

Ginger · DarkGray · Warm Sun

HEX
#A79B8B
RGB
rgb(167, 155, 139)
HSL
hsl(34, 14%, 60%)
HSB
hsb(34, 17%, 65%)
CMYK
cmyk(0%, 7%, 17%, 35%)
Oklch
oklch(69.5% 0.027 75.2)

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

#A7B5B6

Sky Blue · DarkGray · Silver Sand

HEX
#A7B5B6
RGB
rgb(167, 181, 182)
HSL
hsl(184, 9%, 68%)
HSB
hsb(184, 8%, 71%)
CMYK
cmyk(8%, 1%, 0%, 29%)
Oklch
oklch(76.3% 0.016 202.0)

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

#E8DBC4

Goose Yellow · Wheat · Peach Orange

HEX
#E8DBC4
RGB
rgb(232, 219, 196)
HSL
hsl(38, 44%, 84%)
HSB
hsb(38, 16%, 91%)
CMYK
cmyk(0%, 6%, 16%, 9%)
Oklch
oklch(89.6% 0.034 82.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C568B
8B713C

Analogous

3C7E8B
3C568B
493C8B

Triadic

3C568B
8B3C56
568B3C

Split-Comp.

3C568B
8B493C
7E8B3C

Tetradic

3C568B
8B3C7E
8B713C
3C8B49

Contrast Matrix WCAG 2.1 Contrast

3C568B
89927D
A79B8B
A7B5B6
E8DBC4
—
2.2
Fail
2.7
Fail
3.4
AA Large
5.3
AA
2.2
Fail
—
1.2
Fail
1.5
Fail
2.4
Fail
2.7
Fail
1.2
Fail
—
1.3
Fail
2.0
Fail
3.4
AA Large
1.5
Fail
1.3
Fail
—
1.5
Fail
5.3
AA
2.4
Fail
2.0
Fail
1.5
Fail
—
White BG
7.3AAA
3.2AA Large
2.7Fail
2.1Fail
1.4Fail
Black BG
2.9Fail
6.5AA
7.7AAA
9.9AAA
15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47477E
8D8D82
A2A28F
ADADB6
E2E2CA

Deuteranopia

46447B
8C8C83
A3A390
ACABB6
E3E4CB

Tritanopia

3D7472
898687
A69293
A8B6B6
E7CECF

Achromatopsia

545454
8D8D8D
9D9D9D
B1B1B1
DCDCDC

Shades & Tints Shades & Tints

#3C568B

Dark
Light

#89927D

Dark
Light

#A79B8B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c568b;
  --color-2: #89927d;
  --color-3: #a79b8b;
  --color-4: #a7b5b6;
  --color-5: #e8dbc4;
}

SCSS

$color-1: #3c568b;
$color-2: #89927d;
$color-3: #a79b8b;
$color-4: #a7b5b6;
$color-5: #e8dbc4;

TAILWIND

colors: {
  'brand-1': '#3c568b',
  'brand-2': '#89927d',
  'brand-3': '#a79b8b',
  'brand-4': '#a7b5b6',
  'brand-5': '#e8dbc4',
}

RGB Array

[60, 86, 139], [137, 146, 125], [167, 155, 139], [167, 181, 182], [232, 219, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C568B, #89927D, #A79B8B, #A7B5B6, #E8DBC4 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: #3c568b; --color-2: #89927d; --color-3: #a79b8b; --color-4: #a7b5b6; --color-5: #e8dbc4. 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