← Back to Editor

#FF6200 · #FF003C · #C90061 · #570038 · #22002E

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

#FF6200

Tangerine · OrangeRed · Amber Brown

HEX
#FF6200
RGB
rgb(255, 98, 0)
HSL
hsl(23, 100%, 50%)
HSB
hsb(23, 100%, 100%)
CMYK
cmyk(0%, 62%, 100%, 0%)
Oklch
oklch(69.1% 0.207 42.3)

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

#FF003C

Vermilion · Crimson · Passion Red

HEX
#FF003C
RGB
rgb(255, 0, 60)
HSL
hsl(346, 100%, 50%)
HSB
hsb(346, 100%, 100%)
CMYK
cmyk(0%, 100%, 76%, 0%)
Oklch
oklch(63.2% 0.254 21.8)

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

#C90061

Dark Violet · MediumVioletRed · Camellia

HEX
#C90061
RGB
rgb(201, 0, 97)
HSL
hsl(331, 100%, 39%)
HSB
hsb(331, 100%, 79%)
CMYK
cmyk(0%, 100%, 52%, 21%)
Oklch
oklch(53.9% 0.217 3.4)

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

#570038

Rose Purple · Maroon · Raspberry

HEX
#570038
RGB
rgb(87, 0, 56)
HSL
hsl(321, 100%, 17%)
HSB
hsb(321, 100%, 34%)
CMYK
cmyk(0%, 100%, 36%, 66%)
Oklch
oklch(30.2% 0.126 349.0)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#22002E

Royal Purple · Black · Dark Purple

HEX
#22002E
RGB
rgb(34, 0, 46)
HSL
hsl(284, 100%, 9%)
HSB
hsb(284, 100%, 18%)
CMYK
cmyk(26%, 100%, 0%, 82%)
Oklch
oklch(18.8% 0.092 315.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF6200
009DFF

Analogous

FF001E
FF6200
FFE100

Triadic

FF6200
00FF62
6200FF

Split-Comp.

FF6200
00FFE1
001EFF

Tetradic

FF6200
1EFF00
009DFF
E100FF

Contrast Matrix WCAG 2.1 Contrast

FF6200
FF003C
C90061
570038
22002E
—
1.3
Fail
1.9
Fail
4.8
AA
6.3
AA
1.3
Fail
—
1.5
Fail
3.6
AA Large
4.8
AA
1.9
Fail
1.5
Fail
—
2.5
Fail
3.3
AA Large
4.8
AA
3.6
AA Large
2.5
Fail
—
1.3
Fail
6.3
AA
4.8
AA
3.3
AA Large
1.3
Fail
—
White BG
3.0AA Large
3.9AA Large
5.7AA
14.4AAA
19.0AAA
Black BG
7.0AA
5.3AA
3.7AA Large
1.5Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBA18
918E2D
72704A
31312A
131323

Deuteranopia

C4D01D
9FB32A
7E8D44
363D27
151820

Tritanopia

F72A2F
F22220
BF3733
53201D
201A18

Achromatopsia

868686
535353
474747
202020
0F0F0F

Shades & Tints Shades & Tints

#FF6200

Dark
Light

#FF003C

Dark
Light

#C90061

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff6200;
  --color-2: #ff003c;
  --color-3: #c90061;
  --color-4: #570038;
  --color-5: #22002e;
}

SCSS

$color-1: #ff6200;
$color-2: #ff003c;
$color-3: #c90061;
$color-4: #570038;
$color-5: #22002e;

TAILWIND

colors: {
  'brand-1': '#ff6200',
  'brand-2': '#ff003c',
  'brand-3': '#c90061',
  'brand-4': '#570038',
  'brand-5': '#22002e',
}

RGB Array

[255, 98, 0], [255, 0, 60], [201, 0, 97], [87, 0, 56], [34, 0, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF6200, #FF003C, #C90061, #570038, #22002E 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: #ff6200; --color-2: #ff003c; --color-3: #c90061; --color-4: #570038; --color-5: #22002e. 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