← Back to Editor

#8BC3C8 · #98B8C9 · #A3ABC6 · #B09FC6 · #BA91C4

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8BC3C8

Sky Blue · SkyBlue · Lake Green

HEX
#8BC3C8
RGB
rgb(139, 195, 200)
HSL
hsl(185, 36%, 66%)
HSB
hsb(185, 31%, 78%)
CMYK
cmyk(31%, 3%, 0%, 22%)
Oklch
oklch(78.0% 0.058 203.0)

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

#98B8C9

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#98B8C9
RGB
rgb(152, 184, 201)
HSL
hsl(201, 31%, 69%)
HSB
hsb(201, 24%, 79%)
CMYK
cmyk(24%, 8%, 0%, 21%)
Oklch
oklch(76.5% 0.042 231.2)

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

#A3ABC6

Azure · DarkGray · Cobalt Blue

HEX
#A3ABC6
RGB
rgb(163, 171, 198)
HSL
hsl(226, 23%, 71%)
HSB
hsb(226, 18%, 78%)
CMYK
cmyk(18%, 14%, 0%, 22%)
Oklch
oklch(74.4% 0.040 272.4)

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

#B09FC6

Wisteria · DarkGray · Lilac Purple

HEX
#B09FC6
RGB
rgb(176, 159, 198)
HSL
hsl(266, 25%, 70%)
HSB
hsb(266, 20%, 78%)
CMYK
cmyk(11%, 20%, 0%, 22%)
Oklch
oklch(73.0% 0.059 304.8)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#BA91C4

Lilac · DarkGray · Lilac Purple

HEX
#BA91C4
RGB
rgb(186, 145, 196)
HSL
hsl(288, 30%, 67%)
HSB
hsb(288, 26%, 77%)
CMYK
cmyk(5%, 26%, 0%, 23%)
Oklch
oklch(71.2% 0.086 319.6)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8BC3C8
C88E89

Analogous

89C8AE
8BC3C8
89A3C8

Triadic

8BC3C8
C889C2
C2C889

Split-Comp.

8BC3C8
C889A3
C8AE89

Tetradic

8BC3C8
AE89C8
C88E89
A3C889

Contrast Matrix WCAG 2.1 Contrast

8BC3C8
98B8C9
A3ABC6
B09FC6
BA91C4
—
1.1
Fail
1.2
Fail
1.2
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
White BG
2.0Fail
2.1Fail
2.3Fail
2.4Fail
2.6Fail
Black BG
10.7AAA
10.0AAA
9.2AAA
8.6AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A4C7
A6A6C5
A6A7BF
A9A8BD
A8A8B8

Deuteranopia

A09CC7
A4A2C4
A6A5BE
AAABBA
ABAEB5

Tritanopia

8EC6C6
9AC2C1
A3BAB9
AFB5B3
B8AEAC

Achromatopsia

B3B3B3
B0B0B0
ACACAC
A9A9A9
A3A3A3

Shades & Tints Shades & Tints

#8BC3C8

Dark
Light

#98B8C9

Dark
Light

#A3ABC6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8bc3c8;
  --color-2: #98b8c9;
  --color-3: #a3abc6;
  --color-4: #b09fc6;
  --color-5: #ba91c4;
}

SCSS

$color-1: #8bc3c8;
$color-2: #98b8c9;
$color-3: #a3abc6;
$color-4: #b09fc6;
$color-5: #ba91c4;

TAILWIND

colors: {
  'brand-1': '#8bc3c8',
  'brand-2': '#98b8c9',
  'brand-3': '#a3abc6',
  'brand-4': '#b09fc6',
  'brand-5': '#ba91c4',
}

RGB Array

[139, 195, 200], [152, 184, 201], [163, 171, 198], [176, 159, 198], [186, 145, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8BC3C8, #98B8C9, #A3ABC6, #B09FC6, #BA91C4 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8bc3c8; --color-2: #98b8c9; --color-3: #a3abc6; --color-4: #b09fc6; --color-5: #ba91c4. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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