← Back to Editor

#9DCDFA · #9EA7DA · #9184BF · #79469F · #3F291F

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 LibraryData Visualization

Color Details Color Details

#9DCDFA

Sky Blue · LightSkyBlue · Cobalt Blue

HEX
#9DCDFA
RGB
rgb(157, 205, 250)
HSL
hsl(209, 90%, 80%)
HSB
hsb(209, 37%, 98%)
CMYK
cmyk(37%, 18%, 0%, 2%)
Oklch
oklch(83.0% 0.081 247.2)

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

#9EA7DA

Azure · LightSteelBlue · Cobalt Blue

HEX
#9EA7DA
RGB
rgb(158, 167, 218)
HSL
hsl(231, 45%, 74%)
HSB
hsb(231, 28%, 85%)
CMYK
cmyk(28%, 23%, 0%, 15%)
Oklch
oklch(74.0% 0.074 276.6)

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

#9184BF

Wisteria · LightSlateGray · Cobalt Blue

HEX
#9184BF
RGB
rgb(145, 132, 191)
HSL
hsl(253, 32%, 63%)
HSB
hsb(253, 31%, 75%)
CMYK
cmyk(24%, 31%, 0%, 25%)
Oklch
oklch(64.7% 0.088 293.9)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#79469F

Dark Plum · SlateBlue · Violet

HEX
#79469F
RGB
rgb(121, 70, 159)
HSL
hsl(274, 39%, 45%)
HSB
hsb(274, 56%, 62%)
CMYK
cmyk(24%, 56%, 0%, 38%)
Oklch
oklch(49.5% 0.144 308.5)

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

#3F291F

Tangerine · DarkSlateGray · Cinnamon

HEX
#3F291F
RGB
rgb(63, 41, 31)
HSL
hsl(19, 34%, 18%)
HSB
hsb(19, 51%, 25%)
CMYK
cmyk(0%, 35%, 51%, 75%)
Oklch
oklch(30.5% 0.037 45.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DCDFA
FACA9E

Analogous

9EFAF8
9DCDFA
9EA0FA

Triadic

9DCDFA
FA9ECE
CEFA9E

Split-Comp.

9DCDFA
FA9EA0
FAF89E

Tetradic

9DCDFA
F89EFA
FACA9E
A0FA9E

Contrast Matrix WCAG 2.1 Contrast

9DCDFA
9EA7DA
9184BF
79469F
3F291F
—
1.4
Fail
2.0
Fail
3.9
AA Large
8.1
AAA
1.4
Fail
—
1.4
Fail
2.8
Fail
5.8
AA
2.0
Fail
1.4
Fail
—
2.0
Fail
4.0
AA Large
3.9
AA Large
2.8
Fail
2.0
Fail
—
2.1
Fail
8.1
AAA
5.8
AA
4.0
AA Large
2.1
Fail
—
White BG
1.7Fail
2.3Fail
3.4AA Large
6.6AA
13.6AAA
Black BG
12.5AAA
9.0AAA
6.3AA
3.2AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B2EF
A2A2CE
8B8BB1
636289
353521

Deuteranopia

AFABED
A1A1CB
8C8DAD
666A84
373822

Tritanopia

9FE7E5
9EC4C2
90A5A3
767875
3E2324

Achromatopsia

C4C4C4
AAAAAA
8F8F8F
5F5F5F
2E2E2E

Shades & Tints Shades & Tints

#9DCDFA

Dark
Light

#9EA7DA

Dark
Light

#9184BF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9dcdfa;
  --color-2: #9ea7da;
  --color-3: #9184bf;
  --color-4: #79469f;
  --color-5: #3f291f;
}

SCSS

$color-1: #9dcdfa;
$color-2: #9ea7da;
$color-3: #9184bf;
$color-4: #79469f;
$color-5: #3f291f;

TAILWIND

colors: {
  'brand-1': '#9dcdfa',
  'brand-2': '#9ea7da',
  'brand-3': '#9184bf',
  'brand-4': '#79469f',
  'brand-5': '#3f291f',
}

RGB Array

[157, 205, 250], [158, 167, 218], [145, 132, 191], [121, 70, 159], [63, 41, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9DCDFA, #9EA7DA, #9184BF, #79469F, #3F291F is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #9dcdfa; --color-2: #9ea7da; --color-3: #9184bf; --color-4: #79469f; --color-5: #3f291f. 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 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