← Back to Editor

#FC1304 · #D44949 · #A6544C · #614D54 · #302942

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FC1304

Vermilion · Red · Passion Red

HEX
#FC1304
RGB
rgb(252, 19, 4)
HSL
hsl(4, 98%, 50%)
HSB
hsb(4, 98%, 99%)
CMYK
cmyk(0%, 92%, 98%, 1%)
Oklch
oklch(62.6% 0.252 29.7)

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

#D44949

Vermilion · Tomato · Passion Red

HEX
#D44949
RGB
rgb(212, 73, 73)
HSL
hsl(0, 62%, 56%)
HSB
hsb(0, 66%, 83%)
CMYK
cmyk(0%, 66%, 66%, 17%)
Oklch
oklch(59.8% 0.175 24.1)

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

#A6544C

Crimson · Sienna · Passion Red

HEX
#A6544C
RGB
rgb(166, 84, 76)
HSL
hsl(5, 37%, 47%)
HSB
hsb(5, 54%, 65%)
CMYK
cmyk(0%, 49%, 54%, 35%)
Oklch
oklch(54.4% 0.110 27.0)

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

#614D54

Dark Violet · DimGray · Camellia

HEX
#614D54
RGB
rgb(97, 77, 84)
HSL
hsl(339, 11%, 34%)
HSB
hsb(339, 21%, 38%)
CMYK
cmyk(0%, 21%, 13%, 62%)
Oklch
oklch(44.3% 0.029 355.4)

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

#302942

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#302942
RGB
rgb(48, 41, 66)
HSL
hsl(257, 23%, 21%)
HSB
hsb(257, 38%, 26%)
CMYK
cmyk(27%, 38%, 0%, 74%)
Oklch
oklch(30.0% 0.045 296.4)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC1304
03ECFC

Analogous

FC036F
FC1304
FC9003

Triadic

FC1304
03FC13
1303FC

Split-Comp.

FC1304
03FC90
036FFC

Tetradic

FC1304
6FFC03
03ECFC
9003FC

Contrast Matrix WCAG 2.1 Contrast

FC1304
D44949
A6544C
614D54
302942
—
1.1
Fail
1.3
Fail
1.9
Fail
3.4
AA Large
1.1
Fail
—
1.2
Fail
1.8
Fail
3.2
AA Large
1.3
Fail
1.2
Fail
—
1.5
Fail
2.6
Fail
1.9
Fail
1.8
Fail
1.5
Fail
—
1.8
Fail
3.4
AA Large
3.2
AA Large
2.6
Fail
1.8
Fail
—
White BG
4.0AA Large
4.3AA Large
5.3AA
7.8AAA
13.8AAA
Black BG
5.2AA
4.8AA
4.0AA Large
2.7Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

979508
989749
82824E
585852
2D2D3C

Deuteranopia

A5B609
A0AA49
878D4E
5A5B52
2D2E3A

Tritanopia

F00A0B
CD4949
A24F50
605151
303736

Achromatopsia

575757
737373
6C6C6C
545454
2E2E2E

Shades & Tints Shades & Tints

#FC1304

Dark
Light

#D44949

Dark
Light

#A6544C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc1304;
  --color-2: #d44949;
  --color-3: #a6544c;
  --color-4: #614d54;
  --color-5: #302942;
}

SCSS

$color-1: #fc1304;
$color-2: #d44949;
$color-3: #a6544c;
$color-4: #614d54;
$color-5: #302942;

TAILWIND

colors: {
  'brand-1': '#fc1304',
  'brand-2': '#d44949',
  'brand-3': '#a6544c',
  'brand-4': '#614d54',
  'brand-5': '#302942',
}

RGB Array

[252, 19, 4], [212, 73, 73], [166, 84, 76], [97, 77, 84], [48, 41, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC1304, #D44949, #A6544C, #614D54, #302942 is ideal for: corporate websites, product showcases, portfolios. 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: #fc1304; --color-2: #d44949; --color-3: #a6544c; --color-4: #614d54; --color-5: #302942. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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