#700F10 + #7A3427 + #6E414A + #50587D + #20718C · 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

#700F10

Vermilion · Maroon · Wine Red

HEX

#700F10

RGB

rgb(112, 15, 16)

HSL

hsl(359, 76%, 25%)

HSB

hsb(359, 87%, 44%)

CMYK

cmyk(0%, 87%, 86%, 56%)

Oklch

oklch(35.3% 0.130 26.8)

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

#7A3427

Crimson · Brown · Wine Red

HEX

#7A3427

RGB

rgb(122, 52, 39)

HSL

hsl(9, 52%, 32%)

HSB

hsb(9, 68%, 48%)

CMYK

cmyk(0%, 57%, 68%, 52%)

Oklch

oklch(41.8% 0.101 32.2)

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

#6E414A

Crimson · DimGray · Wine Red

HEX

#6E414A

RGB

rgb(110, 65, 74)

HSL

hsl(348, 26%, 34%)

HSB

hsb(348, 41%, 43%)

CMYK

cmyk(0%, 41%, 33%, 57%)

Oklch

oklch(43.1% 0.064 7.1)

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

#50587D

Indigo · DarkSlateBlue · Prussian Blue

HEX

#50587D

RGB

rgb(80, 88, 125)

HSL

hsl(229, 22%, 40%)

HSB

hsb(229, 36%, 49%)

CMYK

cmyk(36%, 30%, 0%, 51%)

Oklch

oklch(46.9% 0.061 274.4)

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

#20718C

Lake Blue · Teal · Mint Ice

HEX

#20718C

RGB

rgb(32, 113, 140)

HSL

hsl(195, 63%, 34%)

HSB

hsb(195, 77%, 55%)

CMYK

cmyk(77%, 19%, 0%, 45%)

Oklch

oklch(51.3% 0.086 225.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

700F10

0F706F

Analogous

700F41

700F10

703E0F

Triadic

700F10

11700F

0F1170

Split-Comp.

700F10

0F703E

0F4170

Tetradic

700F10

41700F

0F706F

3E0F70

Contrast Matrix WCAG 2.1 Contrast

700F10	7A3427	6E414A	50587D	20718C
—	1.3 Fail	1.4 Fail	1.7 Fail	2.2 Fail
1.3 Fail	—	1.1 Fail	1.3 Fail	1.6 Fail
1.4 Fail	1.1 Fail	—	1.2 Fail	1.5 Fail
1.7 Fail	1.3 Fail	1.2 Fail	—	1.3 Fail
2.2 Fail	1.6 Fail	1.5 Fail	1.3 Fail	—

White BG

11.9AAA

8.9AAA

8.3AAA

6.9AA

5.5AA

Black BG

1.8Fail

2.3Fail

2.5Fail

3.0AA Large

3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

464510

5C5B2A

5B5A48

535474

434485

Deuteranopia

4C5310

60652B

5D6147

535272

3E3884

Tritanopia

6B1010

762D2D

6C4646

506D6B

24807F

Achromatopsia

2C2C2C

474747

4F4F4F

5A5A5A

5C5C5C

Shades & Tints Shades & Tints

#700F10

Dark

Light

#7A3427

Dark

Light

#6E414A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #700f10;
  --color-2: #7a3427;
  --color-3: #6e414a;
  --color-4: #50587d;
  --color-5: #20718c;
}

SCSS

$color-1: #700f10;
$color-2: #7a3427;
$color-3: #6e414a;
$color-4: #50587d;
$color-5: #20718c;

TAILWIND

colors: {
  'brand-1': '#700f10',
  'brand-2': '#7a3427',
  'brand-3': '#6e414a',
  'brand-4': '#50587d',
  'brand-5': '#20718c',
}

RGB Array

[112, 15, 16], [122, 52, 39], [110, 65, 74], [80, 88, 125], [32, 113, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #700F10, #7A3427, #6E414A, #50587D, #20718C 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: #700f10; --color-2: #7a3427; --color-3: #6e414a; --color-4: #50587d; --color-5: #20718c. 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