#24789F + #2B5B76 + #32425A + #300814 + #6C142D · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#24789F

Lake Blue · SteelBlue · Mint Ice

HEX

#24789F

RGB

rgb(36, 120, 159)

HSL

hsl(199, 63%, 38%)

HSB

hsb(199, 77%, 62%)

CMYK

cmyk(77%, 25%, 0%, 38%)

Oklch

oklch(54.1% 0.098 233.3)

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

#2B5B76

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#2B5B76

RGB

rgb(43, 91, 118)

HSL

hsl(202, 47%, 32%)

HSB

hsb(202, 64%, 46%)

CMYK

cmyk(64%, 23%, 0%, 54%)

Oklch

oklch(45.0% 0.068 235.7)

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

#32425A

Indigo · DarkSlateGray · Prussian Blue

HEX

#32425A

RGB

rgb(50, 66, 90)

HSL

hsl(216, 29%, 27%)

HSB

hsb(216, 44%, 35%)

CMYK

cmyk(44%, 27%, 0%, 65%)

Oklch

oklch(37.6% 0.046 258.3)

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

#300814

Dark Violet · Black · Raspberry

HEX

#300814

RGB

rgb(48, 8, 20)

HSL

hsl(342, 71%, 11%)

HSB

hsb(342, 83%, 19%)

CMYK

cmyk(0%, 83%, 58%, 81%)

Oklch

oklch(21.3% 0.065 6.4)

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

#6C142D

Dark Violet · Maroon · Raspberry

HEX

#6C142D

RGB

rgb(108, 20, 45)

HSL

hsl(343, 69%, 25%)

HSB

hsb(343, 81%, 42%)

CMYK

cmyk(0%, 81%, 58%, 58%)

Oklch

oklch(35.4% 0.121 9.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

24789F

9E4B24

Analogous

249E88

24789F

243A9E

Triadic

24789F

9E2477

779E24

Split-Comp.

24789F

9E243A

9E8824

Tetradic

24789F

88249E

9E4B24

3A9E24

Contrast Matrix WCAG 2.1 Contrast

24789F	2B5B76	32425A	300814	6C142D
—	1.5 Fail	2.1 Fail	3.6 AA Large	2.4 Fail
1.5 Fail	—	1.4 Fail	2.4 Fail	1.6 Fail
2.1 Fail	1.4 Fail	—	1.8 Fail	1.2 Fail
3.6 AA Large	2.4 Fail	1.8 Fail	—	1.5 Fail
2.4 Fail	1.6 Fail	1.2 Fail	1.5 Fail	—

White BG

4.9AA

7.3AAA

10.2AAA

17.9AAA

11.8AAA

Black BG

4.3AA Large

2.9Fail

2.1Fail

1.2Fail

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

484996

40406F

393954

1F1E11

464527

Deuteranopia

443D93

3D396E

383753

212410

4B5226

Tritanopia

288E8C

2D6A69

33504F

2E0F0E

682221

Achromatopsia

636363

505050

404040

151515

313131

Shades & Tints Shades & Tints

#24789F

Dark

Light

#2B5B76

Dark

Light

#32425A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #24789f;
  --color-2: #2b5b76;
  --color-3: #32425a;
  --color-4: #300814;
  --color-5: #6c142d;
}

SCSS

$color-1: #24789f;
$color-2: #2b5b76;
$color-3: #32425a;
$color-4: #300814;
$color-5: #6c142d;

TAILWIND

colors: {
  'brand-1': '#24789f',
  'brand-2': '#2b5b76',
  'brand-3': '#32425a',
  'brand-4': '#300814',
  'brand-5': '#6c142d',
}

RGB Array

[36, 120, 159], [43, 91, 118], [50, 66, 90], [48, 8, 20], [108, 20, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #24789F, #2B5B76, #32425A, #300814, #6C142D is ideal for: tech websites, dark mode UIs, game UIs. 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: #24789f; --color-2: #2b5b76; --color-3: #32425a; --color-4: #300814; --color-5: #6c142d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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