← Back to Editor

#FA5300 · #CC4400 · #A83800 · #802A00 · #1E1E1F

earth

A 5-color earth 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

#FA5300

Tangerine · OrangeRed · Amber Brown

HEX
#FA5300
RGB
rgb(250, 83, 0)
HSL
hsl(20, 100%, 49%)
HSB
hsb(20, 100%, 98%)
CMYK
cmyk(0%, 67%, 100%, 2%)
Oklch
oklch(66.6% 0.214 38.8)

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

#CC4400

Tangerine · Chocolate · Amber Brown

HEX
#CC4400
RGB
rgb(204, 68, 0)
HSL
hsl(20, 100%, 40%)
HSB
hsb(20, 100%, 80%)
CMYK
cmyk(0%, 67%, 100%, 20%)
Oklch
oklch(57.3% 0.182 39.3)

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

#A83800

Tangerine · FireBrick · Amber Brown

HEX
#A83800
RGB
rgb(168, 56, 0)
HSL
hsl(20, 100%, 33%)
HSB
hsb(20, 100%, 66%)
CMYK
cmyk(0%, 67%, 100%, 34%)
Oklch
oklch(49.8% 0.157 39.9)

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

#802A00

Tangerine · Maroon · Cinnamon

HEX
#802A00
RGB
rgb(128, 42, 0)
HSL
hsl(20, 100%, 25%)
HSB
hsb(20, 100%, 50%)
CMYK
cmyk(0%, 67%, 100%, 50%)
Oklch
oklch(41.0% 0.127 40.6)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#1E1E1F

Ink Black · Black · Dark Stone

HEX
#1E1E1F
RGB
rgb(30, 30, 31)
HSL
hsl(240, 2%, 12%)
HSB
hsb(240, 3%, 12%)
CMYK
cmyk(3%, 3%, 0%, 88%)
Oklch
oklch(23.5% 0.002 286.3)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA5300
00A7FA

Analogous

FA002A
FA5300
FAD000

Triadic

FA5300
00FA53
5300FA

Split-Comp.

FA5300
00FAD0
002AFA

Tetradic

FA5300
2AFA00
00A7FA
D000FA

Contrast Matrix WCAG 2.1 Contrast

FA5300
CC4400
A83800
802A00
1E1E1F
—
1.4
Fail
2.0
Fail
2.8
Fail
5.0
AA
1.4
Fail
—
1.4
Fail
2.0
Fail
3.5
AA Large
2.0
Fail
1.4
Fail
—
1.4
Fail
2.6
Fail
2.8
Fail
2.0
Fail
1.4
Fail
—
1.8
Fail
5.0
AA
3.5
AA Large
2.6
Fail
1.8
Fail
—
White BG
3.3AA Large
4.8AA
6.5AA
9.3AAA
16.7AAA
Black BG
6.3AA
4.4AA Large
3.2AA Large
2.2Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B014
919010
78760E
5B5A0A
1E1E1F

Deuteranopia

BBC819
99A314
7E8611
60660D
1E1E1F

Tritanopia

F22427
C51D20
A2181B
7C1214
1E1F1F

Achromatopsia

7B7B7B
656565
535353
3F3F3F
1E1E1E

Shades & Tints Shades & Tints

#FA5300

Dark
Light

#CC4400

Dark
Light

#A83800

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa5300;
  --color-2: #cc4400;
  --color-3: #a83800;
  --color-4: #802a00;
  --color-5: #1e1e1f;
}

SCSS

$color-1: #fa5300;
$color-2: #cc4400;
$color-3: #a83800;
$color-4: #802a00;
$color-5: #1e1e1f;

TAILWIND

colors: {
  'brand-1': '#fa5300',
  'brand-2': '#cc4400',
  'brand-3': '#a83800',
  'brand-4': '#802a00',
  'brand-5': '#1e1e1f',
}

RGB Array

[250, 83, 0], [204, 68, 0], [168, 56, 0], [128, 42, 0], [30, 30, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #FA5300, #CC4400, #A83800, #802A00, #1E1E1F 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: #fa5300; --color-2: #cc4400; --color-3: #a83800; --color-4: #802a00; --color-5: #1e1e1f. 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 earth-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