#FB1455 + #C70B0B + #464E52 + #40423C + #2C2C2C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FB1455

Dark Violet · Crimson · Rose Pink

HEX

#FB1455

RGB

rgb(251, 20, 85)

HSL

hsl(343, 97%, 53%)

HSB

hsb(343, 92%, 98%)

CMYK

cmyk(0%, 92%, 66%, 2%)

Oklch

oklch(63.2% 0.247 15.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#C70B0B

Vermilion · FireBrick · Passion Red

HEX

#C70B0B

RGB

rgb(199, 11, 11)

HSL

hsl(0, 90%, 41%)

HSB

hsb(0, 94%, 78%)

CMYK

cmyk(0%, 94%, 94%, 22%)

Oklch

oklch(52.4% 0.211 28.8)

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

#464E52

Slate Blue · DarkSlateGray · Charcoal

HEX

#464E52

RGB

rgb(70, 78, 82)

HSL

hsl(200, 8%, 30%)

HSB

hsb(200, 15%, 32%)

CMYK

cmyk(15%, 5%, 0%, 68%)

Oklch

oklch(41.8% 0.012 229.2)

Traditional「Slate Blue」· Paint「Charcoal」· Creative Midnight Shadow

#40423C

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#40423C

RGB

rgb(64, 66, 60)

HSL

hsl(80, 5%, 25%)

HSB

hsb(80, 9%, 26%)

CMYK

cmyk(3%, 0%, 9%, 74%)

Oklch

oklch(37.5% 0.010 121.9)

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

#2C2C2C

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#2C2C2C

RGB

rgb(44, 44, 44)

HSL

hsl(0, 0%, 17%)

HSB

hsb(0, 0%, 17%)

CMYK

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

Oklch

oklch(29.3% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FB1455

13FBBA

Analogous

FB13C9

FB1455

FB4513

Triadic

FB1455

55FB13

1355FB

Split-Comp.

FB1455

13FB45

13C9FB

Tetradic

FB1455

C9FB13

13FBBA

4513FB

Contrast Matrix WCAG 2.1 Contrast

FB1455	C70B0B	464E52	40423C	2C2C2C
—	1.5 Fail	2.2 Fail	2.6 Fail	3.5 AA Large
1.5 Fail	—	1.4 Fail	1.7 Fail	2.3 Fail
2.2 Fail	1.4 Fail	—	1.2 Fail	1.6 Fail
2.6 Fail	1.7 Fail	1.2 Fail	—	1.4 Fail
3.5 AA Large	2.3 Fail	1.6 Fail	1.4 Fail	—

White BG

3.9AA Large

6.0AA

8.5AAA

10.2AAA

14.0AAA

Black BG

5.3AA

3.5AA Large

2.5Fail

2.1Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

979545

76740B

494A51

41413D

2C2C2C

Deuteranopia

A4B642

818F0B

494851

41413E

2C2C2C

Tritanopia

EF3936

BE0B0B

465050

403F3F

2C2C2C

Achromatopsia

606060

434343

4C4C4C

414141

2C2C2C

Shades & Tints Shades & Tints

#FB1455

Dark

Light

#C70B0B

Dark

Light

#464E52

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fb1455;
  --color-2: #c70b0b;
  --color-3: #464e52;
  --color-4: #40423c;
  --color-5: #2c2c2c;
}

SCSS

$color-1: #fb1455;
$color-2: #c70b0b;
$color-3: #464e52;
$color-4: #40423c;
$color-5: #2c2c2c;

TAILWIND

colors: {
  'brand-1': '#fb1455',
  'brand-2': '#c70b0b',
  'brand-3': '#464e52',
  'brand-4': '#40423c',
  'brand-5': '#2c2c2c',
}

RGB Array

[251, 20, 85], [199, 11, 11], [70, 78, 82], [64, 66, 60], [44, 44, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FB1455, #C70B0B, #464E52, #40423C, #2C2C2C 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: #fb1455; --color-2: #c70b0b; --color-3: #464e52; --color-4: #40423c; --color-5: #2c2c2c. 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