← Back to Editor

#3D3935 · #594C3E · #556B67 · #818776 · #C9BC9F

cool

A 5-color cool 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

#3D3935

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3D3935
RGB
rgb(61, 57, 53)
HSL
hsl(30, 7%, 22%)
HSB
hsb(30, 13%, 24%)
CMYK
cmyk(0%, 7%, 13%, 76%)
Oklch
oklch(34.7% 0.009 67.5)

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

#594C3E

Ochre · DarkOliveGreen · Amber Brown

HEX
#594C3E
RGB
rgb(89, 76, 62)
HSL
hsl(31, 18%, 30%)
HSB
hsb(31, 30%, 35%)
CMYK
cmyk(0%, 15%, 30%, 65%)
Oklch
oklch(42.5% 0.028 69.0)

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

#556B67

Mineral Blue · DimGray · Mint Ice

HEX
#556B67
RGB
rgb(85, 107, 103)
HSL
hsl(169, 11%, 38%)
HSB
hsb(169, 21%, 42%)
CMYK
cmyk(21%, 0%, 4%, 58%)
Oklch
oklch(50.9% 0.027 182.9)

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

#818776

Ink Gray · Gray · Warm Gray

HEX
#818776
RGB
rgb(129, 135, 118)
HSL
hsl(81, 7%, 50%)
HSB
hsb(81, 13%, 53%)
CMYK
cmyk(4%, 0%, 13%, 47%)
Oklch
oklch(61.3% 0.026 123.0)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#C9BC9F

Goose Yellow · Tan · Sunflower

HEX
#C9BC9F
RGB
rgb(201, 188, 159)
HSL
hsl(41, 28%, 71%)
HSB
hsb(41, 21%, 79%)
CMYK
cmyk(0%, 6%, 21%, 21%)
Oklch
oklch(79.8% 0.042 86.7)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D3935
34383C

Analogous

3C3434
3D3935
3C3C34

Triadic

3D3935
343C38
38343C

Split-Comp.

3D3935
343C3C
34343C

Tetradic

3D3935
343C34
34383C
3C343C

Contrast Matrix WCAG 2.1 Contrast

3D3935
594C3E
556B67
818776
C9BC9F
—
1.4
Fail
2.0
Fail
3.1
AA Large
6.1
AA
1.4
Fail
—
1.5
Fail
2.2
Fail
4.4
AA Large
2.0
Fail
1.5
Fail
—
1.5
Fail
3.0
AA Large
3.1
AA Large
2.2
Fail
1.5
Fail
—
2.0
Fail
6.1
AA
4.4
AA Large
3.0
AA Large
2.0
Fail
—
White BG
11.4AAA
8.3AAA
5.7AA
3.7AA Large
1.9Fail
Black BG
1.8Fail
2.5Fail
3.7AA Large
5.7AA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B36
535341
5F5F68
84847A
C3C3A6

Deuteranopia

3C3C36
545542
5D5C68
83837B
C4C5A8

Tritanopia

3D3737
584445
566969
817D7E
C8ACAD

Achromatopsia

3A3A3A
4E4E4E
646464
838383
BDBDBD

Shades & Tints Shades & Tints

#3D3935

Dark
Light

#594C3E

Dark
Light

#556B67

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d3935;
  --color-2: #594c3e;
  --color-3: #556b67;
  --color-4: #818776;
  --color-5: #c9bc9f;
}

SCSS

$color-1: #3d3935;
$color-2: #594c3e;
$color-3: #556b67;
$color-4: #818776;
$color-5: #c9bc9f;

TAILWIND

colors: {
  'brand-1': '#3d3935',
  'brand-2': '#594c3e',
  'brand-3': '#556b67',
  'brand-4': '#818776',
  'brand-5': '#c9bc9f',
}

RGB Array

[61, 57, 53], [89, 76, 62], [85, 107, 103], [129, 135, 118], [201, 188, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #3D3935, #594C3E, #556B67, #818776, #C9BC9F 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: #3d3935; --color-2: #594c3e; --color-3: #556b67; --color-4: #818776; --color-5: #c9bc9f. 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 cool-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