#3333FF + #5B5BC1 + #9E9ECC + #C9D1BA + #FCF8D1 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#3333FF

Deep Indigo · Blue · Navy Blue

HEX

#3333FF

RGB

rgb(51, 51, 255)

HSL

hsl(240, 100%, 60%)

HSB

hsb(240, 80%, 100%)

CMYK

cmyk(80%, 80%, 0%, 0%)

Oklch

oklch(49.7% 0.283 269.8)

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

#5B5BC1

Deep Indigo · SlateBlue · Navy Blue

HEX

#5B5BC1

RGB

rgb(91, 91, 193)

HSL

hsl(240, 45%, 56%)

HSB

hsb(240, 53%, 76%)

CMYK

cmyk(53%, 53%, 0%, 24%)

Oklch

oklch(52.5% 0.156 279.6)

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

#9E9ECC

Wisteria · DarkGray · Cobalt Blue

HEX

#9E9ECC

RGB

rgb(158, 158, 204)

HSL

hsl(240, 31%, 71%)

HSB

hsb(240, 23%, 80%)

CMYK

cmyk(23%, 23%, 0%, 20%)

Oklch

oklch(71.6% 0.067 284.6)

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

#C9D1BA

Willow Green · Silver · Apple Green

HEX

#C9D1BA

RGB

rgb(201, 209, 186)

HSL

hsl(81, 20%, 77%)

HSB

hsb(81, 11%, 82%)

CMYK

cmyk(4%, 0%, 11%, 18%)

Oklch

oklch(84.8% 0.032 122.7)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#FCF8D1

Fresh Green · Beige · Lemon Cream

HEX

#FCF8D1

RGB

rgb(252, 248, 209)

HSL

hsl(54, 88%, 90%)

HSB

hsb(54, 17%, 99%)

CMYK

cmyk(0%, 2%, 17%, 1%)

Oklch

oklch(97.2% 0.051 102.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3333FF

FFFF33

Analogous

3399FF

3333FF

9933FF

Triadic

3333FF

FF3333

33FF33

Split-Comp.

3333FF

FF9933

99FF33

Tetradic

3333FF

FF3399

FFFF33

33FF99

Contrast Matrix WCAG 2.1 Contrast

3333FF	5B5BC1	9E9ECC	C9D1BA	FCF8D1
—	1.2 Fail	2.7 Fail	4.4 AA Large	6.4 AA
1.2 Fail	—	2.2 Fail	3.6 AA Large	5.3 AA
2.7 Fail	2.2 Fail	—	1.6 Fail	2.4 Fail
4.4 AA Large	3.6 AA Large	1.6 Fail	—	1.5 Fail
6.4 AA	5.3 AA	2.4 Fail	1.5 Fail	—

White BG

6.9AA

5.7AA

2.6Fail

1.6Fail

1.1Fail

Black BG

3.1AA Large

3.7AA Large

8.2AAA

13.3AAA

19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3333CE

5B5BA8

9E9EC1

CCCDC0

FAFADA

Deuteranopia

3333C2

5B5BA2

9E9EBE

CCCBC1

FBFBDD

Tritanopia

33A79E

5B9591

9EB8B6

C9C4C5

FCE2E4

Achromatopsia

4A4A4A

676767

A3A3A3

CCCCCC

F5F5F5

Shades & Tints Shades & Tints

#3333FF

Dark

Light

#5B5BC1

Dark

Light

#9E9ECC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3333ff;
  --color-2: #5b5bc1;
  --color-3: #9e9ecc;
  --color-4: #c9d1ba;
  --color-5: #fcf8d1;
}

SCSS

$color-1: #3333ff;
$color-2: #5b5bc1;
$color-3: #9e9ecc;
$color-4: #c9d1ba;
$color-5: #fcf8d1;

TAILWIND

colors: {
  'brand-1': '#3333ff',
  'brand-2': '#5b5bc1',
  'brand-3': '#9e9ecc',
  'brand-4': '#c9d1ba',
  'brand-5': '#fcf8d1',
}

RGB Array

[51, 51, 255], [91, 91, 193], [158, 158, 204], [201, 209, 186], [252, 248, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #3333FF, #5B5BC1, #9E9ECC, #C9D1BA, #FCF8D1 is ideal for: health products, baby brands, fresh-style blogs. 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: #3333ff; --color-2: #5b5bc1; --color-3: #9e9ecc; --color-4: #c9d1ba; --color-5: #fcf8d1. 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 cool-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