← Back to Editor

#FC8B2B · #DF4B03 · #942C33 · #6A3F52 · #30163D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FC8B2B

Tangerine · Coral · Warm Sun

HEX
#FC8B2B
RGB
rgb(252, 139, 43)
HSL
hsl(28, 97%, 58%)
HSB
hsb(28, 83%, 99%)
CMYK
cmyk(0%, 45%, 83%, 1%)
Oklch
oklch(74.6% 0.170 55.1)

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

#DF4B03

Tangerine · OrangeRed · Amber Brown

HEX
#DF4B03
RGB
rgb(223, 75, 3)
HSL
hsl(20, 97%, 44%)
HSB
hsb(20, 99%, 87%)
CMYK
cmyk(0%, 66%, 99%, 13%)
Oklch
oklch(61.3% 0.195 39.1)

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

#942C33

Crimson · Brown · Wine Red

HEX
#942C33
RGB
rgb(148, 44, 51)
HSL
hsl(356, 54%, 38%)
HSB
hsb(356, 70%, 58%)
CMYK
cmyk(0%, 70%, 66%, 42%)
Oklch
oklch(45.4% 0.139 20.9)

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

#6A3F52

Dark Violet · DimGray · Camellia

HEX
#6A3F52
RGB
rgb(106, 63, 82)
HSL
hsl(333, 25%, 33%)
HSB
hsb(333, 41%, 42%)
CMYK
cmyk(0%, 41%, 23%, 58%)
Oklch
oklch(42.5% 0.065 352.2)

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

#30163D

Dark Plum · MidnightBlue · Dark Purple

HEX
#30163D
RGB
rgb(48, 22, 61)
HSL
hsl(280, 47%, 16%)
HSB
hsb(280, 64%, 24%)
CMYK
cmyk(21%, 64%, 0%, 76%)
Oklch
oklch(25.8% 0.076 313.1)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC8B2B
2C9BFC

Analogous

FC2C33
FC8B2B
FCF52C

Triadic

FC8B2B
2CFC8D
8D2CFC

Split-Comp.

FC8B2B
2CFCF5
2C33FC

Tetradic

FC8B2B
33FC2C
2C9BFC
F52CFC

Contrast Matrix WCAG 2.1 Contrast

FC8B2B
DF4B03
942C33
6A3F52
30163D
—
1.7
Fail
3.3
AA Large
3.6
AA Large
6.8
AA
1.7
Fail
—
1.9
Fail
2.1
Fail
3.9
AA Large
3.3
AA Large
1.9
Fail
—
1.1
Fail
2.0
Fail
3.6
AA Large
2.1
Fail
1.1
Fail
—
1.9
Fail
6.8
AA
3.9
AA Large
2.0
Fail
1.9
Fail
—
White BG
2.4Fail
4.1AA Large
7.9AAA
8.6AAA
16.1AAA
Black BG
8.9AAA
5.1AA
2.7Fail
2.4Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCA42
9F9E14
676631
57574D
252534

Deuteranopia

D2DA48
A8B319
6D7531
5A5D4C
262831

Tritanopia

F65559
D82225
8F3030
684A49
2F2C2A

Achromatopsia

A2A2A2
6F6F6F
4C4C4C
4E4E4E
222222

Shades & Tints Shades & Tints

#FC8B2B

Dark
Light

#DF4B03

Dark
Light

#942C33

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc8b2b;
  --color-2: #df4b03;
  --color-3: #942c33;
  --color-4: #6a3f52;
  --color-5: #30163d;
}

SCSS

$color-1: #fc8b2b;
$color-2: #df4b03;
$color-3: #942c33;
$color-4: #6a3f52;
$color-5: #30163d;

TAILWIND

colors: {
  'brand-1': '#fc8b2b',
  'brand-2': '#df4b03',
  'brand-3': '#942c33',
  'brand-4': '#6a3f52',
  'brand-5': '#30163d',
}

RGB Array

[252, 139, 43], [223, 75, 3], [148, 44, 51], [106, 63, 82], [48, 22, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC8B2B, #DF4B03, #942C33, #6A3F52, #30163D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fc8b2b; --color-2: #df4b03; --color-3: #942c33; --color-4: #6a3f52; --color-5: #30163d. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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