#1C323F + #284D55 + #31212B + #511618 + #BB3B1E · 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

#1C323F

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX

#1C323F

RGB

rgb(28, 50, 63)

HSL

hsl(202, 38%, 18%)

HSB

hsb(202, 56%, 25%)

CMYK

cmyk(56%, 21%, 0%, 75%)

Oklch

oklch(30.5% 0.037 235.7)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#284D55

Slate Blue · DarkSlateGray · Peacock Green

HEX

#284D55

RGB

rgb(40, 77, 85)

HSL

hsl(191, 36%, 25%)

HSB

hsb(191, 53%, 33%)

CMYK

cmyk(53%, 9%, 0%, 67%)

Oklch

oklch(39.6% 0.044 213.3)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#31212B

Rose Purple · DarkSlateGray · Raspberry

HEX

#31212B

RGB

rgb(49, 33, 43)

HSL

hsl(323, 20%, 16%)

HSB

hsb(323, 33%, 19%)

CMYK

cmyk(0%, 33%, 12%, 81%)

Oklch

oklch(27.1% 0.030 341.3)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#511618

Crimson · Maroon · Deep Berry

HEX

#511618

RGB

rgb(81, 22, 24)

HSL

hsl(358, 57%, 20%)

HSB

hsb(358, 73%, 32%)

CMYK

cmyk(0%, 73%, 70%, 68%)

Oklch

oklch(29.9% 0.088 22.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#BB3B1E

Vermilion · FireBrick · Passion Red

HEX

#BB3B1E

RGB

rgb(187, 59, 30)

HSL

hsl(11, 72%, 43%)

HSB

hsb(11, 84%, 73%)

CMYK

cmyk(0%, 68%, 84%, 27%)

Oklch

oklch(53.6% 0.169 34.0)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1C323F

3F291C

Analogous

1C3F3B

1C323F

1C213F

Triadic

1C323F

3F1C33

333F1C

Split-Comp.

1C323F

3F1C21

3F3B1C

Tetradic

1C323F

3B1C3F

3F291C

213F1C

Contrast Matrix WCAG 2.1 Contrast

1C323F	284D55	31212B	511618	BB3B1E
—	1.4 Fail	1.1 Fail	1.1 Fail	2.4 Fail
1.4 Fail	—	1.7 Fail	1.5 Fail	1.6 Fail
1.1 Fail	1.7 Fail	—	1.1 Fail	2.7 Fail
1.1 Fail	1.5 Fail	1.1 Fail	—	2.5 Fail
2.4 Fail	1.6 Fail	2.7 Fail	2.5 Fail	—

White BG

13.3AAA

9.2AAA

15.2AAA

14.2AAA

5.6AA

Black BG

1.6Fail

2.3Fail

1.4Fail

1.5Fail

3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

26263C

383853

2A2A29

373718

848225

Deuteranopia

24233B

363353

2B2C28

3B3F17

8B9527

Tritanopia

1D3939

2A5251

302726

4E1717

B52B2C

Achromatopsia

2D2D2D

434343

272727

282828

5E5E5E

Shades & Tints Shades & Tints

#1C323F

Dark

Light

#284D55

Dark

Light

#31212B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1c323f;
  --color-2: #284d55;
  --color-3: #31212b;
  --color-4: #511618;
  --color-5: #bb3b1e;
}

SCSS

$color-1: #1c323f;
$color-2: #284d55;
$color-3: #31212b;
$color-4: #511618;
$color-5: #bb3b1e;

TAILWIND

colors: {
  'brand-1': '#1c323f',
  'brand-2': '#284d55',
  'brand-3': '#31212b',
  'brand-4': '#511618',
  'brand-5': '#bb3b1e',
}

RGB Array

[28, 50, 63], [40, 77, 85], [49, 33, 43], [81, 22, 24], [187, 59, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #1C323F, #284D55, #31212B, #511618, #BB3B1E 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: #1c323f; --color-2: #284d55; --color-3: #31212b; --color-4: #511618; --color-5: #bb3b1e. 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