← Back to Editor

#D1DCB1 · #3D3131 · #F7F5F6 · #2C4C47 · #302E33

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

#D1DCB1

Willow Green · LightGray · Apple Green

HEX
#D1DCB1
RGB
rgb(209, 220, 177)
HSL
hsl(75, 38%, 78%)
HSB
hsb(75, 20%, 86%)
CMYK
cmyk(5%, 0%, 20%, 14%)
Oklch
oklch(87.5% 0.058 119.3)

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

#3D3131

Crimson · DarkSlateGray · Wine Red

HEX
#3D3131
RGB
rgb(61, 49, 49)
HSL
hsl(0, 11%, 22%)
HSB
hsb(0, 20%, 24%)
CMYK
cmyk(0%, 20%, 20%, 76%)
Oklch
oklch(32.6% 0.017 18.1)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#F7F5F6

Rouge · Snow · Cherry Blossom

HEX
#F7F5F6
RGB
rgb(247, 245, 246)
HSL
hsl(330, 11%, 96%)
HSB
hsb(330, 1%, 97%)
CMYK
cmyk(0%, 1%, 0%, 3%)
Oklch
oklch(97.2% 0.002 345.2)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#2C4C47

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#2C4C47
RGB
rgb(44, 76, 71)
HSL
hsl(171, 27%, 24%)
HSB
hsb(171, 42%, 30%)
CMYK
cmyk(42%, 0%, 7%, 70%)
Oklch
oklch(39.0% 0.039 183.3)

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

#302E33

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#302E33
RGB
rgb(48, 46, 51)
HSL
hsl(264, 5%, 19%)
HSB
hsb(264, 10%, 20%)
CMYK
cmyk(6%, 10%, 0%, 80%)
Oklch
oklch(30.5% 0.009 303.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1DCB1
BCB2DC

Analogous

DCD2B2
D1DCB1
BCDCB2

Triadic

D1DCB1
B2D2DC
DCB2D2

Split-Comp.

D1DCB1
B2BCDC
D2B2DC

Tetradic

D1DCB1
B2DCD2
BCB2DC
DCB2BC

Contrast Matrix WCAG 2.1 Contrast

D1DCB1
3D3131
F7F5F6
2C4C47
302E33
—
8.7
AAA
1.3
Fail
6.5
AA
9.3
AAA
8.7
AAA
—
11.5
AAA
1.3
Fail
1.1
Fail
1.3
Fail
11.5
AAA
—
8.7
AAA
12.4
AAA
6.5
AA
1.3
Fail
8.7
AAA
—
1.4
Fail
9.3
AAA
1.1
Fail
12.4
AAA
1.4
Fail
—
White BG
1.4Fail
12.5AAA
1.1Fail
9.4AAA
13.4AAA
Black BG
14.6AAA
1.7Fail
19.3AAA
2.2Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6BB
383831
F6F6F6
3A3A48
2F2F32

Deuteranopia

D5D4BE
393931
F6F6F6
383649
2F2F31

Tritanopia

D2C4C5
3C3131
F7F6F6
2E4949
303131

Achromatopsia

D4D4D4
353535
F6F6F6
424242
2F2F2F

Shades & Tints Shades & Tints

#D1DCB1

Dark
Light

#3D3131

Dark
Light

#F7F5F6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1dcb1;
  --color-2: #3d3131;
  --color-3: #f7f5f6;
  --color-4: #2c4c47;
  --color-5: #302e33;
}

SCSS

$color-1: #d1dcb1;
$color-2: #3d3131;
$color-3: #f7f5f6;
$color-4: #2c4c47;
$color-5: #302e33;

TAILWIND

colors: {
  'brand-1': '#d1dcb1',
  'brand-2': '#3d3131',
  'brand-3': '#f7f5f6',
  'brand-4': '#2c4c47',
  'brand-5': '#302e33',
}

RGB Array

[209, 220, 177], [61, 49, 49], [247, 245, 246], [44, 76, 71], [48, 46, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #D1DCB1, #3D3131, #F7F5F6, #2C4C47, #302E33 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: #d1dcb1; --color-2: #3d3131; --color-3: #f7f5f6; --color-4: #2c4c47; --color-5: #302e33. 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