#8C222E + #5D7366 + #2E2423 + #417B7D + #6BB3A5 · 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

#8C222E

Vermilion · Brown · Wine Red

HEX

#8C222E

RGB

rgb(140, 34, 46)

HSL

hsl(353, 61%, 34%)

HSB

hsb(353, 76%, 55%)

CMYK

cmyk(0%, 76%, 67%, 45%)

Oklch

oklch(42.8% 0.141 19.5)

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

#5D7366

Celadon · DimGray · Olive Green

HEX

#5D7366

RGB

rgb(93, 115, 102)

HSL

hsl(145, 11%, 41%)

HSB

hsb(145, 19%, 45%)

CMYK

cmyk(19%, 0%, 11%, 55%)

Oklch

oklch(53.4% 0.033 159.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#2E2423

Crimson · DarkSlateGray · Deep Berry

HEX

#2E2423

RGB

rgb(46, 36, 35)

HSL

hsl(5, 14%, 16%)

HSB

hsb(5, 24%, 18%)

CMYK

cmyk(0%, 22%, 24%, 82%)

Oklch

oklch(27.2% 0.015 24.8)

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

#417B7D

Slate Blue · SeaGreen · Mint Ice

HEX

#417B7D

RGB

rgb(65, 123, 125)

HSL

hsl(182, 32%, 37%)

HSB

hsb(182, 48%, 49%)

CMYK

cmyk(48%, 2%, 0%, 51%)

Oklch

oklch(54.5% 0.061 198.4)

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

#6BB3A5

Mineral Blue · CadetBlue · Lake Green

HEX

#6BB3A5

RGB

rgb(107, 179, 165)

HSL

hsl(168, 32%, 56%)

HSB

hsb(168, 40%, 70%)

CMYK

cmyk(40%, 0%, 8%, 30%)

Oklch

oklch(71.5% 0.076 180.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C222E

228C7F

Analogous

8C2263

8C222E

8C4A22

Triadic

8C222E

2E8C22

222E8C

Split-Comp.

8C222E

228C4A

22638C

Tetradic

8C222E

638C22

228C7F

4A228C

Contrast Matrix WCAG 2.1 Contrast

8C222E	5D7366	2E2423	417B7D	6BB3A5
—	1.7 Fail	1.7 Fail	1.8 Fail	3.6 AA Large
1.7 Fail	—	3.0 Fail	1.1 Fail	2.1 Fail
1.7 Fail	3.0 Fail	—	3.1 AA Large	6.2 AA
1.8 Fail	1.1 Fail	3.1 AA Large	—	2.0 Fail
3.6 AA Large	2.1 Fail	6.2 AA	2.0 Fail	—

White BG

8.8AAA

5.1AA

15.1AAA

4.8AA

2.4Fail

Black BG

2.4Fail

4.1AA Large

1.4Fail

4.4AA Large

8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5D2B

676769

2A2A23

5A5B7D

8A8BA8

Deuteranopia

646C2A

65646A

2A2B23

57527C

8681A9

Tritanopia

872928

5E6C6C

2D2323

447C7C

6FABAC

Achromatopsia

434343

6B6B6B

272727

6A6A6A

9C9C9C

Shades & Tints Shades & Tints

#8C222E

Dark

Light

#5D7366

Dark

Light

#2E2423

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c222e;
  --color-2: #5d7366;
  --color-3: #2e2423;
  --color-4: #417b7d;
  --color-5: #6bb3a5;
}

SCSS

$color-1: #8c222e;
$color-2: #5d7366;
$color-3: #2e2423;
$color-4: #417b7d;
$color-5: #6bb3a5;

TAILWIND

colors: {
  'brand-1': '#8c222e',
  'brand-2': '#5d7366',
  'brand-3': '#2e2423',
  'brand-4': '#417b7d',
  'brand-5': '#6bb3a5',
}

RGB Array

[140, 34, 46], [93, 115, 102], [46, 36, 35], [65, 123, 125], [107, 179, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #8C222E, #5D7366, #2E2423, #417B7D, #6BB3A5 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: #8c222e; --color-2: #5d7366; --color-3: #2e2423; --color-4: #417b7d; --color-5: #6bb3a5. 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