#1A2B2B + #332222 + #4D1A1A + #661111 + #800909 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1A2B2B

Slate Blue · DarkSlateGray · Peacock Green

HEX

#1A2B2B

RGB

rgb(26, 43, 43)

HSL

hsl(180, 25%, 14%)

HSB

hsb(180, 40%, 17%)

CMYK

cmyk(40%, 0%, 0%, 83%)

Oklch

oklch(27.4% 0.023 195.9)

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

#332222

Crimson · DarkSlateGray · Deep Berry

HEX

#332222

RGB

rgb(51, 34, 34)

HSL

hsl(0, 20%, 17%)

HSB

hsb(0, 33%, 20%)

CMYK

cmyk(0%, 33%, 33%, 80%)

Oklch

oklch(27.3% 0.026 18.9)

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

#4D1A1A

Crimson · Maroon · Deep Berry

HEX

#4D1A1A

RGB

rgb(77, 26, 26)

HSL

hsl(0, 50%, 20%)

HSB

hsb(0, 66%, 30%)

CMYK

cmyk(0%, 66%, 66%, 70%)

Oklch

oklch(29.7% 0.078 23.0)

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

#661111

Vermilion · Maroon · Wine Red

HEX

#661111

RGB

rgb(102, 17, 17)

HSL

hsl(0, 71%, 23%)

HSB

hsb(0, 83%, 40%)

CMYK

cmyk(0%, 83%, 83%, 60%)

Oklch

oklch(33.4% 0.118 26.5)

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

#800909

Vermilion · Maroon · Wine Red

HEX

#800909

RGB

rgb(128, 9, 9)

HSL

hsl(0, 87%, 27%)

HSB

hsb(0, 93%, 50%)

CMYK

cmyk(0%, 93%, 93%, 50%)

Oklch

oklch(38.2% 0.150 28.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1A2B2B

2D1B1B

Analogous

1B2D24

1A2B2B

1B242D

Triadic

1A2B2B

2D1B2D

2D2D1B

Split-Comp.

1A2B2B

2D1B24

2D241B

Tetradic

1A2B2B

241B2D

2D1B1B

242D1B

Contrast Matrix WCAG 2.1 Contrast

1A2B2B	332222	4D1A1A	661111	800909
—	1.0 Fail	1.0 Fail	1.2 Fail	1.4 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.0 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.4 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

14.7AAA

15.1AAA

14.2AAA

12.7AAA

10.7AAA

Black BG

1.4Fail

1.5Fail

1.7Fail

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

21222B

2C2B22

37361A

414011

4C4B09

Deuteranopia

201F2B

2D2E22

3A3E1A

464C11

535C09

Tritanopia

1B2B2B

322222

4A1A1A

621111

7A0909

Achromatopsia

262626

272727

292929

2A2A2A

2D2D2D

Shades & Tints Shades & Tints

#1A2B2B

Dark

Light

#332222

Dark

Light

#4D1A1A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1a2b2b;
  --color-2: #332222;
  --color-3: #4d1a1a;
  --color-4: #661111;
  --color-5: #800909;
}

SCSS

$color-1: #1a2b2b;
$color-2: #332222;
$color-3: #4d1a1a;
$color-4: #661111;
$color-5: #800909;

TAILWIND

colors: {
  'brand-1': '#1a2b2b',
  'brand-2': '#332222',
  'brand-3': '#4d1a1a',
  'brand-4': '#661111',
  'brand-5': '#800909',
}

RGB Array

[26, 43, 43], [51, 34, 34], [77, 26, 26], [102, 17, 17], [128, 9, 9]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #1A2B2B, #332222, #4D1A1A, #661111, #800909 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: #1a2b2b; --color-2: #332222; --color-3: #4d1a1a; --color-4: #661111; --color-5: #800909. 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