← Back to Editor

#8CF3F5 · #86CBF0 · #7780C9 · #554287 · #1A0729

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#8CF3F5

Sky Blue · LightSkyBlue · Lake Green

HEX
#8CF3F5
RGB
rgb(140, 243, 245)
HSL
hsl(181, 84%, 75%)
HSB
hsb(181, 43%, 96%)
CMYK
cmyk(43%, 1%, 0%, 4%)
Oklch
oklch(90.3% 0.096 197.2)

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

#86CBF0

Sky Blue · SkyBlue · Cobalt Blue

HEX
#86CBF0
RGB
rgb(134, 203, 240)
HSL
hsl(201, 78%, 73%)
HSB
hsb(201, 44%, 94%)
CMYK
cmyk(44%, 15%, 0%, 6%)
Oklch
oklch(81.0% 0.087 232.8)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#7780C9

Azure · SlateBlue · Cobalt Blue

HEX
#7780C9
RGB
rgb(119, 128, 201)
HSL
hsl(233, 43%, 63%)
HSB
hsb(233, 41%, 79%)
CMYK
cmyk(41%, 36%, 0%, 21%)
Oklch
oklch(62.3% 0.110 277.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#554287

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#554287
RGB
rgb(85, 66, 135)
HSL
hsl(257, 34%, 39%)
HSB
hsb(257, 51%, 53%)
CMYK
cmyk(37%, 51%, 0%, 47%)
Oklch
oklch(43.3% 0.111 294.0)

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

#1A0729

Royal Purple · Black · Dark Purple

HEX
#1A0729
RGB
rgb(26, 7, 41)
HSL
hsl(274, 71%, 9%)
HSB
hsb(274, 83%, 16%)
CMYK
cmyk(37%, 83%, 0%, 84%)
Oklch
oklch(18.3% 0.068 306.7)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8CF3F5
F58B8A

Analogous

8AF5C1
8CF3F5
8ABDF5

Triadic

8CF3F5
F58AF3
F3F58A

Split-Comp.

8CF3F5
F58ABD
F5C18A

Tetradic

8CF3F5
C18AF5
F58B8A
BDF58A

Contrast Matrix WCAG 2.1 Contrast

8CF3F5
86CBF0
7780C9
554287
1A0729
—
1.4
Fail
2.8
Fail
6.5
AA
14.7
AAA
1.4
Fail
—
2.1
Fail
4.7
AA
10.7
AAA
2.8
Fail
2.1
Fail
—
2.3
Fail
5.2
AA
6.5
AA
4.7
AA
2.3
Fail
—
2.3
Fail
14.7
AAA
10.7
AAA
5.2
AA
2.3
Fail
—
White BG
1.3Fail
1.8Fail
3.7AA Large
8.3AAA
19.0AAA
Black BG
16.3AAA
11.8AAA
5.7AA
2.5Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9BAF5
A4A4E7
7B7BB7
4D4D76
121221

Deuteranopia

B3ABF4
A09BE5
7A7AB3
4E4F72
13141F

Tritanopia

91F4F4
89E0DE
77A9A6
546966
191A19

Achromatopsia

D4D4D4
BBBBBB
868686
505050
111111

Shades & Tints Shades & Tints

#8CF3F5

Dark
Light

#86CBF0

Dark
Light

#7780C9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8cf3f5;
  --color-2: #86cbf0;
  --color-3: #7780c9;
  --color-4: #554287;
  --color-5: #1a0729;
}

SCSS

$color-1: #8cf3f5;
$color-2: #86cbf0;
$color-3: #7780c9;
$color-4: #554287;
$color-5: #1a0729;

TAILWIND

colors: {
  'brand-1': '#8cf3f5',
  'brand-2': '#86cbf0',
  'brand-3': '#7780c9',
  'brand-4': '#554287',
  'brand-5': '#1a0729',
}

RGB Array

[140, 243, 245], [134, 203, 240], [119, 128, 201], [85, 66, 135], [26, 7, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8CF3F5, #86CBF0, #7780C9, #554287, #1A0729 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8cf3f5; --color-2: #86cbf0; --color-3: #7780c9; --color-4: #554287; --color-5: #1a0729. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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