← Back to Editor

#3D2E4E · #15282E · #4A6666 · #8D8270 · #F0B384

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

#3D2E4E

Deep Indigo · DarkSlateGray · Eggplant

HEX
#3D2E4E
RGB
rgb(61, 46, 78)
HSL
hsl(268, 26%, 24%)
HSB
hsb(268, 41%, 31%)
CMYK
cmyk(22%, 41%, 0%, 69%)
Oklch
oklch(33.3% 0.058 305.0)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#15282E

Slate Blue · DarkSlateGray · Peacock Green

HEX
#15282E
RGB
rgb(21, 40, 46)
HSL
hsl(194, 37%, 13%)
HSB
hsb(194, 54%, 18%)
CMYK
cmyk(54%, 13%, 0%, 82%)
Oklch
oklch(26.3% 0.027 220.1)

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

#4A6666

Slate Blue · DimGray · Mint Ice

HEX
#4A6666
RGB
rgb(74, 102, 102)
HSL
hsl(180, 16%, 35%)
HSB
hsb(180, 27%, 40%)
CMYK
cmyk(27%, 0%, 0%, 60%)
Oklch
oklch(48.8% 0.033 196.1)

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

#8D8270

Ochre · Gray · Amber Brown

HEX
#8D8270
RGB
rgb(141, 130, 112)
HSL
hsl(37, 11%, 50%)
HSB
hsb(37, 21%, 55%)
CMYK
cmyk(0%, 8%, 21%, 45%)
Oklch
oklch(61.1% 0.029 80.1)

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

#F0B384

Apricot · BurlyWood · Warm Sun

HEX
#F0B384
RGB
rgb(240, 179, 132)
HSL
hsl(26, 78%, 73%)
HSB
hsb(26, 45%, 94%)
CMYK
cmyk(0%, 25%, 45%, 6%)
Oklch
oklch(81.3% 0.094 58.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D2E4E
3E4D2D

Analogous

2D2E4D
3D2E4E
4C2D4D

Triadic

3D2E4E
4D3C2D
2D4D3C

Split-Comp.

3D2E4E
4D4C2D
2E4D2D

Tetradic

3D2E4E
4D2D2E
3E4D2D
2D4D4C

Contrast Matrix WCAG 2.1 Contrast

3D2E4E
15282E
4A6666
8D8270
F0B384
—
1.2
Fail
2.0
Fail
3.3
AA Large
6.8
AA
1.2
Fail
—
2.5
Fail
4.0
AA Large
8.4
AAA
2.0
Fail
2.5
Fail
—
1.6
Fail
3.4
AA Large
3.3
AA Large
4.0
AA Large
1.6
Fail
—
2.1
Fail
6.8
AA
8.4
AAA
3.4
AA Large
2.1
Fail
—
White BG
12.4AAA
15.3AAA
6.2AA
3.8AA Large
1.8Fail
Black BG
1.7Fail
1.4Fail
3.4AA Large
5.6AA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

373646
1D1D2D
565666
888874
D6D58F

Deuteranopia

373844
1C1B2C
555266
898A75
D9DE92

Tritanopia

3C403F
162B2B
4B6666
8C7879
ED989A

Achromatopsia

363636
232323
5E5E5E
838383
C0C0C0

Shades & Tints Shades & Tints

#3D2E4E

Dark
Light

#15282E

Dark
Light

#4A6666

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d2e4e;
  --color-2: #15282e;
  --color-3: #4a6666;
  --color-4: #8d8270;
  --color-5: #f0b384;
}

SCSS

$color-1: #3d2e4e;
$color-2: #15282e;
$color-3: #4a6666;
$color-4: #8d8270;
$color-5: #f0b384;

TAILWIND

colors: {
  'brand-1': '#3d2e4e',
  'brand-2': '#15282e',
  'brand-3': '#4a6666',
  'brand-4': '#8d8270',
  'brand-5': '#f0b384',
}

RGB Array

[61, 46, 78], [21, 40, 46], [74, 102, 102], [141, 130, 112], [240, 179, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #3D2E4E, #15282E, #4A6666, #8D8270, #F0B384 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #3d2e4e; --color-2: #15282e; --color-3: #4a6666; --color-4: #8d8270; --color-5: #f0b384. 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. 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. 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