← Back to Editor

#0F3460 · #738ACD · #9CCEFF · #FCE8C2 · #FAB373

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

#0F3460

Indigo · MidnightBlue · Prussian Blue

HEX
#0F3460
RGB
rgb(15, 52, 96)
HSL
hsl(213, 73%, 22%)
HSB
hsb(213, 84%, 38%)
CMYK
cmyk(84%, 46%, 0%, 62%)
Oklch
oklch(32.5% 0.088 255.1)

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

#738ACD

Azure · CornflowerBlue · Cobalt Blue

HEX
#738ACD
RGB
rgb(115, 138, 205)
HSL
hsl(225, 47%, 63%)
HSB
hsb(225, 44%, 80%)
CMYK
cmyk(44%, 33%, 0%, 20%)
Oklch
oklch(64.3% 0.104 268.9)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#9CCEFF

Azure · LightSkyBlue · Sky Blue

HEX
#9CCEFF
RGB
rgb(156, 206, 255)
HSL
hsl(210, 100%, 81%)
HSB
hsb(210, 39%, 100%)
CMYK
cmyk(39%, 19%, 0%, 0%)
Oklch
oklch(83.4% 0.087 248.4)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#FCE8C2

Goose Yellow · Bisque · Peach Orange

HEX
#FCE8C2
RGB
rgb(252, 232, 194)
HSL
hsl(39, 91%, 87%)
HSB
hsb(39, 23%, 99%)
CMYK
cmyk(0%, 8%, 23%, 1%)
Oklch
oklch(93.8% 0.054 83.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FAB373

Apricot · LightSalmon · Warm Sun

HEX
#FAB373
RGB
rgb(250, 179, 115)
HSL
hsl(28, 93%, 72%)
HSB
hsb(28, 54%, 98%)
CMYK
cmyk(0%, 28%, 54%, 2%)
Oklch
oklch(82.0% 0.116 62.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0F3460
613C0F

Analogous

0F5D61
0F3460
130F61

Triadic

0F3460
610F34
34610F

Split-Comp.

0F3460
61130F
5D610F

Tetradic

0F3460
610F5D
613C0F
0F6113

Contrast Matrix WCAG 2.1 Contrast

0F3460
738ACD
9CCEFF
FCE8C2
FAB373
—
3.7
AA Large
7.5
AAA
10.4
AAA
7.0
AA
3.7
AA Large
—
2.0
Fail
2.8
Fail
1.9
Fail
7.5
AAA
2.0
Fail
—
1.4
Fail
1.1
Fail
10.4
AAA
2.8
Fail
1.4
Fail
—
1.5
Fail
7.0
AA
1.9
Fail
1.1
Fail
1.5
Fail
—
White BG
12.5AAA
3.4AA Large
1.7Fail
1.2Fail
1.8Fail
Black BG
1.7Fail
6.2AA
12.7AAA
17.5AAA
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1F55
7D7DBD
B2B2F3
F3F3CB
DBDB82

Deuteranopia

1D1A53
7C7AB9
AFABF0
F5F6CD
DFE586

Tritanopia

114D4B
74B0AD
9FEAE8
FBD2D4
F68F91

Achromatopsia

2E2E2E
8B8B8B
C5C5C5
EAEAEA
C1C1C1

Shades & Tints Shades & Tints

#0F3460

Dark
Light

#738ACD

Dark
Light

#9CCEFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0f3460;
  --color-2: #738acd;
  --color-3: #9cceff;
  --color-4: #fce8c2;
  --color-5: #fab373;
}

SCSS

$color-1: #0f3460;
$color-2: #738acd;
$color-3: #9cceff;
$color-4: #fce8c2;
$color-5: #fab373;

TAILWIND

colors: {
  'brand-1': '#0f3460',
  'brand-2': '#738acd',
  'brand-3': '#9cceff',
  'brand-4': '#fce8c2',
  'brand-5': '#fab373',
}

RGB Array

[15, 52, 96], [115, 138, 205], [156, 206, 255], [252, 232, 194], [250, 179, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #0F3460, #738ACD, #9CCEFF, #FCE8C2, #FAB373 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #0f3460; --color-2: #738acd; --color-3: #9cceff; --color-4: #fce8c2; --color-5: #fab373. 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 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