← Back to Editor

#FF5500 · #7A013C · #471B2F · #102630 · #F0E8C5

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FF5500

Tangerine · OrangeRed · Amber Brown

HEX
#FF5500
RGB
rgb(255, 85, 0)
HSL
hsl(20, 100%, 50%)
HSB
hsb(20, 100%, 100%)
CMYK
cmyk(0%, 67%, 100%, 0%)
Oklch
oklch(67.6% 0.217 38.8)

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

#7A013C

Dark Violet · Maroon · Raspberry

HEX
#7A013C
RGB
rgb(122, 1, 60)
HSL
hsl(331, 98%, 24%)
HSB
hsb(331, 99%, 48%)
CMYK
cmyk(0%, 99%, 51%, 52%)
Oklch
oklch(37.5% 0.151 1.2)

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

#471B2F

Dark Violet · DarkSlateGray · Raspberry

HEX
#471B2F
RGB
rgb(71, 27, 47)
HSL
hsl(333, 45%, 19%)
HSB
hsb(333, 62%, 28%)
CMYK
cmyk(0%, 62%, 34%, 72%)
Oklch
oklch(29.5% 0.072 354.0)

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

#102630

Slate Blue · DarkSlateGray · Peacock Green

HEX
#102630
RGB
rgb(16, 38, 48)
HSL
hsl(199, 50%, 13%)
HSB
hsb(199, 67%, 19%)
CMYK
cmyk(67%, 21%, 0%, 81%)
Oklch
oklch(25.6% 0.034 229.6)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#F0E8C5

Goose Yellow · Bisque · Lemon Cream

HEX
#F0E8C5
RGB
rgb(240, 232, 197)
HSL
hsl(49, 59%, 86%)
HSB
hsb(49, 18%, 94%)
CMYK
cmyk(0%, 3%, 18%, 6%)
Oklch
oklch(92.8% 0.047 96.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF5500
00AAFF

Analogous

FF002B
FF5500
FFD400

Triadic

FF5500
00FF55
5500FF

Split-Comp.

FF5500
00FFD5
002AFF

Tetradic

FF5500
2BFF00
00AAFF
D400FF

Contrast Matrix WCAG 2.1 Contrast

FF5500
7A013C
471B2F
102630
F0E8C5
—
3.5
AA Large
4.5
AA Large
4.9
AA
2.6
Fail
3.5
AA Large
—
1.3
Fail
1.4
Fail
9.0
AAA
4.5
AA Large
1.3
Fail
—
1.1
Fail
11.6
AAA
4.9
AA
1.4
Fail
1.1
Fail
—
12.7
AAA
2.6
Fail
9.0
AAA
11.6
AAA
12.7
AAA
—
White BG
3.2AA Large
11.1AAA
14.3AAA
15.6AAA
1.2Fail
Black BG
6.6AA
1.9Fail
1.5Fail
1.3Fail
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B415
46452E
34342A
1A1A2E
EDECCD

Deuteranopia

BFCC1A
4D562A
373A29
18172D
EDEECF

Tritanopia

F72528
742220
452626
112C2B
F0D4D6

Achromatopsia

7E7E7E
2C2C2C
2A2A2A
212121
E6E6E6

Shades & Tints Shades & Tints

#FF5500

Dark
Light

#7A013C

Dark
Light

#471B2F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff5500;
  --color-2: #7a013c;
  --color-3: #471b2f;
  --color-4: #102630;
  --color-5: #f0e8c5;
}

SCSS

$color-1: #ff5500;
$color-2: #7a013c;
$color-3: #471b2f;
$color-4: #102630;
$color-5: #f0e8c5;

TAILWIND

colors: {
  'brand-1': '#ff5500',
  'brand-2': '#7a013c',
  'brand-3': '#471b2f',
  'brand-4': '#102630',
  'brand-5': '#f0e8c5',
}

RGB Array

[255, 85, 0], [122, 1, 60], [71, 27, 47], [16, 38, 48], [240, 232, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF5500, #7A013C, #471B2F, #102630, #F0E8C5 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: #ff5500; --color-2: #7a013c; --color-3: #471b2f; --color-4: #102630; --color-5: #f0e8c5. 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