#302C2E + #523C45 + #753F51 + #98354D + #BA1E23 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#302C2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#302C2E

RGB

rgb(48, 44, 46)

HSL

hsl(330, 4%, 18%)

HSB

hsb(330, 8%, 19%)

CMYK

cmyk(0%, 8%, 4%, 81%)

Oklch

oklch(29.8% 0.007 345.7)

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

#523C45

Dark Violet · DarkSlateGray · Camellia

HEX

#523C45

RGB

rgb(82, 60, 69)

HSL

hsl(335, 15%, 28%)

HSB

hsb(335, 27%, 32%)

CMYK

cmyk(0%, 27%, 16%, 68%)

Oklch

oklch(38.4% 0.034 352.5)

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

#753F51

Dark Violet · DimGray · Camellia

HEX

#753F51

RGB

rgb(117, 63, 81)

HSL

hsl(340, 30%, 35%)

HSB

hsb(340, 46%, 46%)

CMYK

cmyk(0%, 46%, 31%, 54%)

Oklch

oklch(44.0% 0.078 359.5)

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

#98354D

Crimson · Brown · Wine Red

HEX

#98354D

RGB

rgb(152, 53, 77)

HSL

hsl(345, 48%, 40%)

HSB

hsb(345, 65%, 60%)

CMYK

cmyk(0%, 65%, 49%, 40%)

Oklch

oklch(47.7% 0.133 9.0)

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

#BA1E23

Vermilion · FireBrick · Passion Red

HEX

#BA1E23

RGB

rgb(186, 30, 35)

HSL

hsl(358, 72%, 42%)

HSB

hsb(358, 84%, 73%)

CMYK

cmyk(0%, 84%, 81%, 27%)

Oklch

oklch(50.9% 0.190 26.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302C2E

2C302E

Analogous

302C30

302C2E

302C2C

Triadic

302C2E

2E302C

2C2E30

Split-Comp.

302C2E

2C302C

2C3030

Tetradic

302C2E

30302C

2C302E

2C2C30

Contrast Matrix WCAG 2.1 Contrast

302C2E	523C45	753F51	98354D	BA1E23
—	1.4 Fail	1.7 Fail	1.9 Fail	2.2 Fail
1.4 Fail	—	1.2 Fail	1.4 Fail	1.6 Fail
1.7 Fail	1.2 Fail	—	1.1 Fail	1.3 Fail
1.9 Fail	1.4 Fail	1.1 Fail	—	1.1 Fail
2.2 Fail	1.6 Fail	1.3 Fail	1.1 Fail	—

White BG

13.8AAA

10.0AAA

8.1AAA

7.1AAA

6.4AA

Black BG

1.5Fail

2.1Fail

2.6Fail

3.0Fail

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E2E

484843

5E5D4D

6D6C47

767522

Deuteranopia

2F2F2D

4A4B42

61654C

737A46

808B22

Tritanopia

302D2D

514141

724948

934342

B22121

Achromatopsia

2D2D2D

444444

515151

555555

4D4D4D

Shades & Tints Shades & Tints

#302C2E

Dark

Light

#523C45

Dark

Light

#753F51

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302c2e;
  --color-2: #523c45;
  --color-3: #753f51;
  --color-4: #98354d;
  --color-5: #ba1e23;
}

SCSS

$color-1: #302c2e;
$color-2: #523c45;
$color-3: #753f51;
$color-4: #98354d;
$color-5: #ba1e23;

TAILWIND

colors: {
  'brand-1': '#302c2e',
  'brand-2': '#523c45',
  'brand-3': '#753f51',
  'brand-4': '#98354d',
  'brand-5': '#ba1e23',
}

RGB Array

[48, 44, 46], [82, 60, 69], [117, 63, 81], [152, 53, 77], [186, 30, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #302C2E, #523C45, #753F51, #98354D, #BA1E23 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: #302c2e; --color-2: #523c45; --color-3: #753f51; --color-4: #98354d; --color-5: #ba1e23. 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 general-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