#372BC4 + #5E54C9 + #867DCD + #ADA5D1 + #D4CED6 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#372BC4

Deep Indigo · DarkSlateBlue · Navy Blue

HEX

#372BC4

RGB

rgb(55, 43, 196)

HSL

hsl(245, 64%, 47%)

HSB

hsb(245, 78%, 77%)

CMYK

cmyk(72%, 78%, 0%, 23%)

Oklch

oklch(42.5% 0.222 274.8)

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

#5E54C9

Deep Indigo · SlateBlue · Navy Blue

HEX

#5E54C9

RGB

rgb(94, 84, 201)

HSL

hsl(245, 52%, 56%)

HSB

hsb(245, 58%, 79%)

CMYK

cmyk(53%, 58%, 0%, 21%)

Oklch

oklch(52.1% 0.175 282.3)

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

#867DCD

Wisteria · MediumSlateBlue · Cobalt Blue

HEX

#867DCD

RGB

rgb(134, 125, 205)

HSL

hsl(247, 44%, 65%)

HSB

hsb(247, 39%, 80%)

CMYK

cmyk(35%, 39%, 0%, 20%)

Oklch

oklch(63.1% 0.118 287.7)

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

#ADA5D1

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#ADA5D1

RGB

rgb(173, 165, 209)

HSL

hsl(251, 32%, 73%)

HSB

hsb(251, 21%, 82%)

CMYK

cmyk(17%, 21%, 0%, 18%)

Oklch

oklch(74.4% 0.063 293.1)

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

#D4CED6

Lilac · LightGray · Pearl Gray

HEX

#D4CED6

RGB

rgb(212, 206, 214)

HSL

hsl(285, 9%, 82%)

HSB

hsb(285, 4%, 84%)

CMYK

cmyk(1%, 4%, 0%, 16%)

Oklch

oklch(85.9% 0.013 317.7)

Traditional「Lilac」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

372BC4

B8C52B

Analogous

2B6BC5

372BC4

852BC5

Triadic

372BC4

C5382B

2BC538

Split-Comp.

372BC4

C5852B

6BC52B

Tetradic

372BC4

C52B6B

B8C52B

2BC585

Contrast Matrix WCAG 2.1 Contrast

372BC4	5E54C9	867DCD	ADA5D1	D4CED6
—	1.6 Fail	2.5 Fail	3.9 AA Large	5.9 AA
1.6 Fail	—	1.6 Fail	2.5 Fail	3.8 AA Large
2.5 Fail	1.6 Fail	—	1.6 Fail	2.3 Fail
3.9 AA Large	2.5 Fail	1.6 Fail	—	1.5 Fail
5.9 AA	3.8 AA Large	2.3 Fail	1.5 Fail	—

White BG

9.1AAA

5.9AA

3.6AA Large

2.3Fail

1.5Fail

Black BG

2.3Fail

3.6AA Large

5.8AA

9.1AAA

13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

32329F

5A5AAD

8282BA

AAA9C6

D1D1D4

Deuteranopia

333396

5A5BA6

8383B5

AAABC4

D2D2D4

Tritanopia

36827B

5E9691

86AAA7

ADBEBC

D4D3D2

Achromatopsia

404040

646464

898989

ACACAC

D1D1D1

Shades & Tints Shades & Tints

#372BC4

Dark

Light

#5E54C9

Dark

Light

#867DCD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #372bc4;
  --color-2: #5e54c9;
  --color-3: #867dcd;
  --color-4: #ada5d1;
  --color-5: #d4ced6;
}

SCSS

$color-1: #372bc4;
$color-2: #5e54c9;
$color-3: #867dcd;
$color-4: #ada5d1;
$color-5: #d4ced6;

TAILWIND

colors: {
  'brand-1': '#372bc4',
  'brand-2': '#5e54c9',
  'brand-3': '#867dcd',
  'brand-4': '#ada5d1',
  'brand-5': '#d4ced6',
}

RGB Array

[55, 43, 196], [94, 84, 201], [134, 125, 205], [173, 165, 209], [212, 206, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #372BC4, #5E54C9, #867DCD, #ADA5D1, #D4CED6 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: #372bc4; --color-2: #5e54c9; --color-3: #867dcd; --color-4: #ada5d1; --color-5: #d4ced6. 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 sea-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