← Back to Editor

#858D47 · #FFFFFF · #FA9223 · #F55F1A · #080868

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

#858D47

Autumn Sage · DimGray · Honey Gold

HEX
#858D47
RGB
rgb(133, 141, 71)
HSL
hsl(67, 33%, 42%)
HSB
hsb(67, 50%, 55%)
CMYK
cmyk(6%, 0%, 50%, 45%)
Oklch
oklch(62.1% 0.094 114.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#FA9223

Ginger · GoldenRod · Warm Sun

HEX
#FA9223
RGB
rgb(250, 146, 35)
HSL
hsl(31, 96%, 56%)
HSB
hsb(31, 86%, 98%)
CMYK
cmyk(0%, 42%, 86%, 2%)
Oklch
oklch(75.5% 0.167 60.2)

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

#F55F1A

Tangerine · Chocolate · Warm Sun

HEX
#F55F1A
RGB
rgb(245, 95, 26)
HSL
hsl(19, 92%, 53%)
HSB
hsb(19, 89%, 96%)
CMYK
cmyk(0%, 61%, 89%, 4%)
Oklch
oklch(67.2% 0.198 40.7)

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

#080868

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#080868
RGB
rgb(8, 8, 104)
HSL
hsl(240, 86%, 22%)
HSB
hsb(240, 92%, 41%)
CMYK
cmyk(92%, 92%, 0%, 59%)
Oklch
oklch(24.7% 0.153 267.5)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

858D47
50488E

Analogous

8E7348
858D47
638E48

Triadic

858D47
48868E
8E4886

Split-Comp.

858D47
48638E
73488E

Tetradic

858D47
488E73
50488E
8E4863

Contrast Matrix WCAG 2.1 Contrast

858D47
FFFFFF
FA9223
F55F1A
080868
—
3.6
AA Large
1.6
Fail
1.1
Fail
4.7
AA
3.6
AA Large
—
2.3
Fail
3.2
AA Large
16.9
AAA
1.6
Fail
2.3
Fail
—
1.4
Fail
7.4
AAA
1.1
Fail
3.2
AA Large
1.4
Fail
—
5.2
AA
4.7
AA
16.9
AAA
7.4
AAA
5.2
AA
—
White BG
3.6AA Large
1.0Fail
2.3Fail
3.2AA Large
16.9AAA
Black BG
5.9AA
21.0AAA
9.2AAA
6.5AA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

888958
FFFFFF
CDCC3E
B4B32B
080851

Deuteranopia

88875C
FFFFFF
D3DB44
BDC82F
08084B

Tritanopia

856568
FFFFFF
F55358
EE383B
083E3A

Achromatopsia

838383
FFFFFF
A4A4A4
848484
131313

Shades & Tints Shades & Tints

#858D47

Dark
Light

#FFFFFF

Dark
Light

#FA9223

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #858d47;
  --color-2: #ffffff;
  --color-3: #fa9223;
  --color-4: #f55f1a;
  --color-5: #080868;
}

SCSS

$color-1: #858d47;
$color-2: #ffffff;
$color-3: #fa9223;
$color-4: #f55f1a;
$color-5: #080868;

TAILWIND

colors: {
  'brand-1': '#858d47',
  'brand-2': '#ffffff',
  'brand-3': '#fa9223',
  'brand-4': '#f55f1a',
  'brand-5': '#080868',
}

RGB Array

[133, 141, 71], [255, 255, 255], [250, 146, 35], [245, 95, 26], [8, 8, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #858D47, #FFFFFF, #FA9223, #F55F1A, #080868 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #858d47; --color-2: #ffffff; --color-3: #fa9223; --color-4: #f55f1a; --color-5: #080868. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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