← Back to Editor

#343957 · #3A2F2D · #7A4732 · #A8A19B · #C5B59E

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#343957

Indigo · DarkSlateGray · Prussian Blue

HEX
#343957
RGB
rgb(52, 57, 87)
HSL
hsl(231, 25%, 27%)
HSB
hsb(231, 40%, 34%)
CMYK
cmyk(40%, 34%, 0%, 66%)
Oklch
oklch(35.4% 0.053 276.1)

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

#3A2F2D

Crimson · DarkSlateGray · Deep Berry

HEX
#3A2F2D
RGB
rgb(58, 47, 45)
HSL
hsl(9, 13%, 20%)
HSB
hsb(9, 22%, 23%)
CMYK
cmyk(0%, 19%, 22%, 77%)
Oklch
oklch(31.7% 0.017 30.1)

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

#7A4732

Tangerine · Sienna · Amber Brown

HEX
#7A4732
RGB
rgb(122, 71, 50)
HSL
hsl(18, 42%, 34%)
HSB
hsb(18, 59%, 48%)
CMYK
cmyk(0%, 42%, 59%, 52%)
Oklch
oklch(45.3% 0.077 42.9)

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

#A8A19B

Ash · DarkGray · Silver Sand

HEX
#A8A19B
RGB
rgb(168, 161, 155)
HSL
hsl(28, 7%, 63%)
HSB
hsb(28, 8%, 66%)
CMYK
cmyk(0%, 4%, 8%, 34%)
Oklch
oklch(71.3% 0.012 63.3)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C5B59E

Ginger · Tan · Warm Sun

HEX
#C5B59E
RGB
rgb(197, 181, 158)
HSL
hsl(35, 25%, 70%)
HSB
hsb(35, 20%, 77%)
CMYK
cmyk(0%, 8%, 20%, 23%)
Oklch
oklch(78.0% 0.037 77.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

343957
565134

Analogous

344A56
343957
403456

Triadic

343957
563439
395634

Split-Comp.

343957
564034
4A5634

Tetradic

343957
56344A
565134
345640

Contrast Matrix WCAG 2.1 Contrast

343957
3A2F2D
7A4732
A8A19B
C5B59E
—
1.2
Fail
1.5
Fail
4.4
AA Large
5.6
AA
1.2
Fail
—
1.7
Fail
5.1
AA
6.4
AA
1.5
Fail
1.7
Fail
—
3.0
Fail
3.8
AA Large
4.4
AA Large
5.1
AA
3.0
Fail
—
1.3
Fail
5.6
AA
6.4
AA
3.8
AA Large
1.3
Fail
—
White BG
11.2AAA
12.9AAA
7.6AAA
2.5Fail
2.0Fail
Black BG
1.9Fail
1.6Fail
2.8Fail
8.2AAA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

363650
35352D
646337
A5A59C
BEBEA4

Deuteranopia

36364E
36372E
676B38
A5A69D
BFC0A5

Tritanopia

344A49
392E2E
773B3C
A89E9E
C4A8A9

Achromatopsia

3B3B3B
323232
545454
A2A2A2
B7B7B7

Shades & Tints Shades & Tints

#343957

Dark
Light

#3A2F2D

Dark
Light

#7A4732

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #343957;
  --color-2: #3a2f2d;
  --color-3: #7a4732;
  --color-4: #a8a19b;
  --color-5: #c5b59e;
}

SCSS

$color-1: #343957;
$color-2: #3a2f2d;
$color-3: #7a4732;
$color-4: #a8a19b;
$color-5: #c5b59e;

TAILWIND

colors: {
  'brand-1': '#343957',
  'brand-2': '#3a2f2d',
  'brand-3': '#7a4732',
  'brand-4': '#a8a19b',
  'brand-5': '#c5b59e',
}

RGB Array

[52, 57, 87], [58, 47, 45], [122, 71, 50], [168, 161, 155], [197, 181, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #343957, #3A2F2D, #7A4732, #A8A19B, #C5B59E is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #343957; --color-2: #3a2f2d; --color-3: #7a4732; --color-4: #a8a19b; --color-5: #c5b59e. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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