#5E7E7D + #514C36 + #201920 + #702721 + #D72A3D · 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

#5E7E7D

Mineral Blue · SlateGray · Mint Ice

HEX

#5E7E7D

RGB

rgb(94, 126, 125)

HSL

hsl(178, 15%, 43%)

HSB

hsb(178, 25%, 49%)

CMYK

cmyk(25%, 0%, 1%, 51%)

Oklch

oklch(56.8% 0.036 193.8)

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

#514C36

Ochre · DarkOliveGreen · Honey Gold

HEX

#514C36

RGB

rgb(81, 76, 54)

HSL

hsl(49, 20%, 26%)

HSB

hsb(49, 33%, 32%)

CMYK

cmyk(0%, 6%, 33%, 68%)

Oklch

oklch(41.5% 0.035 96.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#201920

Rose Purple · Black · Dark Purple

HEX

#201920

RGB

rgb(32, 25, 32)

HSL

hsl(300, 12%, 11%)

HSB

hsb(300, 22%, 13%)

CMYK

cmyk(0%, 22%, 0%, 87%)

Oklch

oklch(22.5% 0.017 326.1)

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

#702721

Crimson · Maroon · Wine Red

HEX

#702721

RGB

rgb(112, 39, 33)

HSL

hsl(5, 54%, 28%)

HSB

hsb(5, 71%, 44%)

CMYK

cmyk(0%, 65%, 71%, 56%)

Oklch

oklch(38.1% 0.105 27.8)

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

#D72A3D

Vermilion · Crimson · Passion Red

HEX

#D72A3D

RGB

rgb(215, 42, 61)

HSL

hsl(353, 68%, 50%)

HSB

hsb(353, 80%, 84%)

CMYK

cmyk(0%, 80%, 72%, 16%)

Oklch

oklch(57.3% 0.206 21.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E7E7D

7E5D5E

Analogous

5D7E6D

5E7E7D

5D6F7E

Triadic

5E7E7D

7D5D7E

7E7D5D

Split-Comp.

5E7E7D

7E5D6F

7E6D5D

Tetradic

5E7E7D

6D5D7E

7E5D5E

6F7E5D

Contrast Matrix WCAG 2.1 Contrast

5E7E7D	514C36	201920	702721	D72A3D
—	2.0 Fail	3.9 AA Large	2.4 Fail	1.1 Fail
2.0 Fail	—	2.0 Fail	1.2 Fail	1.8 Fail
3.9 AA Large	2.0 Fail	—	1.6 Fail	3.5 AA Large
2.4 Fail	1.2 Fail	1.6 Fail	—	2.1 Fail
1.1 Fail	1.8 Fail	3.5 AA Large	2.1 Fail	—

White BG

4.4AA Large

8.6AAA

17.2AAA

10.5AAA

4.9AA

Black BG

4.8AA

2.4Fail

1.2Fail

2.0Fail

4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6C7D

4F4F3B

1D1D1E

505022

8C8B38

Deuteranopia

6A687D

4F503D

1D1E1E

555A23

96A337

Tritanopia

607D7D

514040

201D1D

6C2424

CE3534

Achromatopsia

747474

4B4B4B

1C1C1C

3C3C3C

606060

Shades & Tints Shades & Tints

#5E7E7D

Dark

Light

#514C36

Dark

Light

#201920

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e7e7d;
  --color-2: #514c36;
  --color-3: #201920;
  --color-4: #702721;
  --color-5: #d72a3d;
}

SCSS

$color-1: #5e7e7d;
$color-2: #514c36;
$color-3: #201920;
$color-4: #702721;
$color-5: #d72a3d;

TAILWIND

colors: {
  'brand-1': '#5e7e7d',
  'brand-2': '#514c36',
  'brand-3': '#201920',
  'brand-4': '#702721',
  'brand-5': '#d72a3d',
}

RGB Array

[94, 126, 125], [81, 76, 54], [32, 25, 32], [112, 39, 33], [215, 42, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #5E7E7D, #514C36, #201920, #702721, #D72A3D 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: #5e7e7d; --color-2: #514c36; --color-3: #201920; --color-4: #702721; --color-5: #d72a3d. 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