← Back to Editor

#362D2D · #E8E3E3 · #FFFFFF · #1A1111 · #5C5151

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#362D2D

Crimson · DarkSlateGray · Dark Stone

HEX
#362D2D
RGB
rgb(54, 45, 45)
HSL
hsl(0, 9%, 19%)
HSB
hsb(0, 17%, 21%)
CMYK
cmyk(0%, 17%, 17%, 79%)
Oklch
oklch(30.7% 0.013 17.9)

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

#E8E3E3

Peach Pink · Linen · Cherry Blossom

HEX
#E8E3E3
RGB
rgb(232, 227, 227)
HSL
hsl(0, 10%, 90%)
HSB
hsb(0, 2%, 91%)
CMYK
cmyk(0%, 2%, 2%, 9%)
Oklch
oklch(92.0% 0.005 17.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#1A1111

Crimson · Black · Deep Berry

HEX
#1A1111
RGB
rgb(26, 17, 17)
HSL
hsl(0, 21%, 8%)
HSB
hsb(0, 35%, 10%)
CMYK
cmyk(0%, 35%, 35%, 90%)
Oklch
oklch(18.9% 0.015 18.6)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#5C5151

Ink Gray · DimGray · Charcoal

HEX
#5C5151
RGB
rgb(92, 81, 81)
HSL
hsl(0, 6%, 34%)
HSB
hsb(0, 12%, 36%)
CMYK
cmyk(0%, 12%, 12%, 64%)
Oklch
oklch(44.6% 0.015 17.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

362D2D
2C3535

Analogous

352C30
362D2D
35302C

Triadic

362D2D
2C352C
2C2C35

Split-Comp.

362D2D
2C3530
2C3035

Tetradic

362D2D
30352C
2C3535
302C35

Contrast Matrix WCAG 2.1 Contrast

362D2D
E8E3E3
FFFFFF
1A1111
5C5151
—
10.5
AAA
13.4
AAA
1.4
Fail
1.8
Fail
10.5
AAA
—
1.3
Fail
14.6
AAA
6.0
AA
13.4
AAA
1.3
Fail
—
18.5
AAA
7.6
AAA
1.4
Fail
14.6
AAA
18.5
AAA
—
2.4
Fail
1.8
Fail
6.0
AA
7.6
AAA
2.4
Fail
—
White BG
13.4AAA
1.3Fail
1.0Fail
18.5AAA
7.6AAA
Black BG
1.6Fail
16.5AAA
21.0AAA
1.1Fail
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

32322D
E6E6E3
FFFFFF
161611
575751

Deuteranopia

33332D
E6E6E3
FFFFFF
171711
585951

Tritanopia

362D2D
E8E3E3
FFFFFF
1A1111
5B5151

Achromatopsia

303030
E4E4E4
FFFFFF
141414
545454

Shades & Tints Shades & Tints

#362D2D

Dark
Light

#E8E3E3

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #362d2d;
  --color-2: #e8e3e3;
  --color-3: #ffffff;
  --color-4: #1a1111;
  --color-5: #5c5151;
}

SCSS

$color-1: #362d2d;
$color-2: #e8e3e3;
$color-3: #ffffff;
$color-4: #1a1111;
$color-5: #5c5151;

TAILWIND

colors: {
  'brand-1': '#362d2d',
  'brand-2': '#e8e3e3',
  'brand-3': '#ffffff',
  'brand-4': '#1a1111',
  'brand-5': '#5c5151',
}

RGB Array

[54, 45, 45], [232, 227, 227], [255, 255, 255], [26, 17, 17], [92, 81, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #362D2D, #E8E3E3, #FFFFFF, #1A1111, #5C5151 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: #362d2d; --color-2: #e8e3e3; --color-3: #ffffff; --color-4: #1a1111; --color-5: #5c5151. 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