← Back to Editor

#2D2822 · #58443B · #9A7C72 · #C0A29A · #D9CFB6

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

#2D2822

Ochre · DarkSlateGray · Cinnamon

HEX
#2D2822
RGB
rgb(45, 40, 34)
HSL
hsl(33, 14%, 15%)
HSB
hsb(33, 24%, 18%)
CMYK
cmyk(0%, 11%, 24%, 82%)
Oklch
oklch(28.0% 0.013 72.3)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#58443B

Tangerine · DarkOliveGreen · Amber Brown

HEX
#58443B
RGB
rgb(88, 68, 59)
HSL
hsl(19, 20%, 29%)
HSB
hsb(19, 33%, 35%)
CMYK
cmyk(0%, 23%, 33%, 65%)
Oklch
oklch(40.5% 0.031 45.5)

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

#9A7C72

Tangerine · Gray · Warm Sun

HEX
#9A7C72
RGB
rgb(154, 124, 114)
HSL
hsl(15, 17%, 53%)
HSB
hsb(15, 26%, 60%)
CMYK
cmyk(0%, 19%, 26%, 40%)
Oklch
oklch(61.2% 0.040 39.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#C0A29A

Peach Pink · DarkGray · Coral Red

HEX
#C0A29A
RGB
rgb(192, 162, 154)
HSL
hsl(13, 23%, 68%)
HSB
hsb(13, 20%, 75%)
CMYK
cmyk(0%, 16%, 20%, 25%)
Oklch
oklch(73.7% 0.037 35.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D9CFB6

Goose Yellow · LightGray · Lemon Cream

HEX
#D9CFB6
RGB
rgb(217, 207, 182)
HSL
hsl(43, 32%, 78%)
HSB
hsb(43, 16%, 85%)
CMYK
cmyk(0%, 5%, 16%, 15%)
Oklch
oklch(85.6% 0.035 88.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D2822
21262C

Analogous

2C2121
2D2822
2B2C21

Triadic

2D2822
212C27
27212C

Split-Comp.

2D2822
212B2C
21212C

Tetradic

2D2822
212C21
21262C
2C212B

Contrast Matrix WCAG 2.1 Contrast

2D2822
58443B
9A7C72
C0A29A
D9CFB6
—
1.6
Fail
3.8
AA Large
6.2
AA
9.4
AAA
1.6
Fail
—
2.4
Fail
3.9
AA Large
5.9
AA
3.8
AA Large
2.4
Fail
—
1.6
Fail
2.5
Fail
6.2
AA
3.9
AA Large
1.6
Fail
—
1.5
Fail
9.4
AAA
5.9
AA
2.5
Fail
1.5
Fail
—
White BG
14.6AAA
9.1AAA
3.8AA Large
2.4Fail
1.5Fail
Black BG
1.4Fail
2.3Fail
5.5AA
8.9AAA
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B23
4F4F3D
8D8D74
B3B39C
D5D5BC

Deuteranopia

2B2C24
51523E
8F9175
B5B79C
D5D6BE

Tritanopia

2D2525
573F3F
987677
BE9D9E
D8C1C2

Achromatopsia

292929
494949
848484
AAAAAA
CFCFCF

Shades & Tints Shades & Tints

#2D2822

Dark
Light

#58443B

Dark
Light

#9A7C72

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d2822;
  --color-2: #58443b;
  --color-3: #9a7c72;
  --color-4: #c0a29a;
  --color-5: #d9cfb6;
}

SCSS

$color-1: #2d2822;
$color-2: #58443b;
$color-3: #9a7c72;
$color-4: #c0a29a;
$color-5: #d9cfb6;

TAILWIND

colors: {
  'brand-1': '#2d2822',
  'brand-2': '#58443b',
  'brand-3': '#9a7c72',
  'brand-4': '#c0a29a',
  'brand-5': '#d9cfb6',
}

RGB Array

[45, 40, 34], [88, 68, 59], [154, 124, 114], [192, 162, 154], [217, 207, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #2D2822, #58443B, #9A7C72, #C0A29A, #D9CFB6 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: #2d2822; --color-2: #58443b; --color-3: #9a7c72; --color-4: #c0a29a; --color-5: #d9cfb6. 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