← Back to Editor

#9AE0F4 · #9CC1E8 · #9DA2DD · #9F65C6 · #A308A3

space

A 5-color space 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

#9AE0F4

Sky Blue · LightBlue · Glacier Blue

HEX
#9AE0F4
RGB
rgb(154, 224, 244)
HSL
hsl(193, 80%, 78%)
HSB
hsb(193, 37%, 96%)
CMYK
cmyk(37%, 8%, 0%, 4%)
Oklch
oklch(86.7% 0.075 217.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#9CC1E8

Azure · LightSteelBlue · Cobalt Blue

HEX
#9CC1E8
RGB
rgb(156, 193, 232)
HSL
hsl(211, 62%, 76%)
HSB
hsb(211, 33%, 91%)
CMYK
cmyk(33%, 17%, 0%, 9%)
Oklch
oklch(79.8% 0.068 250.0)

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

#9DA2DD

Azure · LightSteelBlue · Cobalt Blue

HEX
#9DA2DD
RGB
rgb(157, 162, 221)
HSL
hsl(235, 48%, 74%)
HSB
hsb(235, 29%, 87%)
CMYK
cmyk(29%, 27%, 0%, 13%)
Oklch
oklch(73.0% 0.086 280.3)

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

#9F65C6

Dark Plum · MediumOrchid · Violet

HEX
#9F65C6
RGB
rgb(159, 101, 198)
HSL
hsl(276, 46%, 59%)
HSB
hsb(276, 49%, 78%)
CMYK
cmyk(20%, 49%, 0%, 22%)
Oklch
oklch(60.9% 0.152 310.2)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#A308A3

Rose Purple · DarkMagenta · Eggplant

HEX
#A308A3
RGB
rgb(163, 8, 163)
HSL
hsl(300, 91%, 34%)
HSB
hsb(300, 95%, 64%)
CMYK
cmyk(0%, 95%, 0%, 36%)
Oklch
oklch(50.4% 0.228 328.3)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9AE0F4
F4AD9A

Analogous

9AF4DA
9AE0F4
9AB3F4

Triadic

9AE0F4
F49AE0
E0F49A

Split-Comp.

9AE0F4
F49AB3
F4DA9A

Tetradic

9AE0F4
DA9AF4
F4AD9A
B3F49A

Contrast Matrix WCAG 2.1 Contrast

9AE0F4
9CC1E8
9DA2DD
9F65C6
A308A3
—
1.3
Fail
1.7
Fail
2.8
Fail
4.6
AA
1.3
Fail
—
1.3
Fail
2.2
Fail
3.6
AA Large
1.7
Fail
1.3
Fail
—
1.7
Fail
2.8
Fail
2.8
Fail
2.2
Fail
1.7
Fail
—
1.7
Fail
4.6
AA
3.6
AA Large
2.8
Fail
1.7
Fail
—
White BG
1.5Fail
1.9Fail
2.4Fail
4.1AA Large
6.7AA
Black BG
14.3AAA
11.2AAA
8.6AAA
5.2AA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B9EF
ACACDF
9F9FCF
8685AF
605E7D

Deuteranopia

B4AFEE
AAA7DC
9F9FCB
898EA9
697575

Tritanopia

9DEBEB
9ED7D5
9DC3C1
9C9C98
9B6059

Achromatopsia

CDCDCD
BABABA
A7A7A7
818181
484848

Shades & Tints Shades & Tints

#9AE0F4

Dark
Light

#9CC1E8

Dark
Light

#9DA2DD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ae0f4;
  --color-2: #9cc1e8;
  --color-3: #9da2dd;
  --color-4: #9f65c6;
  --color-5: #a308a3;
}

SCSS

$color-1: #9ae0f4;
$color-2: #9cc1e8;
$color-3: #9da2dd;
$color-4: #9f65c6;
$color-5: #a308a3;

TAILWIND

colors: {
  'brand-1': '#9ae0f4',
  'brand-2': '#9cc1e8',
  'brand-3': '#9da2dd',
  'brand-4': '#9f65c6',
  'brand-5': '#a308a3',
}

RGB Array

[154, 224, 244], [156, 193, 232], [157, 162, 221], [159, 101, 198], [163, 8, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #9AE0F4, #9CC1E8, #9DA2DD, #9F65C6, #A308A3 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: #9ae0f4; --color-2: #9cc1e8; --color-3: #9da2dd; --color-4: #9f65c6; --color-5: #a308a3. 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 space-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