← Back to Editor

#FA5690 · #CE6187 · #A26B7E · #807A6E · #609183

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

#FA5690

Rouge · LightCoral · Rose Pink

HEX
#FA5690
RGB
rgb(250, 86, 144)
HSL
hsl(339, 94%, 66%)
HSB
hsb(339, 66%, 98%)
CMYK
cmyk(0%, 66%, 42%, 2%)
Oklch
oklch(68.8% 0.204 2.4)

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

#CE6187

Dark Violet · LightCoral · Rose Pink

HEX
#CE6187
RGB
rgb(206, 97, 135)
HSL
hsl(339, 53%, 59%)
HSB
hsb(339, 53%, 81%)
CMYK
cmyk(0%, 53%, 34%, 19%)
Oklch
oklch(63.5% 0.143 0.0)

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

#A26B7E

Dark Violet · Gray · Rose Pink

HEX
#A26B7E
RGB
rgb(162, 107, 126)
HSL
hsl(339, 23%, 53%)
HSB
hsb(339, 34%, 64%)
CMYK
cmyk(0%, 34%, 22%, 36%)
Oklch
oklch(59.1% 0.074 357.3)

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

#807A6E

Ochre · Gray · Warm Gray

HEX
#807A6E
RGB
rgb(128, 122, 110)
HSL
hsl(40, 8%, 47%)
HSB
hsb(40, 14%, 50%)
CMYK
cmyk(0%, 5%, 14%, 50%)
Oklch
oklch(58.1% 0.019 84.6)

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

#609183

Mineral Blue · SlateGray · Mint Ice

HEX
#609183
RGB
rgb(96, 145, 131)
HSL
hsl(163, 20%, 47%)
HSB
hsb(163, 34%, 57%)
CMYK
cmyk(34%, 0%, 10%, 43%)
Oklch
oklch(61.7% 0.057 174.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA5690
57FAC1

Analogous

FA57E1
FA5690
FA6F57

Triadic

FA5690
90FA57
5790FA

Split-Comp.

FA5690
57FA6F
57E1FA

Tetradic

FA5690
E1FA57
57FAC1
6F57FA

Contrast Matrix WCAG 2.1 Contrast

FA5690
CE6187
A26B7E
807A6E
609183
—
1.2
Fail
1.4
Fail
1.4
Fail
1.2
Fail
1.2
Fail
—
1.2
Fail
1.2
Fail
1.0
Fail
1.4
Fail
1.2
Fail
—
1.0
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.0
Fail
—
1.2
Fail
1.2
Fail
1.0
Fail
1.2
Fail
1.2
Fail
—
White BG
3.1AA Large
3.7AA Large
4.3AA Large
4.3AA Large
3.6AA Large
Black BG
6.8AA
5.7AA
4.9AA
4.9AA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B282
9F9E7E
8A8A79
7D7D71
757686

Deuteranopia

BDC97F
A5AD7C
8D9278
7E7E72
726F87

Tritanopia

F27774
C97775
9F7675
807374
62898A

Achromatopsia

8E8E8E
868686
7E7E7E
7A7A7A
818181

Shades & Tints Shades & Tints

#FA5690

Dark
Light

#CE6187

Dark
Light

#A26B7E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa5690;
  --color-2: #ce6187;
  --color-3: #a26b7e;
  --color-4: #807a6e;
  --color-5: #609183;
}

SCSS

$color-1: #fa5690;
$color-2: #ce6187;
$color-3: #a26b7e;
$color-4: #807a6e;
$color-5: #609183;

TAILWIND

colors: {
  'brand-1': '#fa5690',
  'brand-2': '#ce6187',
  'brand-3': '#a26b7e',
  'brand-4': '#807a6e',
  'brand-5': '#609183',
}

RGB Array

[250, 86, 144], [206, 97, 135], [162, 107, 126], [128, 122, 110], [96, 145, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FA5690, #CE6187, #A26B7E, #807A6E, #609183 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: #fa5690; --color-2: #ce6187; --color-3: #a26b7e; --color-4: #807a6e; --color-5: #609183. 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