← Back to Editor

#333835 · #635F66 · #7C9187 · #94AF86 · #DDECCC

cool

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

#333835

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#333835
RGB
rgb(51, 56, 53)
HSL
hsl(144, 5%, 21%)
HSB
hsb(144, 9%, 22%)
CMYK
cmyk(9%, 0%, 5%, 78%)
Oklch
oklch(33.5% 0.009 159.6)

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

#635F66

Ink Gray · DimGray · Charcoal

HEX
#635F66
RGB
rgb(99, 95, 102)
HSL
hsl(274, 4%, 39%)
HSB
hsb(274, 7%, 40%)
CMYK
cmyk(3%, 7%, 0%, 60%)
Oklch
oklch(49.2% 0.012 311.1)

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

#7C9187

Mineral Blue · Gray · Warm Gray

HEX
#7C9187
RGB
rgb(124, 145, 135)
HSL
hsl(151, 9%, 53%)
HSB
hsb(151, 14%, 57%)
CMYK
cmyk(14%, 0%, 7%, 43%)
Oklch
oklch(63.7% 0.028 165.1)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

#94AF86

Celadon · DarkSeaGreen · Apple Green

HEX
#94AF86
RGB
rgb(148, 175, 134)
HSL
hsl(100, 20%, 61%)
HSB
hsb(100, 23%, 69%)
CMYK
cmyk(15%, 0%, 23%, 31%)
Oklch
oklch(72.2% 0.065 135.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#DDECCC

Willow Green · LightGray · Mint Green

HEX
#DDECCC
RGB
rgb(221, 236, 204)
HSL
hsl(88, 46%, 86%)
HSB
hsb(88, 14%, 93%)
CMYK
cmyk(6%, 0%, 14%, 7%)
Oklch
oklch(92.3% 0.045 127.8)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

333835
383336

Analogous

333833
333835
333838

Triadic

333835
353338
383533

Split-Comp.

333835
383338
383333

Tetradic

333835
333338
383336
383833

Contrast Matrix WCAG 2.1 Contrast

333835
635F66
7C9187
94AF86
DDECCC
—
1.9
Fail
3.6
AA Large
5.0
AA
9.6
AAA
1.9
Fail
—
1.9
Fail
2.6
Fail
5.0
AA
3.6
AA Large
1.9
Fail
—
1.4
Fail
2.7
Fail
5.0
AA
2.6
Fail
1.4
Fail
—
1.9
Fail
9.6
AAA
5.0
AA
2.7
Fail
1.9
Fail
—
White BG
11.9AAA
6.3AA
3.4AA Large
2.4Fail
1.2Fail
Black BG
1.8Fail
3.4AA Large
6.3AA
8.7AAA
16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

353536
616164
858589
A0A090
E3E4D4

Deuteranopia

353536
626264
84828A
9E9C92
E3E2D6

Tritanopia

333636
636363
7D8B8C
959899
DEDADB

Achromatopsia

363636
616161
8A8A8A
A2A2A2
E4E4E4

Shades & Tints Shades & Tints

#333835

Dark
Light

#635F66

Dark
Light

#7C9187

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #333835;
  --color-2: #635f66;
  --color-3: #7c9187;
  --color-4: #94af86;
  --color-5: #ddeccc;
}

SCSS

$color-1: #333835;
$color-2: #635f66;
$color-3: #7c9187;
$color-4: #94af86;
$color-5: #ddeccc;

TAILWIND

colors: {
  'brand-1': '#333835',
  'brand-2': '#635f66',
  'brand-3': '#7c9187',
  'brand-4': '#94af86',
  'brand-5': '#ddeccc',
}

RGB Array

[51, 56, 53], [99, 95, 102], [124, 145, 135], [148, 175, 134], [221, 236, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #333835, #635F66, #7C9187, #94AF86, #DDECCC 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: #333835; --color-2: #635f66; --color-3: #7c9187; --color-4: #94af86; --color-5: #ddeccc. 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