← Back to Editor

#F28703 · #A31211 · #2C0108 · #AD864D · #013E4F

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 App

Color Details Color Details

#F28703

Ochre · Orange · Amber Brown

HEX
#F28703
RGB
rgb(242, 135, 3)
HSL
hsl(33, 98%, 48%)
HSB
hsb(33, 99%, 95%)
CMYK
cmyk(0%, 44%, 99%, 5%)
Oklch
oklch(72.5% 0.171 59.3)

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

#A31211

Vermilion · FireBrick · Wine Red

HEX
#A31211
RGB
rgb(163, 18, 17)
HSL
hsl(0, 81%, 35%)
HSB
hsb(0, 90%, 64%)
CMYK
cmyk(0%, 89%, 90%, 36%)
Oklch
oklch(45.7% 0.177 28.2)

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

#2C0108

Vermilion · Black · Deep Berry

HEX
#2C0108
RGB
rgb(44, 1, 8)
HSL
hsl(350, 96%, 9%)
HSB
hsb(350, 98%, 17%)
CMYK
cmyk(0%, 98%, 82%, 83%)
Oklch
oklch(18.8% 0.072 15.9)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#AD864D

Ochre · Sienna · Amber Brown

HEX
#AD864D
RGB
rgb(173, 134, 77)
HSL
hsl(36, 38%, 49%)
HSB
hsb(36, 55%, 68%)
CMYK
cmyk(0%, 23%, 55%, 32%)
Oklch
oklch(64.5% 0.089 75.6)

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

#013E4F

Lake Blue · DarkSlateGray · Peacock Green

HEX
#013E4F
RGB
rgb(1, 62, 79)
HSL
hsl(193, 98%, 16%)
HSB
hsb(193, 99%, 31%)
CMYK
cmyk(99%, 22%, 0%, 69%)
Oklch
oklch(33.8% 0.063 223.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F28703
026EF2

Analogous

F20E02
F28703
E6F202

Triadic

F28703
02F286
8602F2

Split-Comp.

F28703
02E6F2
0E02F2

Tetradic

F28703
02F20E
026EF2
F202E6

Contrast Matrix WCAG 2.1 Contrast

F28703
A31211
2C0108
AD864D
013E4F
—
3.1
AA Large
7.4
AAA
1.3
Fail
4.6
AA
3.1
AA Large
—
2.4
Fail
2.4
Fail
1.5
Fail
7.4
AAA
2.4
Fail
—
5.6
AA
1.6
Fail
1.3
Fail
2.4
Fail
5.6
AA
—
3.5
AA Large
4.6
AA
1.5
Fail
1.6
Fail
3.5
AA Large
—
White BG
2.5Fail
7.9AAA
18.8AAA
3.3AA Large
11.6AAA
Black BG
8.2AAA
2.7Fail
1.1Fail
6.3AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C323
646311
191906
9C9C5B
1B1C4B

Deuteranopia

CAD22B
6D7811
1C1F06
9EA15E
18134A

Tritanopia

ED3C42
9C1111
2A0505
AB6668
044847

Achromatopsia

989898
3D3D3D
0F0F0F
8B8B8B
2E2E2E

Shades & Tints Shades & Tints

#F28703

Dark
Light

#A31211

Dark
Light

#2C0108

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f28703;
  --color-2: #a31211;
  --color-3: #2c0108;
  --color-4: #ad864d;
  --color-5: #013e4f;
}

SCSS

$color-1: #f28703;
$color-2: #a31211;
$color-3: #2c0108;
$color-4: #ad864d;
$color-5: #013e4f;

TAILWIND

colors: {
  'brand-1': '#f28703',
  'brand-2': '#a31211',
  'brand-3': '#2c0108',
  'brand-4': '#ad864d',
  'brand-5': '#013e4f',
}

RGB Array

[242, 135, 3], [163, 18, 17], [44, 1, 8], [173, 134, 77], [1, 62, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F28703, #A31211, #2C0108, #AD864D, #013E4F is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. 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: #f28703; --color-2: #a31211; --color-3: #2c0108; --color-4: #ad864d; --color-5: #013e4f. 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 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