← Back to Editor

#F2CC67 · #F38264 · #F40034 · #5F051F · #75BAA8

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

#F2CC67

Ginger · SandyBrown · Sunflower

HEX
#F2CC67
RGB
rgb(242, 204, 103)
HSL
hsl(44, 84%, 68%)
HSB
hsb(44, 57%, 95%)
CMYK
cmyk(0%, 16%, 57%, 5%)
Oklch
oklch(85.8% 0.127 88.9)

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

#F38264

Peach Pink · Salmon · Coral Red

HEX
#F38264
RGB
rgb(243, 130, 100)
HSL
hsl(13, 86%, 67%)
HSB
hsb(13, 59%, 95%)
CMYK
cmyk(0%, 47%, 59%, 5%)
Oklch
oklch(72.6% 0.145 35.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F40034

Vermilion · Crimson · Passion Red

HEX
#F40034
RGB
rgb(244, 0, 52)
HSL
hsl(347, 100%, 48%)
HSB
hsb(347, 100%, 96%)
CMYK
cmyk(0%, 100%, 79%, 4%)
Oklch
oklch(61.0% 0.246 22.9)

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

#5F051F

Dark Violet · Maroon · Raspberry

HEX
#5F051F
RGB
rgb(95, 5, 31)
HSL
hsl(343, 90%, 20%)
HSB
hsb(343, 95%, 37%)
CMYK
cmyk(0%, 95%, 67%, 63%)
Oklch
oklch(31.3% 0.120 13.1)

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

#75BAA8

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#75BAA8
RGB
rgb(117, 186, 168)
HSL
hsl(164, 33%, 59%)
HSB
hsb(164, 37%, 73%)
CMYK
cmyk(37%, 0%, 10%, 27%)
Oklch
oklch(73.8% 0.075 175.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2CC67
698DF2

Analogous

F28969
F2CC67
D2F269

Triadic

F2CC67
69F2CD
CD69F2

Split-Comp.

F2CC67
69D2F2
8969F2

Tetradic

F2CC67
69F289
698DF2
F269D2

Contrast Matrix WCAG 2.1 Contrast

F2CC67
F38264
F40034
5F051F
75BAA8
—
1.7
Fail
2.8
Fail
8.9
AAA
1.5
Fail
1.7
Fail
—
1.7
Fail
5.4
AA
1.1
Fail
2.8
Fail
1.7
Fail
—
3.2
AA Large
1.9
Fail
8.9
AAA
5.4
AA
3.2
AA Large
—
6.1
AA
1.5
Fail
1.1
Fail
1.9
Fail
6.1
AA
—
White BG
1.5Fail
2.6Fail
4.3AA Large
13.7AAA
2.2Fail
Black BG
13.6AAA
8.2AAA
4.9AA
1.5Fail
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E17F
C2C16B
8A8827
383719
9393AC

Deuteranopia

E4E785
C9D16D
99AB24
3D4417
8F8AAD

Tritanopia

F09397
ED7172
E81D1B
5B1413
78B0B1

Achromatopsia

CCCCCC
A0A0A0
4F4F4F
232323
A3A3A3

Shades & Tints Shades & Tints

#F2CC67

Dark
Light

#F38264

Dark
Light

#F40034

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2cc67;
  --color-2: #f38264;
  --color-3: #f40034;
  --color-4: #5f051f;
  --color-5: #75baa8;
}

SCSS

$color-1: #f2cc67;
$color-2: #f38264;
$color-3: #f40034;
$color-4: #5f051f;
$color-5: #75baa8;

TAILWIND

colors: {
  'brand-1': '#f2cc67',
  'brand-2': '#f38264',
  'brand-3': '#f40034',
  'brand-4': '#5f051f',
  'brand-5': '#75baa8',
}

RGB Array

[242, 204, 103], [243, 130, 100], [244, 0, 52], [95, 5, 31], [117, 186, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F2CC67, #F38264, #F40034, #5F051F, #75BAA8 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: #f2cc67; --color-2: #f38264; --color-3: #f40034; --color-4: #5f051f; --color-5: #75baa8. 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