← Back to Editor

#F48106 · #8D8479 · #F709B6 · #F71409 · #50464A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F48106

Ochre · Orange · Amber Brown

HEX
#F48106
RGB
rgb(244, 129, 6)
HSL
hsl(31, 95%, 49%)
HSB
hsb(31, 98%, 96%)
CMYK
cmyk(0%, 47%, 98%, 4%)
Oklch
oklch(71.9% 0.175 55.8)

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

#8D8479

Ginger · Gray · Warm Gray

HEX
#8D8479
RGB
rgb(141, 132, 121)
HSL
hsl(33, 8%, 51%)
HSB
hsb(33, 14%, 55%)
CMYK
cmyk(0%, 6%, 14%, 45%)
Oklch
oklch(61.8% 0.020 73.0)

Traditional「Ginger」· Paint「Warm Gray」· Creative Urban Concrete

#F709B6

Rose Purple · DeepPink · Violet

HEX
#F709B6
RGB
rgb(247, 9, 182)
HSL
hsl(316, 94%, 50%)
HSB
hsb(316, 96%, 97%)
CMYK
cmyk(0%, 96%, 26%, 3%)
Oklch
oklch(65.3% 0.275 344.7)

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

#F71409

Vermilion · Red · Passion Red

HEX
#F71409
RGB
rgb(247, 20, 9)
HSL
hsl(3, 94%, 50%)
HSB
hsb(3, 96%, 97%)
CMYK
cmyk(0%, 92%, 96%, 3%)
Oklch
oklch(61.7% 0.247 29.5)

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

#50464A

Dark Cyan · DarkSlateGray · Charcoal

HEX
#50464A
RGB
rgb(80, 70, 74)
HSL
hsl(336, 7%, 29%)
HSB
hsb(336, 12%, 31%)
CMYK
cmyk(0%, 12%, 7%, 69%)
Oklch
oklch(40.6% 0.015 351.6)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F48106
0679F4

Analogous

F40A06
F48106
F0F406

Triadic

F48106
06F481
8106F4

Split-Comp.

F48106
06F0F4
0A06F4

Tetradic

F48106
06F40A
0679F4
F406F0

Contrast Matrix WCAG 2.1 Contrast

F48106
8D8479
F709B6
F71409
50464A
—
1.4
Fail
1.4
Fail
1.6
Fail
3.4
AA Large
1.4
Fail
—
1.0
Fail
1.1
Fail
2.5
Fail
1.4
Fail
1.0
Fail
—
1.1
Fail
2.4
Fail
1.6
Fail
1.1
Fail
1.1
Fail
—
2.2
Fail
3.4
AA Large
2.5
Fail
2.4
Fail
2.2
Fail
—
White BG
2.6Fail
3.7AA Large
3.7AA Large
4.2AA Large
9.1AAA
Black BG
8.0AAA
5.7AA
5.7AA
5.1AA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C124
89897C
908E8C
95930C
4C4C49

Deuteranopia

C9D12B
8A8A7C
9EB082
A2B30C
4C4D49

Tritanopia

EE3B40
8D7E7E
EB6B64
EC0E0E
504848

Achromatopsia

959595
858585
646464
575757
494949

Shades & Tints Shades & Tints

#F48106

Dark
Light

#8D8479

Dark
Light

#F709B6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f48106;
  --color-2: #8d8479;
  --color-3: #f709b6;
  --color-4: #f71409;
  --color-5: #50464a;
}

SCSS

$color-1: #f48106;
$color-2: #8d8479;
$color-3: #f709b6;
$color-4: #f71409;
$color-5: #50464a;

TAILWIND

colors: {
  'brand-1': '#f48106',
  'brand-2': '#8d8479',
  'brand-3': '#f709b6',
  'brand-4': '#f71409',
  'brand-5': '#50464a',
}

RGB Array

[244, 129, 6], [141, 132, 121], [247, 9, 182], [247, 20, 9], [80, 70, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F48106, #8D8479, #F709B6, #F71409, #50464A is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f48106; --color-2: #8d8479; --color-3: #f709b6; --color-4: #f71409; --color-5: #50464a. 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. 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 tech, SaaS, healthcare, eco industries. 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