← Back to Editor

#FF8076 · #FB2B79 · #C2798D · #A2979B · #8BA9B1

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

#FF8076

Peach Pink · Salmon · Coral Red

HEX
#FF8076
RGB
rgb(255, 128, 118)
HSL
hsl(4, 100%, 73%)
HSB
hsb(4, 54%, 100%)
CMYK
cmyk(0%, 50%, 54%, 0%)
Oklch
oklch(74.2% 0.156 26.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FB2B79

Dark Violet · DeepPink · Rose Pink

HEX
#FB2B79
RGB
rgb(251, 43, 121)
HSL
hsl(338, 96%, 58%)
HSB
hsb(338, 83%, 98%)
CMYK
cmyk(0%, 83%, 52%, 2%)
Oklch
oklch(64.9% 0.240 5.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#C2798D

Rouge · LightCoral · Rose Pink

HEX
#C2798D
RGB
rgb(194, 121, 141)
HSL
hsl(344, 37%, 62%)
HSB
hsb(344, 38%, 76%)
CMYK
cmyk(0%, 38%, 27%, 24%)
Oklch
oklch(65.9% 0.094 2.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#A2979B

Ash · DarkGray · Silver Sand

HEX
#A2979B
RGB
rgb(162, 151, 155)
HSL
hsl(338, 6%, 61%)
HSB
hsb(338, 7%, 64%)
CMYK
cmyk(0%, 7%, 4%, 36%)
Oklch
oklch(68.7% 0.014 353.3)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#8BA9B1

Sky Blue · DarkGray · Lake Green

HEX
#8BA9B1
RGB
rgb(139, 169, 177)
HSL
hsl(193, 20%, 62%)
HSB
hsb(193, 21%, 69%)
CMYK
cmyk(21%, 5%, 0%, 31%)
Oklch
oklch(71.5% 0.035 215.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF8076
75F6FF

Analogous

FF75B1
FF8076
FFC375

Triadic

FF8076
75FF7E
7E75FF

Split-Comp.

FF8076
75FFC3
75B1FF

Tetradic

FF8076
B1FF75
75F6FF
C375FF

Contrast Matrix WCAG 2.1 Contrast

FF8076
FB2B79
C2798D
A2979B
8BA9B1
—
1.5
Fail
1.3
Fail
1.2
Fail
1.0
Fail
1.5
Fail
—
1.1
Fail
1.3
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.2
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.0
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
White BG
2.4Fail
3.7AA Large
3.3AA Large
2.8Fail
2.5Fail
Black BG
8.6AAA
5.7AA
6.4AA
7.4AAA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C778
A19F66
A2A288
9D9D9A
9898AF

Deuteranopia

CFD979
ADBD62
A7AC87
9E9F9A
9694AF

Tritanopia

F97A7B
F15754
BE8484
A19999
8CAEAD

Achromatopsia

A5A5A5
727272
919191
9B9B9B
A1A1A1

Shades & Tints Shades & Tints

#FF8076

Dark
Light

#FB2B79

Dark
Light

#C2798D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff8076;
  --color-2: #fb2b79;
  --color-3: #c2798d;
  --color-4: #a2979b;
  --color-5: #8ba9b1;
}

SCSS

$color-1: #ff8076;
$color-2: #fb2b79;
$color-3: #c2798d;
$color-4: #a2979b;
$color-5: #8ba9b1;

TAILWIND

colors: {
  'brand-1': '#ff8076',
  'brand-2': '#fb2b79',
  'brand-3': '#c2798d',
  'brand-4': '#a2979b',
  'brand-5': '#8ba9b1',
}

RGB Array

[255, 128, 118], [251, 43, 121], [194, 121, 141], [162, 151, 155], [139, 169, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF8076, #FB2B79, #C2798D, #A2979B, #8BA9B1 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: #ff8076; --color-2: #fb2b79; --color-3: #c2798d; --color-4: #a2979b; --color-5: #8ba9b1. 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