← Back to Editor

#F20C55 · #782E2E · #8C6B56 · #B8B284 · #D1E0B4

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

#F20C55

Dark Violet · Crimson · Camellia

HEX
#F20C55
RGB
rgb(242, 12, 85)
HSL
hsl(341, 91%, 50%)
HSB
hsb(341, 95%, 95%)
CMYK
cmyk(0%, 95%, 65%, 5%)
Oklch
oklch(61.4% 0.242 14.4)

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

#782E2E

Crimson · Brown · Wine Red

HEX
#782E2E
RGB
rgb(120, 46, 46)
HSL
hsl(0, 45%, 33%)
HSB
hsb(0, 62%, 47%)
CMYK
cmyk(0%, 62%, 62%, 53%)
Oklch
oklch(40.7% 0.104 22.9)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#8C6B56

Tangerine · DimGray · Amber Brown

HEX
#8C6B56
RGB
rgb(140, 107, 86)
HSL
hsl(23, 24%, 44%)
HSB
hsb(23, 39%, 55%)
CMYK
cmyk(0%, 24%, 39%, 45%)
Oklch
oklch(55.5% 0.053 53.8)

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

#B8B284

Fresh Green · Tan · Sunflower

HEX
#B8B284
RGB
rgb(184, 178, 132)
HSL
hsl(53, 27%, 62%)
HSB
hsb(53, 28%, 72%)
CMYK
cmyk(0%, 3%, 28%, 28%)
Oklch
oklch(75.7% 0.063 101.5)

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

#D1E0B4

Willow Green · LightGray · Apple Green

HEX
#D1E0B4
RGB
rgb(209, 224, 180)
HSL
hsl(80, 42%, 79%)
HSB
hsb(80, 20%, 88%)
CMYK
cmyk(7%, 0%, 20%, 12%)
Oklch
oklch(88.4% 0.061 122.9)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F20C55
0BF4AA

Analogous

F40BC9
F20C55
F4360B

Triadic

F20C55
55F40B
0B55F4

Split-Comp.

F20C55
0BF436
0BC9F4

Tetradic

F20C55
C9F40B
0BF4AA
360BF4

Contrast Matrix WCAG 2.1 Contrast

F20C55
782E2E
8C6B56
B8B284
D1E0B4
—
2.2
Fail
1.1
Fail
2.0
Fail
3.0
AA Large
2.2
Fail
—
2.0
Fail
4.4
AA Large
6.7
AA
1.1
Fail
2.0
Fail
—
2.2
Fail
3.5
AA Large
2.0
Fail
4.4
AA Large
2.2
Fail
—
1.5
Fail
3.0
AA Large
6.7
AA
3.5
AA Large
1.5
Fail
—
White BG
4.2AA Large
9.4AAA
4.8AA
2.2Fail
1.4Fail
Black BG
5.0AA
2.2Fail
4.4AA Large
9.7AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8C43
58572E
7E7D5B
B5B58F
D7D8BF

Deuteranopia

9CAD3F
5C622E
80825C
B6B692
D7D6C1

Tritanopia

E63532
742E2E
8A5F60
B8989A
D2C7C9

Achromatopsia

595959
444444
727272
AFAFAF
D6D6D6

Shades & Tints Shades & Tints

#F20C55

Dark
Light

#782E2E

Dark
Light

#8C6B56

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f20c55;
  --color-2: #782e2e;
  --color-3: #8c6b56;
  --color-4: #b8b284;
  --color-5: #d1e0b4;
}

SCSS

$color-1: #f20c55;
$color-2: #782e2e;
$color-3: #8c6b56;
$color-4: #b8b284;
$color-5: #d1e0b4;

TAILWIND

colors: {
  'brand-1': '#f20c55',
  'brand-2': '#782e2e',
  'brand-3': '#8c6b56',
  'brand-4': '#b8b284',
  'brand-5': '#d1e0b4',
}

RGB Array

[242, 12, 85], [120, 46, 46], [140, 107, 86], [184, 178, 132], [209, 224, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F20C55, #782E2E, #8C6B56, #B8B284, #D1E0B4 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: #f20c55; --color-2: #782e2e; --color-3: #8c6b56; --color-4: #b8b284; --color-5: #d1e0b4. 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