← Back to Editor

#F2A004 · #0DFFE4 · #08947D · #262E53 · #1E0032

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F2A004

Ochre · Orange · Amber Brown

HEX
#F2A004
RGB
rgb(242, 160, 4)
HSL
hsl(39, 97%, 48%)
HSB
hsb(39, 98%, 95%)
CMYK
cmyk(0%, 34%, 98%, 5%)
Oklch
oklch(76.9% 0.163 72.5)

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

#0DFFE4

Mineral Blue · Cyan · Lake Green

HEX
#0DFFE4
RGB
rgb(13, 255, 228)
HSL
hsl(173, 100%, 53%)
HSB
hsb(173, 95%, 100%)
CMYK
cmyk(95%, 0%, 11%, 0%)
Oklch
oklch(89.7% 0.160 181.4)

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

#08947D

Mineral Blue · Teal · Mint Ice

HEX
#08947D
RGB
rgb(8, 148, 125)
HSL
hsl(170, 90%, 31%)
HSB
hsb(170, 95%, 58%)
CMYK
cmyk(95%, 0%, 16%, 42%)
Oklch
oklch(59.6% 0.110 176.3)

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

#262E53

Indigo · DarkSlateGray · Prussian Blue

HEX
#262E53
RGB
rgb(38, 46, 83)
HSL
hsl(229, 37%, 24%)
HSB
hsb(229, 54%, 33%)
CMYK
cmyk(54%, 45%, 0%, 67%)
Oklch
oklch(31.4% 0.067 272.8)

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

#1E0032

Royal Purple · Black · Dark Purple

HEX
#1E0032
RGB
rgb(30, 0, 50)
HSL
hsl(276, 100%, 10%)
HSB
hsb(276, 100%, 20%)
CMYK
cmyk(40%, 100%, 0%, 80%)
Oklch
oklch(18.5% 0.095 307.3)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2A004
0457F1

Analogous

F12704
F2A004
CEF104

Triadic

F2A004
04F19E
9E04F1

Split-Comp.

F2A004
04CEF1
2704F1

Tetradic

F2A004
04F127
0457F1
F104CE

Contrast Matrix WCAG 2.1 Contrast

F2A004
0DFFE4
08947D
262E53
1E0032
—
1.7
Fail
1.8
Fail
6.1
AA
8.9
AAA
1.7
Fail
—
3.0
Fail
10.3
AAA
14.9
AAA
1.8
Fail
3.0
Fail
—
3.5
AA Large
5.0
AA
6.1
AA
10.3
AAA
3.5
AA Large
—
1.5
Fail
8.9
AAA
14.9
AAA
5.0
AA
1.5
Fail
—
White BG
2.1Fail
1.3Fail
3.8AA Large
13.1AAA
19.1AAA
Black BG
9.8AAA
16.4AAA
5.5AA
1.6Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECE2A
7678EB
454683
292A4A
111126

Deuteranopia

D3D933
6856EC
3D3284
292848
131523

Tritanopia

EE484E
19F0F1
0F8788
264341
1D1C1A

Achromatopsia

A7A7A7
B4B4B4
686868
303030
0F0F0F

Shades & Tints Shades & Tints

#F2A004

Dark
Light

#0DFFE4

Dark
Light

#08947D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2a004;
  --color-2: #0dffe4;
  --color-3: #08947d;
  --color-4: #262e53;
  --color-5: #1e0032;
}

SCSS

$color-1: #f2a004;
$color-2: #0dffe4;
$color-3: #08947d;
$color-4: #262e53;
$color-5: #1e0032;

TAILWIND

colors: {
  'brand-1': '#f2a004',
  'brand-2': '#0dffe4',
  'brand-3': '#08947d',
  'brand-4': '#262e53',
  'brand-5': '#1e0032',
}

RGB Array

[242, 160, 4], [13, 255, 228], [8, 148, 125], [38, 46, 83], [30, 0, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F2A004, #0DFFE4, #08947D, #262E53, #1E0032 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f2a004; --color-2: #0dffe4; --color-3: #08947d; --color-4: #262e53; --color-5: #1e0032. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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