#FF0F2B + #D70E18 + #29191A + #3D2525 + #9C7663 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF0F2B

Vermilion · Crimson · Passion Red

HEX

#FF0F2B

RGB

rgb(255, 15, 43)

HSL

hsl(353, 100%, 53%)

HSB

hsb(353, 94%, 100%)

CMYK

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

Oklch

oklch(63.3% 0.253 25.5)

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

#D70E18

Vermilion · Crimson · Passion Red

HEX

#D70E18

RGB

rgb(215, 14, 24)

HSL

hsl(357, 88%, 45%)

HSB

hsb(357, 93%, 84%)

CMYK

cmyk(0%, 93%, 89%, 16%)

Oklch

oklch(55.6% 0.222 27.5)

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

#29191A

Crimson · Black · Deep Berry

HEX

#29191A

RGB

rgb(41, 25, 26)

HSL

hsl(356, 24%, 13%)

HSB

hsb(356, 39%, 16%)

CMYK

cmyk(0%, 39%, 37%, 84%)

Oklch

oklch(23.5% 0.026 15.1)

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

#3D2525

Crimson · DarkSlateGray · Deep Berry

HEX

#3D2525

RGB

rgb(61, 37, 37)

HSL

hsl(0, 24%, 19%)

HSB

hsb(0, 39%, 24%)

CMYK

cmyk(0%, 39%, 39%, 76%)

Oklch

oklch(29.5% 0.037 19.5)

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

#9C7663

Tangerine · Gray · Amber Brown

HEX

#9C7663

RGB

rgb(156, 118, 99)

HSL

hsl(20, 22%, 50%)

HSB

hsb(20, 37%, 61%)

CMYK

cmyk(0%, 24%, 37%, 39%)

Oklch

oklch(59.8% 0.056 47.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF0F2B

0FFFE3

Analogous

FF0FA3

FF0F2B

FF6B0F

Triadic

FF0F2B

2BFF0F

0F2BFF

Split-Comp.

FF0F2B

0FFF6B

0FA3FF

Tetradic

FF0F2B

A3FF0F

0FFFE3

6B0FFF

Contrast Matrix WCAG 2.1 Contrast

FF0F2B	D70E18	29191A	3D2525	9C7663
—	1.4 Fail	4.3 AA Large	3.6 AA Large	1.0 Fail
1.4 Fail	—	3.2 AA Large	2.7 Fail	1.3 Fail
4.3 AA Large	3.2 AA Large	—	1.2 Fail	4.2 AA Large
3.6 AA Large	2.7 Fail	1.2 Fail	—	3.5 AA Large
1.0 Fail	1.3 Fail	4.2 AA Large	3.5 AA Large	—

White BG

3.9AA Large

5.3AA

16.8AAA

14.1AAA

4.1AA Large

Black BG

5.4AA

4.0AA Large

1.2Fail

1.5Fail

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

979524

807E16

22221A

333225

8C8B68

Deuteranopia

A5B723

8C9B15

23241A

343625

8E9169

Tritanopia

F31F1E

CD1413

281A1A

3C2525

9A6B6C

Achromatopsia

5A5A5A

4B4B4B

1E1E1E

2C2C2C

7F7F7F

Shades & Tints Shades & Tints

#FF0F2B

Dark

Light

#D70E18

Dark

Light

#29191A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff0f2b;
  --color-2: #d70e18;
  --color-3: #29191a;
  --color-4: #3d2525;
  --color-5: #9c7663;
}

SCSS

$color-1: #ff0f2b;
$color-2: #d70e18;
$color-3: #29191a;
$color-4: #3d2525;
$color-5: #9c7663;

TAILWIND

colors: {
  'brand-1': '#ff0f2b',
  'brand-2': '#d70e18',
  'brand-3': '#29191a',
  'brand-4': '#3d2525',
  'brand-5': '#9c7663',
}

RGB Array

[255, 15, 43], [215, 14, 24], [41, 25, 26], [61, 37, 37], [156, 118, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF0F2B, #D70E18, #29191A, #3D2525, #9C7663 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: #ff0f2b; --color-2: #d70e18; --color-3: #29191a; --color-4: #3d2525; --color-5: #9c7663. 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