← Back to Editor

#227F99 · #5884A2 · #8D88AB · #C28DB4 · #F791BD

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

#227F99

Lake Blue · Teal · Mint Ice

HEX
#227F99
RGB
rgb(34, 127, 153)
HSL
hsl(193, 64%, 37%)
HSB
hsb(193, 78%, 60%)
CMYK
cmyk(78%, 17%, 0%, 40%)
Oklch
oklch(55.6% 0.092 221.2)

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

#5884A2

Slate Blue · SteelBlue · Navy Blue

HEX
#5884A2
RGB
rgb(88, 132, 162)
HSL
hsl(204, 30%, 49%)
HSB
hsb(204, 46%, 64%)
CMYK
cmyk(46%, 19%, 0%, 36%)
Oklch
oklch(59.3% 0.067 239.2)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#8D88AB

Deep Indigo · LightSlateGray · Navy Blue

HEX
#8D88AB
RGB
rgb(141, 136, 171)
HSL
hsl(249, 17%, 60%)
HSB
hsb(249, 20%, 67%)
CMYK
cmyk(18%, 20%, 0%, 33%)
Oklch
oklch(64.3% 0.052 291.4)

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

#C28DB4

Mauve · DarkGray · Lilac Purple

HEX
#C28DB4
RGB
rgb(194, 141, 180)
HSL
hsl(316, 30%, 66%)
HSB
hsb(316, 27%, 76%)
CMYK
cmyk(0%, 27%, 7%, 24%)
Oklch
oklch(70.7% 0.083 336.3)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#F791BD

Rouge · LightPink · Cherry Blossom

HEX
#F791BD
RGB
rgb(247, 145, 189)
HSL
hsl(334, 86%, 77%)
HSB
hsb(334, 41%, 97%)
CMYK
cmyk(0%, 41%, 23%, 3%)
Oklch
oklch(77.6% 0.133 353.3)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

227F99
9B3C22

Analogous

229B79
227F99
22449B

Triadic

227F99
9B2281
819B22

Split-Comp.

227F99
9B2244
9B7922

Tetradic

227F99
79229B
9B3C22
449B22

Contrast Matrix WCAG 2.1 Contrast

227F99
5884A2
8D88AB
C28DB4
F791BD
—
1.1
Fail
1.4
Fail
1.7
Fail
2.1
Fail
1.1
Fail
—
1.2
Fail
1.5
Fail
1.9
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
1.7
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
2.1
Fail
1.9
Fail
1.6
Fail
1.3
Fail
—
White BG
4.6AA
4.0AA Large
3.4AA Large
2.7Fail
2.2Fail
Black BG
4.6AA
5.2AA
6.2AA
7.8AAA
9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4B93
6B6B9B
8B8BA3
ABABAB
CBCAB2

Deuteranopia

453E91
696599
8B8CA1
AEB2A8
D1D8B0

Tritanopia

278E8D
5A9594
8D9C9A
BFA3A1
F2AAA8

Achromatopsia

666666
7A7A7A
8D8D8D
A1A1A1
B5B5B5

Shades & Tints Shades & Tints

#227F99

Dark
Light

#5884A2

Dark
Light

#8D88AB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #227f99;
  --color-2: #5884a2;
  --color-3: #8d88ab;
  --color-4: #c28db4;
  --color-5: #f791bd;
}

SCSS

$color-1: #227f99;
$color-2: #5884a2;
$color-3: #8d88ab;
$color-4: #c28db4;
$color-5: #f791bd;

TAILWIND

colors: {
  'brand-1': '#227f99',
  'brand-2': '#5884a2',
  'brand-3': '#8d88ab',
  'brand-4': '#c28db4',
  'brand-5': '#f791bd',
}

RGB Array

[34, 127, 153], [88, 132, 162], [141, 136, 171], [194, 141, 180], [247, 145, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #227F99, #5884A2, #8D88AB, #C28DB4, #F791BD 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: #227f99; --color-2: #5884a2; --color-3: #8d88ab; --color-4: #c28db4; --color-5: #f791bd. 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