← Back to Editor

#DC471F · #EB8706 · #C25337 · #775C63 · #51385E

sea

A 5-color sea palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DC471F

Vermilion · Chocolate · Passion Red

HEX
#DC471F
RGB
rgb(220, 71, 31)
HSL
hsl(13, 75%, 49%)
HSB
hsb(13, 86%, 86%)
CMYK
cmyk(0%, 68%, 86%, 14%)
Oklch
oklch(60.5% 0.192 35.2)

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

#EB8706

Ochre · Orange · Amber Brown

HEX
#EB8706
RGB
rgb(235, 135, 6)
HSL
hsl(34, 95%, 47%)
HSB
hsb(34, 97%, 92%)
CMYK
cmyk(0%, 43%, 97%, 8%)
Oklch
oklch(71.6% 0.165 61.3)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#C25337

Crimson · Sienna · Passion Red

HEX
#C25337
RGB
rgb(194, 83, 55)
HSL
hsl(12, 56%, 49%)
HSB
hsb(12, 72%, 76%)
CMYK
cmyk(0%, 57%, 72%, 24%)
Oklch
oklch(58.0% 0.149 35.3)

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

#775C63

Dark Violet · DimGray · Camellia

HEX
#775C63
RGB
rgb(119, 92, 99)
HSL
hsl(344, 13%, 41%)
HSB
hsb(344, 23%, 47%)
CMYK
cmyk(0%, 23%, 17%, 53%)
Oklch
oklch(50.4% 0.037 1.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#51385E

Dark Plum · DarkSlateGray · Eggplant

HEX
#51385E
RGB
rgb(81, 56, 94)
HSL
hsl(279, 25%, 29%)
HSB
hsb(279, 40%, 37%)
CMYK
cmyk(14%, 40%, 0%, 63%)
Oklch
oklch(38.5% 0.070 313.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DC471F
1FB2DB

Analogous

DB1F54
DC471F
DBA61F

Triadic

DC471F
1FDB48
481FDB

Split-Comp.

DC471F
1FDBA6
1F54DB

Tetradic

DC471F
54DB1F
1FB2DB
A61FDB

Contrast Matrix WCAG 2.1 Contrast

DC471F
EB8706
C25337
775C63
51385E
—
1.6
Fail
1.1
Fail
1.4
Fail
2.4
Fail
1.6
Fail
—
1.7
Fail
2.3
Fail
3.9
AA Large
1.1
Fail
1.7
Fail
—
1.3
Fail
2.2
Fail
1.4
Fail
2.3
Fail
1.3
Fail
—
1.7
Fail
2.4
Fail
3.9
AA Large
2.2
Fail
1.7
Fail
—
White BG
4.2AA Large
2.6Fail
4.6AA
6.0AA
10.1AAA
Black BG
5.0AA
8.0AAA
4.6AA
3.5AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9A29
C0BF25
92913E
6B6B61
464655

Deuteranopia

A4AF2B
C6CD2D
98A13F
6D6F61
484A53

Tritanopia

D53032
E63E43
BC4344
766060
504E4C

Achromatopsia

6F6F6F
969696
717171
656565
444444

Shades & Tints Shades & Tints

#DC471F

Dark
Light

#EB8706

Dark
Light

#C25337

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dc471f;
  --color-2: #eb8706;
  --color-3: #c25337;
  --color-4: #775c63;
  --color-5: #51385e;
}

SCSS

$color-1: #dc471f;
$color-2: #eb8706;
$color-3: #c25337;
$color-4: #775c63;
$color-5: #51385e;

TAILWIND

colors: {
  'brand-1': '#dc471f',
  'brand-2': '#eb8706',
  'brand-3': '#c25337',
  'brand-4': '#775c63',
  'brand-5': '#51385e',
}

RGB Array

[220, 71, 31], [235, 135, 6], [194, 83, 55], [119, 92, 99], [81, 56, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #DC471F, #EB8706, #C25337, #775C63, #51385E is ideal for: corporate websites, product showcases, portfolios. 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: #dc471f; --color-2: #eb8706; --color-3: #c25337; --color-4: #775c63; --color-5: #51385e. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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