#2D2927 + #352F2E + #4B403B + #CC2F26 + #D93629 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2D2927

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#2D2927

RGB

rgb(45, 41, 39)

HSL

hsl(20, 7%, 16%)

HSB

hsb(20, 13%, 18%)

CMYK

cmyk(0%, 9%, 13%, 82%)

Oklch

oklch(28.5% 0.007 48.5)

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

#352F2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#352F2E

RGB

rgb(53, 47, 46)

HSL

hsl(9, 7%, 19%)

HSB

hsb(9, 13%, 21%)

CMYK

cmyk(0%, 11%, 13%, 79%)

Oklch

oklch(31.1% 0.009 28.9)

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

#4B403B

Tangerine · DarkSlateGray · Amber Brown

HEX

#4B403B

RGB

rgb(75, 64, 59)

HSL

hsl(19, 12%, 26%)

HSB

hsb(19, 21%, 29%)

CMYK

cmyk(0%, 15%, 21%, 71%)

Oklch

oklch(38.1% 0.017 45.9)

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

#CC2F26

Vermilion · FireBrick · Passion Red

HEX

#CC2F26

RGB

rgb(204, 47, 38)

HSL

hsl(3, 69%, 47%)

HSB

hsb(3, 81%, 80%)

CMYK

cmyk(0%, 77%, 81%, 20%)

Oklch

oklch(55.5% 0.195 28.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#D93629

Vermilion · Crimson · Passion Red

HEX

#D93629

RGB

rgb(217, 54, 41)

HSL

hsl(4, 70%, 51%)

HSB

hsb(4, 81%, 85%)

CMYK

cmyk(0%, 75%, 81%, 15%)

Oklch

oklch(58.4% 0.201 29.3)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D2927

262A2C

Analogous

2C2627

2D2927

2C2B26

Triadic

2D2927

262C28

28262C

Split-Comp.

2D2927

262C2B

26272C

Tetradic

2D2927

272C26

262A2C

2B262C

Contrast Matrix WCAG 2.1 Contrast

2D2927	352F2E	4B403B	CC2F26	D93629
—	1.1 Fail	1.4 Fail	2.7 Fail	3.1 AA Large
1.1 Fail	—	1.3 Fail	2.5 Fail	2.8 Fail
1.4 Fail	1.3 Fail	—	1.9 Fail	2.2 Fail
2.7 Fail	2.5 Fail	1.9 Fail	—	1.1 Fail
3.1 AA Large	2.8 Fail	2.2 Fail	1.1 Fail	—

White BG

14.4AAA

13.1AAA

10.0AAA

5.2AA

4.7AA

Black BG

1.5Fail

1.6Fail

2.1Fail

4.0AA Large

4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B27

32322E

46463C

888728

92912C

Deuteranopia

2C2C28

33332E

47483D

919D29

9CA82D

Tritanopia

2D2828

352E2E

4A3D3D

C42A2A

D12F2F

Achromatopsia

2A2A2A

313131

434343

5D5D5D

656565

Shades & Tints Shades & Tints

#2D2927

Dark

Light

#352F2E

Dark

Light

#4B403B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d2927;
  --color-2: #352f2e;
  --color-3: #4b403b;
  --color-4: #cc2f26;
  --color-5: #d93629;
}

SCSS

$color-1: #2d2927;
$color-2: #352f2e;
$color-3: #4b403b;
$color-4: #cc2f26;
$color-5: #d93629;

TAILWIND

colors: {
  'brand-1': '#2d2927',
  'brand-2': '#352f2e',
  'brand-3': '#4b403b',
  'brand-4': '#cc2f26',
  'brand-5': '#d93629',
}

RGB Array

[45, 41, 39], [53, 47, 46], [75, 64, 59], [204, 47, 38], [217, 54, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #2D2927, #352F2E, #4B403B, #CC2F26, #D93629 is ideal for: tech websites, dark mode UIs, game UIs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #2d2927; --color-2: #352f2e; --color-3: #4b403b; --color-4: #cc2f26; --color-5: #d93629. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 dark-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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