← Back to Editor

#F95860 · #8C4B69 · #448E77 · #83A559 · #FA9E3B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F95860

Peach Pink · Tomato · Coral Red

HEX
#F95860
RGB
rgb(249, 88, 96)
HSL
hsl(357, 93%, 66%)
HSB
hsb(357, 65%, 98%)
CMYK
cmyk(0%, 65%, 61%, 2%)
Oklch
oklch(67.8% 0.196 21.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#8C4B69

Dark Violet · DimGray · Camellia

HEX
#8C4B69
RGB
rgb(140, 75, 105)
HSL
hsl(332, 30%, 42%)
HSB
hsb(332, 46%, 55%)
CMYK
cmyk(0%, 46%, 25%, 45%)
Oklch
oklch(50.0% 0.095 352.0)

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

#448E77

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#448E77
RGB
rgb(68, 142, 119)
HSL
hsl(161, 35%, 41%)
HSB
hsb(161, 52%, 56%)
CMYK
cmyk(52%, 0%, 16%, 44%)
Oklch
oklch(59.2% 0.083 170.7)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#83A559

Grass Green · Gray · Olive Green

HEX
#83A559
RGB
rgb(131, 165, 89)
HSL
hsl(87, 30%, 50%)
HSB
hsb(87, 46%, 65%)
CMYK
cmyk(21%, 0%, 46%, 35%)
Oklch
oklch(67.9% 0.110 128.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#FA9E3B

Ginger · Coral · Warm Sun

HEX
#FA9E3B
RGB
rgb(250, 158, 59)
HSL
hsl(31, 95%, 61%)
HSB
hsb(31, 76%, 98%)
CMYK
cmyk(0%, 37%, 76%, 2%)
Oklch
oklch(77.7% 0.154 63.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F95860
58F9F1

Analogous

F958B0
F95860
F9A058

Triadic

F95860
60F958
5860F9

Split-Comp.

F95860
58F9A0
58B0F9

Tetradic

F95860
B0F958
58F9F1
A058F9

Contrast Matrix WCAG 2.1 Contrast

F95860
8C4B69
448E77
83A559
FA9E3B
—
2.0
Fail
1.2
Fail
1.1
Fail
1.5
Fail
2.0
Fail
—
1.6
Fail
2.3
Fail
3.0
AA Large
1.2
Fail
1.6
Fail
—
1.4
Fail
1.9
Fail
1.1
Fail
2.3
Fail
1.4
Fail
—
1.3
Fail
1.5
Fail
3.0
AA Large
1.9
Fail
1.3
Fail
—
White BG
3.2AA Large
6.3AA
3.9AA Large
2.8Fail
2.1Fail
Black BG
6.6AA
3.3AA Large
5.4AA
7.5AAA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B25E
706F62
64657D
92926B
D2D153

Deuteranopia

BDC95E
747960
605A7E
908D70
D8DE59

Tritanopia

F15D5C
895C5B
488182
857A7D
F5666A

Achromatopsia

898989
626262
757575
929292
AEAEAE

Shades & Tints Shades & Tints

#F95860

Dark
Light

#8C4B69

Dark
Light

#448E77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f95860;
  --color-2: #8c4b69;
  --color-3: #448e77;
  --color-4: #83a559;
  --color-5: #fa9e3b;
}

SCSS

$color-1: #f95860;
$color-2: #8c4b69;
$color-3: #448e77;
$color-4: #83a559;
$color-5: #fa9e3b;

TAILWIND

colors: {
  'brand-1': '#f95860',
  'brand-2': '#8c4b69',
  'brand-3': '#448e77',
  'brand-4': '#83a559',
  'brand-5': '#fa9e3b',
}

RGB Array

[249, 88, 96], [140, 75, 105], [68, 142, 119], [131, 165, 89], [250, 158, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F95860, #8C4B69, #448E77, #83A559, #FA9E3B 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: #f95860; --color-2: #8c4b69; --color-3: #448e77; --color-4: #83a559; --color-5: #fa9e3b. 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