#301B1F + #4D1F2B + #F30A46 + #FFAA1B + #2F282C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#301B1F

Crimson · Black · Deep Berry

HEX

#301B1F

RGB

rgb(48, 27, 31)

HSL

hsl(349, 28%, 15%)

HSB

hsb(349, 44%, 19%)

CMYK

cmyk(0%, 44%, 35%, 81%)

Oklch

oklch(25.2% 0.034 7.4)

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

#4D1F2B

Dark Violet · DarkSlateGray · Raspberry

HEX

#4D1F2B

RGB

rgb(77, 31, 43)

HSL

hsl(344, 43%, 21%)

HSB

hsb(344, 60%, 30%)

CMYK

cmyk(0%, 60%, 44%, 70%)

Oklch

oklch(31.0% 0.071 5.7)

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

#F30A46

Vermilion · Crimson · Passion Red

HEX

#F30A46

RGB

rgb(243, 10, 70)

HSL

hsl(345, 92%, 50%)

HSB

hsb(345, 96%, 95%)

CMYK

cmyk(0%, 96%, 71%, 5%)

Oklch

oklch(61.3% 0.243 18.7)

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

#FFAA1B

Ginger · Orange · Warm Sun

HEX

#FFAA1B

RGB

rgb(255, 170, 27)

HSL

hsl(38, 100%, 55%)

HSB

hsb(38, 89%, 100%)

CMYK

cmyk(0%, 33%, 89%, 0%)

Oklch

oklch(80.2% 0.166 72.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#2F282C

Rose Purple · DarkSlateGray · Dark Stone

HEX

#2F282C

RGB

rgb(47, 40, 44)

HSL

hsl(326, 8%, 17%)

HSB

hsb(326, 15%, 18%)

CMYK

cmyk(0%, 15%, 6%, 82%)

Oklch

oklch(28.6% 0.012 342.6)

Traditional「Rose Purple」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

301B1F

1C312D

Analogous

311C2A

301B1F

31221C

Triadic

301B1F

1F311C

1C1F31

Split-Comp.

301B1F

1C3122

1C2A31

Tetradic

301B1F

2A311C

1C312D

221C31

Contrast Matrix WCAG 2.1 Contrast

301B1F	4D1F2B	F30A46	FFAA1B	2F282C
—	1.2 Fail	3.8 AA Large	8.5 AAA	1.1 Fail
1.2 Fail	—	3.2 AA Large	7.1 AAA	1.1 Fail
3.8 AA Large	3.2 AA Large	—	2.2 Fail	3.4 AA Large
8.5 AAA	7.1 AAA	2.2 Fail	—	7.5 AAA
1.1 Fail	1.1 Fail	3.4 AA Large	7.5 AAA	—

White BG

16.1AAA

13.6AAA

4.2AA Large

1.9Fail

14.4AAA

Black BG

1.3Fail

1.5Fail

4.9AA

11.0AAA

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

27271E

393928

8E8C37

DAD93E

2C2C2B

Deuteranopia

282A1E

3C3F27

9CAD34

DFE646

2C2D2B

Tritanopia

2F1D1D

4B2625

E72C2A

FB595F

2F2A2A

Achromatopsia

222222

2E2E2E

575757

B3B3B3

2B2B2B

Shades & Tints Shades & Tints

#301B1F

Dark

Light

#4D1F2B

Dark

Light

#F30A46

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #301b1f;
  --color-2: #4d1f2b;
  --color-3: #f30a46;
  --color-4: #ffaa1b;
  --color-5: #2f282c;
}

SCSS

$color-1: #301b1f;
$color-2: #4d1f2b;
$color-3: #f30a46;
$color-4: #ffaa1b;
$color-5: #2f282c;

TAILWIND

colors: {
  'brand-1': '#301b1f',
  'brand-2': '#4d1f2b',
  'brand-3': '#f30a46',
  'brand-4': '#ffaa1b',
  'brand-5': '#2f282c',
}

RGB Array

[48, 27, 31], [77, 31, 43], [243, 10, 70], [255, 170, 27], [47, 40, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #301B1F, #4D1F2B, #F30A46, #FFAA1B, #2F282C 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: #301b1f; --color-2: #4d1f2b; --color-3: #f30a46; --color-4: #ffaa1b; --color-5: #2f282c. 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