#F9121D + #382B2D + #30383A + #2A515B + #1A8C8C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F9121D

Vermilion · Red · Passion Red

HEX

#F9121D

RGB

rgb(249, 18, 29)

HSL

hsl(357, 95%, 52%)

HSB

hsb(357, 93%, 98%)

CMYK

cmyk(0%, 93%, 88%, 2%)

Oklch

oklch(62.1% 0.248 27.6)

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

#382B2D

Crimson · DarkSlateGray · Deep Berry

HEX

#382B2D

RGB

rgb(56, 43, 45)

HSL

hsl(351, 13%, 19%)

HSB

hsb(351, 23%, 22%)

CMYK

cmyk(0%, 23%, 20%, 78%)

Oklch

oklch(30.5% 0.020 7.9)

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

#30383A

Slate Blue · DarkSlateGray · Dark Stone

HEX

#30383A

RGB

rgb(48, 56, 58)

HSL

hsl(192, 9%, 21%)

HSB

hsb(192, 17%, 23%)

CMYK

cmyk(17%, 3%, 0%, 77%)

Oklch

oklch(33.4% 0.011 214.5)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#2A515B

Slate Blue · DarkSlateGray · Mint Ice

HEX

#2A515B

RGB

rgb(42, 81, 91)

HSL

hsl(192, 37%, 26%)

HSB

hsb(192, 54%, 36%)

CMYK

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

Oklch

oklch(41.1% 0.047 216.3)

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

#1A8C8C

Lake Blue · Teal · Mint Ice

HEX

#1A8C8C

RGB

rgb(26, 140, 140)

HSL

hsl(180, 69%, 33%)

HSB

hsb(180, 81%, 55%)

CMYK

cmyk(81%, 0%, 0%, 45%)

Oklch

oklch(58.2% 0.094 194.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9121D

10F9ED

Analogous

F91090

F9121D

F97910

Triadic

F9121D

1CF910

101CF9

Split-Comp.

F9121D

10F979

1090F9

Tetradic

F9121D

90F910

10F9ED

7910F9

Contrast Matrix WCAG 2.1 Contrast

F9121D	382B2D	30383A	2A515B	1A8C8C
—	3.3 AA Large	2.9 Fail	2.1 Fail	1.0 Fail
3.3 AA Large	—	1.1 Fail	1.6 Fail	3.3 AA Large
2.9 Fail	1.1 Fail	—	1.4 Fail	3.0 Fail
2.1 Fail	1.6 Fail	1.4 Fail	—	2.1 Fail
1.0 Fail	3.3 AA Large	3.0 Fail	2.1 Fail	—

White BG

4.1AA Large

13.5AAA

12.0AAA

8.7AAA

4.1AA Large

Black BG

5.1AA

1.6Fail

1.8Fail

2.4Fail

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

95931A

32322D

33343A

3B3B59

4B4C8C

Deuteranopia

A2B41A

33342C

333239

393658

453C8C

Tritanopia

ED1818

372C2C

303939

2C5756

208C8C

Achromatopsia

585858

2F2F2F

363636

464646

6A6A6A

Shades & Tints Shades & Tints

#F9121D

Dark

Light

#382B2D

Dark

Light

#30383A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9121d;
  --color-2: #382b2d;
  --color-3: #30383a;
  --color-4: #2a515b;
  --color-5: #1a8c8c;
}

SCSS

$color-1: #f9121d;
$color-2: #382b2d;
$color-3: #30383a;
$color-4: #2a515b;
$color-5: #1a8c8c;

TAILWIND

colors: {
  'brand-1': '#f9121d',
  'brand-2': '#382b2d',
  'brand-3': '#30383a',
  'brand-4': '#2a515b',
  'brand-5': '#1a8c8c',
}

RGB Array

[249, 18, 29], [56, 43, 45], [48, 56, 58], [42, 81, 91], [26, 140, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9121D, #382B2D, #30383A, #2A515B, #1A8C8C 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: #f9121d; --color-2: #382b2d; --color-3: #30383a; --color-4: #2a515b; --color-5: #1a8c8c. 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