← Back to Editor

#3F3438 · #F0445A · #E4A44C · #E3C684 · #EFCFBA

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 LibraryData Visualization

Color Details Color Details

#3F3438

Dark Violet · DarkSlateGray · Raspberry

HEX
#3F3438
RGB
rgb(63, 52, 56)
HSL
hsl(338, 10%, 23%)
HSB
hsb(338, 17%, 25%)
CMYK
cmyk(0%, 17%, 11%, 75%)
Oklch
oklch(33.8% 0.017 354.2)

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

#F0445A

Vermilion · Tomato · Passion Red

HEX
#F0445A
RGB
rgb(240, 68, 90)
HSL
hsl(352, 85%, 60%)
HSB
hsb(352, 72%, 94%)
CMYK
cmyk(0%, 72%, 62%, 6%)
Oklch
oklch(64.2% 0.207 18.3)

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

#E4A44C

Ginger · SandyBrown · Warm Sun

HEX
#E4A44C
RGB
rgb(228, 164, 76)
HSL
hsl(35, 74%, 60%)
HSB
hsb(35, 67%, 89%)
CMYK
cmyk(0%, 28%, 67%, 11%)
Oklch
oklch(76.4% 0.128 72.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#E3C684

Ginger · BurlyWood · Sunflower

HEX
#E3C684
RGB
rgb(227, 198, 132)
HSL
hsl(42, 63%, 70%)
HSB
hsb(42, 42%, 89%)
CMYK
cmyk(0%, 13%, 42%, 11%)
Oklch
oklch(83.6% 0.090 86.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#EFCFBA

Apricot · Wheat · Peach Orange

HEX
#EFCFBA
RGB
rgb(239, 207, 186)
HSL
hsl(24, 62%, 83%)
HSB
hsb(24, 22%, 94%)
CMYK
cmyk(0%, 13%, 22%, 6%)
Oklch
oklch(87.6% 0.046 55.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3F3438
35413C

Analogous

41353F
3F3438
413635

Triadic

3F3438
394135
353941

Split-Comp.

3F3438
354136
353F41

Tetradic

3F3438
3F4135
35413C
363541

Contrast Matrix WCAG 2.1 Contrast

3F3438
F0445A
E4A44C
E3C684
EFCFBA
—
3.2
AA Large
5.5
AA
7.2
AAA
8.1
AAA
3.2
AA Large
—
1.7
Fail
2.2
Fail
2.5
Fail
5.5
AA
1.7
Fail
—
1.3
Fail
1.5
Fail
7.2
AAA
2.2
Fail
1.3
Fail
—
1.1
Fail
8.1
AAA
2.5
Fail
1.5
Fail
1.1
Fail
—
White BG
11.9AAA
3.7AA Large
2.2Fail
1.7Fail
1.5Fail
Black BG
1.8Fail
5.7AA
9.7AAA
12.7AAA
14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A37
A6A455
C8C861
D6D694
E1E1BF

Deuteranopia

3B3C37
B0BC53
CCD166
D8DA98
E3E5C0

Tritanopia

3E3636
E75050
E17276
E2A1A3
EDC3C4

Achromatopsia

383838
7A7A7A
ADADAD
C7C7C7
D6D6D6

Shades & Tints Shades & Tints

#3F3438

Dark
Light

#F0445A

Dark
Light

#E4A44C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3f3438;
  --color-2: #f0445a;
  --color-3: #e4a44c;
  --color-4: #e3c684;
  --color-5: #efcfba;
}

SCSS

$color-1: #3f3438;
$color-2: #f0445a;
$color-3: #e4a44c;
$color-4: #e3c684;
$color-5: #efcfba;

TAILWIND

colors: {
  'brand-1': '#3f3438',
  'brand-2': '#f0445a',
  'brand-3': '#e4a44c',
  'brand-4': '#e3c684',
  'brand-5': '#efcfba',
}

RGB Array

[63, 52, 56], [240, 68, 90], [228, 164, 76], [227, 198, 132], [239, 207, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #3F3438, #F0445A, #E4A44C, #E3C684, #EFCFBA is ideal for: 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: #3f3438; --color-2: #f0445a; --color-3: #e4a44c; --color-4: #e3c684; --color-5: #efcfba. 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. 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