#363766 + #445894 + #3A90AB + #3EBE9B + #8FD99B · 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

#363766

Indigo · DarkSlateGray · Prussian Blue

HEX

#363766

RGB

rgb(54, 55, 102)

HSL

hsl(239, 31%, 31%)

HSB

hsb(239, 47%, 40%)

CMYK

cmyk(47%, 46%, 0%, 60%)

Oklch

oklch(36.0% 0.080 280.7)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#445894

Indigo · DarkSlateBlue · Navy Blue

HEX

#445894

RGB

rgb(68, 88, 148)

HSL

hsl(225, 37%, 42%)

HSB

hsb(225, 54%, 58%)

CMYK

cmyk(54%, 41%, 0%, 42%)

Oklch

oklch(47.3% 0.100 268.5)

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

#3A90AB

Slate Blue · SteelBlue · Mint Ice

HEX

#3A90AB

RGB

rgb(58, 144, 171)

HSL

hsl(194, 49%, 45%)

HSB

hsb(194, 66%, 67%)

CMYK

cmyk(66%, 16%, 0%, 33%)

Oklch

oklch(61.3% 0.091 222.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#3EBE9B

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#3EBE9B

RGB

rgb(62, 190, 155)

HSL

hsl(164, 51%, 49%)

HSB

hsb(164, 67%, 75%)

CMYK

cmyk(67%, 0%, 18%, 25%)

Oklch

oklch(72.3% 0.123 170.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#8FD99B

Celadon · LightGreen · Apple Green

HEX

#8FD99B

RGB

rgb(143, 217, 155)

HSL

hsl(130, 49%, 71%)

HSB

hsb(130, 34%, 85%)

CMYK

cmyk(34%, 0%, 29%, 15%)

Oklch

oklch(82.1% 0.114 148.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

363766

686737

Analogous

375068

363766

4E3768

Triadic

363766

683737

376837

Split-Comp.

363766

684E37

506837

Tetradic

363766

683750

686737

37684E

Contrast Matrix WCAG 2.1 Contrast

363766	445894	3A90AB	3EBE9B	8FD99B
—	1.6 Fail	3.0 AA Large	4.8 AA	6.6 AA
1.6 Fail	—	1.9 Fail	2.9 Fail	4.1 AA Large
3.0 AA Large	1.9 Fail	—	1.6 Fail	2.2 Fail
4.8 AA	2.9 Fail	1.6 Fail	—	1.4 Fail
6.6 AA	4.1 AA Large	2.2 Fail	1.4 Fail	—

White BG

11.1AAA

6.8AA

3.6AA Large

2.3Fail

1.7Fail

Black BG

1.9Fail

3.1AA Large

5.8AA

9.0AAA

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

36365B

4D4D85

5F60A4

7577A3

AFB0AA

Deuteranopia

363658

4C4A82

5A54A3

6E64A6

ABA5AE

Tritanopia

365250

457A78

3E9F9E

44AAAC

93B6B8

Achromatopsia

3C3C3C

595959

797979

949494

BCBCBC

Shades & Tints Shades & Tints

#363766

Dark

Light

#445894

Dark

Light

#3A90AB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #363766;
  --color-2: #445894;
  --color-3: #3a90ab;
  --color-4: #3ebe9b;
  --color-5: #8fd99b;
}

SCSS

$color-1: #363766;
$color-2: #445894;
$color-3: #3a90ab;
$color-4: #3ebe9b;
$color-5: #8fd99b;

TAILWIND

colors: {
  'brand-1': '#363766',
  'brand-2': '#445894',
  'brand-3': '#3a90ab',
  'brand-4': '#3ebe9b',
  'brand-5': '#8fd99b',
}

RGB Array

[54, 55, 102], [68, 88, 148], [58, 144, 171], [62, 190, 155], [143, 217, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #363766, #445894, #3A90AB, #3EBE9B, #8FD99B 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: #363766; --color-2: #445894; --color-3: #3a90ab; --color-4: #3ebe9b; --color-5: #8fd99b. 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