#35020A + #33121B + #31222B + #2F323C + #2D424C · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#35020A

Vermilion · Black · Deep Berry

HEX

#35020A

RGB

rgb(53, 2, 10)

HSL

hsl(351, 93%, 11%)

HSB

hsb(351, 96%, 21%)

CMYK

cmyk(0%, 96%, 81%, 79%)

Oklch

oklch(21.2% 0.080 17.8)

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

#33121B

Dark Violet · Black · Raspberry

HEX

#33121B

RGB

rgb(51, 18, 27)

HSL

hsl(344, 48%, 14%)

HSB

hsb(344, 65%, 20%)

CMYK

cmyk(0%, 65%, 47%, 80%)

Oklch

oklch(23.7% 0.054 5.0)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#31222B

Rose Purple · DarkSlateGray · Raspberry

HEX

#31222B

RGB

rgb(49, 34, 43)

HSL

hsl(324, 18%, 16%)

HSB

hsb(324, 31%, 19%)

CMYK

cmyk(0%, 31%, 12%, 81%)

Oklch

oklch(27.4% 0.028 342.4)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#2F323C

Indigo · DarkSlateGray · Prussian Blue

HEX

#2F323C

RGB

rgb(47, 50, 60)

HSL

hsl(226, 12%, 21%)

HSB

hsb(226, 22%, 24%)

CMYK

cmyk(22%, 17%, 0%, 76%)

Oklch

oklch(31.8% 0.018 272.2)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#2D424C

Slate Blue · DarkSlateGray · Peacock Green

HEX

#2D424C

RGB

rgb(45, 66, 76)

HSL

hsl(199, 26%, 24%)

HSB

hsb(199, 41%, 30%)

CMYK

cmyk(41%, 13%, 0%, 70%)

Oklch

oklch(36.6% 0.032 229.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

35020A

02362E

Analogous

360224

35020A

361402

Triadic

35020A

0A3602

020A36

Split-Comp.

35020A

023614

022436

Tetradic

35020A

243602

02362E

140236

Contrast Matrix WCAG 2.1 Contrast

35020A	33121B	31222B	2F323C	2D424C
—	1.1 Fail	1.2 Fail	1.4 Fail	1.7 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.6 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.4 Fail	1.3 Fail	1.2 Fail	—	1.2 Fail
1.7 Fail	1.6 Fail	1.4 Fail	1.2 Fail	—

White BG

18.0AAA

16.9AAA

15.1AAA

12.8AAA

10.5AAA

Black BG

1.2Fail

1.4Fail

1.6Fail

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1E08

252419

2B2A29

30303A

36364A

Deuteranopia

222608

272918

2B2D28

303039

353349

Tritanopia

320706

311717

302727

2F3837

2E4847

Achromatopsia

121212

1D1D1D

282828

323232

3D3D3D

Shades & Tints Shades & Tints

#35020A

Dark

Light

#33121B

Dark

Light

#31222B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #35020a;
  --color-2: #33121b;
  --color-3: #31222b;
  --color-4: #2f323c;
  --color-5: #2d424c;
}

SCSS

$color-1: #35020a;
$color-2: #33121b;
$color-3: #31222b;
$color-4: #2f323c;
$color-5: #2d424c;

TAILWIND

colors: {
  'brand-1': '#35020a',
  'brand-2': '#33121b',
  'brand-3': '#31222b',
  'brand-4': '#2f323c',
  'brand-5': '#2d424c',
}

RGB Array

[53, 2, 10], [51, 18, 27], [49, 34, 43], [47, 50, 60], [45, 66, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #35020A, #33121B, #31222B, #2F323C, #2D424C 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: #35020a; --color-2: #33121b; --color-3: #31222b; --color-4: #2f323c; --color-5: #2d424c. 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 cool-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