#A52700 + #873A23 + #57443E + #424A4A + #195250 · 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

#A52700

Vermilion · FireBrick · Wine Red

HEX

#A52700

RGB

rgb(165, 39, 0)

HSL

hsl(14, 100%, 32%)

HSB

hsb(14, 100%, 65%)

CMYK

cmyk(0%, 76%, 100%, 35%)

Oklch

oklch(47.5% 0.167 34.8)

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

#873A23

Crimson · Brown · Wine Red

HEX

#873A23

RGB

rgb(135, 58, 35)

HSL

hsl(14, 59%, 33%)

HSB

hsb(14, 74%, 53%)

CMYK

cmyk(0%, 57%, 74%, 47%)

Oklch

oklch(44.8% 0.112 37.2)

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

#57443E

Crimson · DarkOliveGreen · Wine Red

HEX

#57443E

RGB

rgb(87, 68, 62)

HSL

hsl(14, 17%, 29%)

HSB

hsb(14, 29%, 34%)

CMYK

cmyk(0%, 22%, 29%, 66%)

Oklch

oklch(40.5% 0.028 38.2)

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

#424A4A

Dark Cyan · DarkSlateGray · Charcoal

HEX

#424A4A

RGB

rgb(66, 74, 74)

HSL

hsl(180, 6%, 27%)

HSB

hsb(180, 11%, 29%)

CMYK

cmyk(11%, 0%, 0%, 71%)

Oklch

oklch(40.2% 0.010 196.7)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#195250

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#195250

RGB

rgb(25, 82, 80)

HSL

hsl(178, 53%, 21%)

HSB

hsb(178, 70%, 32%)

CMYK

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

Oklch

oklch(40.2% 0.058 191.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A52700

007DA3

Analogous

A3002C

A52700

A37800

Triadic

A52700

00A326

2600A3

Split-Comp.

A52700

00A378

002CA3

Tetradic

A52700

2CA300

007DA3

7800A3

Contrast Matrix WCAG 2.1 Contrast

A52700	873A23	57443E	424A4A	195250
—	1.1 Fail	1.3 Fail	1.3 Fail	1.2 Fail
1.1 Fail	—	1.2 Fail	1.2 Fail	1.1 Fail
1.3 Fail	1.2 Fail	—	1.0 Fail	1.0 Fail
1.3 Fail	1.2 Fail	1.0 Fail	—	1.0 Fail
1.2 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

7.3AAA

7.9AAA

9.1AAA

8.9AAA

Black BG

2.9Fail

2.7Fail

2.3Fail

2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6D09

666529

4F4F3F

45464A

323250

Deuteranopia

767F0C

6A702A

505140

45444A

2E2A51

Tritanopia

9F1113

832D2E

564141

424A4A

1C5151

Achromatopsia

484848

4E4E4E

494949

484848

414141

Shades & Tints Shades & Tints

#A52700

Dark

Light

#873A23

Dark

Light

#57443E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a52700;
  --color-2: #873a23;
  --color-3: #57443e;
  --color-4: #424a4a;
  --color-5: #195250;
}

SCSS

$color-1: #a52700;
$color-2: #873a23;
$color-3: #57443e;
$color-4: #424a4a;
$color-5: #195250;

TAILWIND

colors: {
  'brand-1': '#a52700',
  'brand-2': '#873a23',
  'brand-3': '#57443e',
  'brand-4': '#424a4a',
  'brand-5': '#195250',
}

RGB Array

[165, 39, 0], [135, 58, 35], [87, 68, 62], [66, 74, 74], [25, 82, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #A52700, #873A23, #57443E, #424A4A, #195250 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: #a52700; --color-2: #873a23; --color-3: #57443e; --color-4: #424a4a; --color-5: #195250. 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