#21353B + #2B7176 + #FC0249 + #BD2457 + #4A2C3E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#21353B

Slate Blue · DarkSlateGray · Peacock Green

HEX

#21353B

RGB

rgb(33, 53, 59)

HSL

hsl(194, 28%, 18%)

HSB

hsb(194, 44%, 23%)

CMYK

cmyk(44%, 10%, 0%, 77%)

Oklch

oklch(31.5% 0.028 218.6)

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

#2B7176

Slate Blue · SeaGreen · Mint Ice

HEX

#2B7176

RGB

rgb(43, 113, 118)

HSL

hsl(184, 47%, 32%)

HSB

hsb(184, 64%, 46%)

CMYK

cmyk(64%, 4%, 0%, 54%)

Oklch

oklch(50.7% 0.069 201.8)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#FC0249

Dark Violet · Crimson · Camellia

HEX

#FC0249

RGB

rgb(252, 2, 73)

HSL

hsl(343, 98%, 50%)

HSB

hsb(343, 99%, 99%)

CMYK

cmyk(0%, 99%, 71%, 1%)

Oklch

oklch(62.8% 0.251 18.5)

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

#BD2457

Dark Violet · Crimson · Camellia

HEX

#BD2457

RGB

rgb(189, 36, 87)

HSL

hsl(340, 68%, 44%)

HSB

hsb(340, 81%, 74%)

CMYK

cmyk(0%, 81%, 54%, 26%)

Oklch

oklch(52.8% 0.189 7.6)

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

#4A2C3E

Rose Purple · DarkSlateGray · Raspberry

HEX

#4A2C3E

RGB

rgb(74, 44, 62)

HSL

hsl(324, 25%, 23%)

HSB

hsb(324, 41%, 29%)

CMYK

cmyk(0%, 41%, 16%, 71%)

Oklch

oklch(33.7% 0.052 343.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

21353B

3B2721

Analogous

213B34

21353B

21283B

Triadic

21353B

3B2135

353B21

Split-Comp.

21353B

3B2128

3B3421

Tetradic

21353B

34213B

3B2721

283B21

Contrast Matrix WCAG 2.1 Contrast

21353B	2B7176	FC0249	BD2457	4A2C3E
—	2.3 Fail	3.2 AA Large	2.2 Fail	1.1 Fail
2.3 Fail	—	1.4 Fail	1.0 Fail	2.2 Fail
3.2 AA Large	1.4 Fail	—	1.5 Fail	3.0 AA Large
2.2 Fail	1.0 Fail	1.5 Fail	—	2.1 Fail
1.1 Fail	2.2 Fail	3.0 AA Large	2.1 Fail	—

White BG

12.8AAA

5.6AA

4.0AA Large

5.9AA

12.2AAA

Black BG

1.6Fail

3.7AA Large

5.2AA

3.6AA Large

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A3A

494A75

908E38

7B794B

3D3D3A

Deuteranopia

292739

454075

9EB134

848F48

3F4139

Tritanopia

223838

2F7474

EF2A27

B5413F

493635

Achromatopsia

303030

5D5D5D

555555

585858

373737

Shades & Tints Shades & Tints

#21353B

Dark

Light

#2B7176

Dark

Light

#FC0249

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #21353b;
  --color-2: #2b7176;
  --color-3: #fc0249;
  --color-4: #bd2457;
  --color-5: #4a2c3e;
}

SCSS

$color-1: #21353b;
$color-2: #2b7176;
$color-3: #fc0249;
$color-4: #bd2457;
$color-5: #4a2c3e;

TAILWIND

colors: {
  'brand-1': '#21353b',
  'brand-2': '#2b7176',
  'brand-3': '#fc0249',
  'brand-4': '#bd2457',
  'brand-5': '#4a2c3e',
}

RGB Array

[33, 53, 59], [43, 113, 118], [252, 2, 73], [189, 36, 87], [74, 44, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #21353B, #2B7176, #FC0249, #BD2457, #4A2C3E 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: #21353b; --color-2: #2b7176; --color-3: #fc0249; --color-4: #bd2457; --color-5: #4a2c3e. 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