← Back to Editor

#282D37 · #60817E · #78A2A0 · #C8CAB2 · #3A485F

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 LibraryData Visualization

Color Details Color Details

#282D37

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#282D37
RGB
rgb(40, 45, 55)
HSL
hsl(220, 16%, 19%)
HSB
hsb(220, 27%, 22%)
CMYK
cmyk(27%, 18%, 0%, 78%)
Oklch
oklch(29.7% 0.020 264.2)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#60817E

Mineral Blue · SlateGray · Mint Ice

HEX
#60817E
RGB
rgb(96, 129, 126)
HSL
hsl(175, 15%, 44%)
HSB
hsb(175, 26%, 51%)
CMYK
cmyk(26%, 0%, 2%, 49%)
Oklch
oklch(57.7% 0.038 189.2)

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

#78A2A0

Mineral Blue · CadetBlue · Lake Green

HEX
#78A2A0
RGB
rgb(120, 162, 160)
HSL
hsl(177, 18%, 55%)
HSB
hsb(177, 26%, 64%)
CMYK
cmyk(26%, 0%, 1%, 36%)
Oklch
oklch(68.1% 0.046 192.5)

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

#C8CAB2

Fresh Green · Silver · Sunflower

HEX
#C8CAB2
RGB
rgb(200, 202, 178)
HSL
hsl(65, 18%, 75%)
HSB
hsb(65, 12%, 79%)
CMYK
cmyk(1%, 0%, 12%, 21%)
Oklch
oklch(83.1% 0.033 111.0)

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

#3A485F

Indigo · DarkSlateGray · Prussian Blue

HEX
#3A485F
RGB
rgb(58, 72, 95)
HSL
hsl(217, 24%, 30%)
HSB
hsb(217, 39%, 37%)
CMYK
cmyk(39%, 24%, 0%, 63%)
Oklch
oklch(39.9% 0.043 260.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

282D37
383329

Analogous

293638
282D37
2B2938

Triadic

282D37
38292E
2E3829

Split-Comp.

282D37
382B29
363829

Tetradic

282D37
382936
383329
29382B

Contrast Matrix WCAG 2.1 Contrast

282D37
60817E
78A2A0
C8CAB2
3A485F
—
3.2
AA Large
4.9
AA
8.3
AAA
1.5
Fail
3.2
AA Large
—
1.5
Fail
2.5
Fail
2.2
Fail
4.9
AA
1.5
Fail
—
1.7
Fail
3.3
AA Large
8.3
AAA
2.5
Fail
1.7
Fail
—
5.5
AA
1.5
Fail
2.2
Fail
3.3
AA Large
5.5
AA
—
White BG
13.8AAA
4.3AA Large
2.8Fail
1.7Fail
9.2AAA
Black BG
1.5Fail
4.9AA
7.5AAA
12.5AAA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A35
6E6F7F
8A8BA0
C9C9B8
404059

Deuteranopia

2A2A34
6C6A7F
8885A1
C9C9B9
3F3E58

Tritanopia

283332
627F7F
7AA1A1
C8BCBD
3B5554

Achromatopsia

2D2D2D
777777
959595
C7C7C7
464646

Shades & Tints Shades & Tints

#282D37

Dark
Light

#60817E

Dark
Light

#78A2A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #282d37;
  --color-2: #60817e;
  --color-3: #78a2a0;
  --color-4: #c8cab2;
  --color-5: #3a485f;
}

SCSS

$color-1: #282d37;
$color-2: #60817e;
$color-3: #78a2a0;
$color-4: #c8cab2;
$color-5: #3a485f;

TAILWIND

colors: {
  'brand-1': '#282d37',
  'brand-2': '#60817e',
  'brand-3': '#78a2a0',
  'brand-4': '#c8cab2',
  'brand-5': '#3a485f',
}

RGB Array

[40, 45, 55], [96, 129, 126], [120, 162, 160], [200, 202, 178], [58, 72, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #282D37, #60817E, #78A2A0, #C8CAB2, #3A485F 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: #282d37; --color-2: #60817e; --color-3: #78a2a0; --color-4: #c8cab2; --color-5: #3a485f. 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