← Back to Editor

#F21D19 · #F93A2B · #C59072 · #C4BDA1 · #D9D7A6

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 Library

Color Details Color Details

#F21D19

Vermilion · Red · Passion Red

HEX
#F21D19
RGB
rgb(242, 29, 25)
HSL
hsl(1, 89%, 52%)
HSB
hsb(1, 90%, 95%)
CMYK
cmyk(0%, 88%, 90%, 5%)
Oklch
oklch(61.2% 0.239 28.7)

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

#F93A2B

Vermilion · OrangeRed · Passion Red

HEX
#F93A2B
RGB
rgb(249, 58, 43)
HSL
hsl(4, 94%, 57%)
HSB
hsb(4, 83%, 98%)
CMYK
cmyk(0%, 77%, 83%, 2%)
Oklch
oklch(64.3% 0.228 29.4)

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

#C59072

Apricot · DarkSalmon · Warm Sun

HEX
#C59072
RGB
rgb(197, 144, 114)
HSL
hsl(22, 42%, 61%)
HSB
hsb(22, 42%, 77%)
CMYK
cmyk(0%, 27%, 42%, 23%)
Oklch
oklch(69.7% 0.077 50.6)

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

#C4BDA1

Ginger · Tan · Sunflower

HEX
#C4BDA1
RGB
rgb(196, 189, 161)
HSL
hsl(48, 23%, 70%)
HSB
hsb(48, 18%, 77%)
CMYK
cmyk(0%, 4%, 18%, 23%)
Oklch
oklch(79.7% 0.039 95.5)

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

#D9D7A6

Fresh Green · Wheat · Sunflower

HEX
#D9D7A6
RGB
rgb(217, 215, 166)
HSL
hsl(58, 40%, 75%)
HSB
hsb(58, 24%, 85%)
CMYK
cmyk(0%, 1%, 24%, 15%)
Oklch
oklch(86.9% 0.065 105.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F21D19
18EEF2

Analogous

F21881
F21D19
F28818

Triadic

F21D19
18F21B
1B18F2

Split-Comp.

F21D19
18F288
1881F2

Tetradic

F21D19
81F218
18EEF2
8818F2

Contrast Matrix WCAG 2.1 Contrast

F21D19
F93A2B
C59072
C4BDA1
D9D7A6
—
1.1
Fail
1.5
Fail
2.2
Fail
2.9
Fail
1.1
Fail
—
1.3
Fail
2.0
Fail
2.5
Fail
1.5
Fail
1.3
Fail
—
1.5
Fail
1.9
Fail
2.2
Fail
2.0
Fail
1.5
Fail
—
1.3
Fail
2.9
Fail
2.5
Fail
1.9
Fail
1.3
Fail
—
White BG
4.2AA Large
3.7AA Large
2.8Fail
1.9Fail
1.5Fail
Black BG
5.0AA
5.7AA
7.6AAA
11.1AAA
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

96941A
A6A52F
AEAE79
C1C1A8
D8D8B2

Deuteranopia

A2B21A
B1C030
B1B57B
C1C2A9
D8D8B5

Tritanopia

E71B1B
EF3132
C27F80
C4ADAE
D9BBBD

Achromatopsia

5C5C5C
717171
9C9C9C
BCBCBC
D2D2D2

Shades & Tints Shades & Tints

#F21D19

Dark
Light

#F93A2B

Dark
Light

#C59072

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f21d19;
  --color-2: #f93a2b;
  --color-3: #c59072;
  --color-4: #c4bda1;
  --color-5: #d9d7a6;
}

SCSS

$color-1: #f21d19;
$color-2: #f93a2b;
$color-3: #c59072;
$color-4: #c4bda1;
$color-5: #d9d7a6;

TAILWIND

colors: {
  'brand-1': '#f21d19',
  'brand-2': '#f93a2b',
  'brand-3': '#c59072',
  'brand-4': '#c4bda1',
  'brand-5': '#d9d7a6',
}

RGB Array

[242, 29, 25], [249, 58, 43], [197, 144, 114], [196, 189, 161], [217, 215, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F21D19, #F93A2B, #C59072, #C4BDA1, #D9D7A6 is ideal for: corporate websites, product showcases, portfolios. 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: #f21d19; --color-2: #f93a2b; --color-3: #c59072; --color-4: #c4bda1; --color-5: #d9d7a6. 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. 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