#97D0F7 + #9BAAE3 + #9584C5 + #8D5A93 + #5F5D8D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#97D0F7

Sky Blue · LightSkyBlue · Cobalt Blue

HEX

#97D0F7

RGB

rgb(151, 208, 247)

HSL

hsl(204, 86%, 78%)

HSB

hsb(204, 39%, 97%)

CMYK

cmyk(39%, 16%, 0%, 3%)

Oklch

oklch(83.2% 0.080 238.9)

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

#9BAAE3

Azure · LightSteelBlue · Cobalt Blue

HEX

#9BAAE3

RGB

rgb(155, 170, 227)

HSL

hsl(228, 56%, 75%)

HSB

hsb(228, 32%, 89%)

CMYK

cmyk(32%, 25%, 0%, 11%)

Oklch

oklch(74.7% 0.084 272.8)

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

#9584C5

Wisteria · DarkGray · Cobalt Blue

HEX

#9584C5

RGB

rgb(149, 132, 197)

HSL

hsl(256, 36%, 65%)

HSB

hsb(256, 33%, 77%)

CMYK

cmyk(24%, 33%, 0%, 23%)

Oklch

oklch(65.4% 0.097 295.6)

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

#8D5A93

Dark Plum · Gray · Violet

HEX

#8D5A93

RGB

rgb(141, 90, 147)

HSL

hsl(294, 24%, 46%)

HSB

hsb(294, 39%, 58%)

CMYK

cmyk(4%, 39%, 0%, 42%)

Oklch

oklch(54.5% 0.104 323.1)

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

#5F5D8D

Deep Indigo · SlateGray · Navy Blue

HEX

#5F5D8D

RGB

rgb(95, 93, 141)

HSL

hsl(243, 21%, 46%)

HSB

hsb(243, 34%, 55%)

CMYK

cmyk(33%, 34%, 0%, 45%)

Oklch

oklch(50.1% 0.076 285.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

97D0F7

F7BD97

Analogous

97F7ED

97D0F7

97A0F7

Triadic

97D0F7

F797D1

D1F797

Split-Comp.

97D0F7

F797A0

F7ED97

Tetradic

97D0F7

ED97F7

F7BD97

A0F797

Contrast Matrix WCAG 2.1 Contrast

97D0F7	9BAAE3	9584C5	8D5A93	5F5D8D
—	1.4 Fail	2.0 Fail	3.2 AA Large	3.7 AA Large
1.4 Fail	—	1.4 Fail	2.3 Fail	2.7 Fail
2.0 Fail	1.4 Fail	—	1.6 Fail	1.9 Fail
3.2 AA Large	2.3 Fail	1.6 Fail	—	1.2 Fail
3.7 AA Large	2.7 Fail	1.9 Fail	1.2 Fail	—

White BG

1.7Fail

2.3Fail

3.3AA Large

5.2AA

6.1AA

Black BG

12.7AAA

9.3AAA

6.4AA

4.0AA Large

3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0B0EE

A1A2D5

8E8DB5

777685

5E5E81

Deuteranopia

ACA8EB

A1A0D2

8F90B1

7A7E82

5E5E7F

Tritanopia

9AE6E4

9CCAC8

94A9A6

8A7A78

5F7876

Achromatopsia

C3C3C3

ACACAC

909090

707070

636363

Shades & Tints Shades & Tints

#97D0F7

Dark

Light

#9BAAE3

Dark

Light

#9584C5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #97d0f7;
  --color-2: #9baae3;
  --color-3: #9584c5;
  --color-4: #8d5a93;
  --color-5: #5f5d8d;
}

SCSS

$color-1: #97d0f7;
$color-2: #9baae3;
$color-3: #9584c5;
$color-4: #8d5a93;
$color-5: #5f5d8d;

TAILWIND

colors: {
  'brand-1': '#97d0f7',
  'brand-2': '#9baae3',
  'brand-3': '#9584c5',
  'brand-4': '#8d5a93',
  'brand-5': '#5f5d8d',
}

RGB Array

[151, 208, 247], [155, 170, 227], [149, 132, 197], [141, 90, 147], [95, 93, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #97D0F7, #9BAAE3, #9584C5, #8D5A93, #5F5D8D 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: #97d0f7; --color-2: #9baae3; --color-3: #9584c5; --color-4: #8d5a93; --color-5: #5f5d8d. 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