#FA7100 + #C82557 + #912446 + #5A2436 + #3F242E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FA7100

Tangerine · OrangeRed · Amber Brown

HEX

#FA7100

RGB

rgb(250, 113, 0)

HSL

hsl(27, 100%, 49%)

HSB

hsb(27, 100%, 98%)

CMYK

cmyk(0%, 55%, 100%, 2%)

Oklch

oklch(70.3% 0.191 48.0)

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

#C82557

Dark Violet · Crimson · Camellia

HEX

#C82557

RGB

rgb(200, 37, 87)

HSL

hsl(342, 69%, 46%)

HSB

hsb(342, 82%, 78%)

CMYK

cmyk(0%, 82%, 56%, 22%)

Oklch

oklch(54.8% 0.197 9.7)

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

#912446

Dark Violet · Brown · Camellia

HEX

#912446

RGB

rgb(145, 36, 70)

HSL

hsl(341, 60%, 35%)

HSB

hsb(341, 75%, 57%)

CMYK

cmyk(0%, 75%, 52%, 43%)

Oklch

oklch(44.5% 0.146 6.9)

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

#5A2436

Dark Violet · DarkSlateGray · Raspberry

HEX

#5A2436

RGB

rgb(90, 36, 54)

HSL

hsl(340, 43%, 25%)

HSB

hsb(340, 60%, 35%)

CMYK

cmyk(0%, 60%, 40%, 65%)

Oklch

oklch(34.4% 0.082 1.4)

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

#3F242E

Dark Violet · DarkSlateGray · Raspberry

HEX

#3F242E

RGB

rgb(63, 36, 46)

HSL

hsl(338, 27%, 19%)

HSB

hsb(338, 43%, 25%)

CMYK

cmyk(0%, 43%, 27%, 75%)

Oklch

oklch(29.9% 0.044 356.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA7100

0089FA

Analogous

FA000C

FA7100

FAED00

Triadic

FA7100

00FA70

7000FA

Split-Comp.

FA7100

00FAED

000CFA

Tetradic

FA7100

0CFA00

0089FA

ED00FA

Contrast Matrix WCAG 2.1 Contrast

FA7100	C82557	912446	5A2436	3F242E
—	1.9 Fail	2.9 Fail	4.3 AA Large	4.9 AA
1.9 Fail	—	1.5 Fail	2.2 Fail	2.6 Fail
2.9 Fail	1.5 Fail	—	1.5 Fail	1.7 Fail
4.3 AA Large	2.2 Fail	1.5 Fail	—	1.2 Fail
4.9 AA	2.6 Fail	1.7 Fail	1.2 Fail	—

White BG

2.8Fail

5.4AA

8.3AAA

12.1AAA

14.0AAA

Black BG

7.4AAA

3.9AA Large

2.5Fail

1.7Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBD1B

81804B

62613E

434232

33332C

Deuteranopia

C7D122

8B9748

68703C

464A31

35372B

Tritanopia

F33136

C0413F

8C3736

572E2D

3E2A29

Achromatopsia

8D8D8D

5B5B5B

484848

363636

2D2D2D

Shades & Tints Shades & Tints

#FA7100

Dark

Light

#C82557

Dark

Light

#912446

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa7100;
  --color-2: #c82557;
  --color-3: #912446;
  --color-4: #5a2436;
  --color-5: #3f242e;
}

SCSS

$color-1: #fa7100;
$color-2: #c82557;
$color-3: #912446;
$color-4: #5a2436;
$color-5: #3f242e;

TAILWIND

colors: {
  'brand-1': '#fa7100',
  'brand-2': '#c82557',
  'brand-3': '#912446',
  'brand-4': '#5a2436',
  'brand-5': '#3f242e',
}

RGB Array

[250, 113, 0], [200, 37, 87], [145, 36, 70], [90, 36, 54], [63, 36, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FA7100, #C82557, #912446, #5A2436, #3F242E 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: #fa7100; --color-2: #c82557; --color-3: #912446; --color-4: #5a2436; --color-5: #3f242e. 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