← Back to Editor

#FE5F42 · #D07C63 · #A19984 · #A6936F · #AF7510

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

#FE5F42

Peach Pink · Tomato · Coral Red

HEX
#FE5F42
RGB
rgb(254, 95, 66)
HSL
hsl(9, 99%, 63%)
HSB
hsb(9, 74%, 100%)
CMYK
cmyk(0%, 63%, 74%, 0%)
Oklch
oklch(68.9% 0.199 32.5)

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

#D07C63

Crimson · DarkSalmon · Passion Red

HEX
#D07C63
RGB
rgb(208, 124, 99)
HSL
hsl(14, 54%, 60%)
HSB
hsb(14, 52%, 82%)
CMYK
cmyk(0%, 40%, 52%, 18%)
Oklch
oklch(67.1% 0.111 37.4)

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

#A19984

Ginger · DarkSeaGreen · Sunflower

HEX
#A19984
RGB
rgb(161, 153, 132)
HSL
hsl(43, 13%, 57%)
HSB
hsb(43, 18%, 63%)
CMYK
cmyk(0%, 5%, 18%, 37%)
Oklch
oklch(68.4% 0.031 89.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#A6936F

Ginger · Gray · Warm Sun

HEX
#A6936F
RGB
rgb(166, 147, 111)
HSL
hsl(39, 24%, 54%)
HSB
hsb(39, 33%, 65%)
CMYK
cmyk(0%, 11%, 33%, 35%)
Oklch
oklch(67.1% 0.055 83.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#AF7510

Ochre · DarkGoldenRod · Amber Brown

HEX
#AF7510
RGB
rgb(175, 117, 16)
HSL
hsl(38, 83%, 37%)
HSB
hsb(38, 91%, 69%)
CMYK
cmyk(0%, 33%, 91%, 31%)
Oklch
oklch(60.8% 0.125 73.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FE5F42
43E2FE

Analogous

FE4385
FE5F42
FEBD43

Triadic

FE5F42
43FE5F
5F43FE

Split-Comp.

FE5F42
43FEBD
4385FE

Tetradic

FE5F42
85FE43
43E2FE
BD43FE

Contrast Matrix WCAG 2.1 Contrast

FE5F42
D07C63
A19984
A6936F
AF7510
—
1.0
Fail
1.1
Fail
1.0
Fail
1.3
Fail
1.0
Fail
—
1.1
Fail
1.0
Fail
1.3
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.0
Fail
1.0
Fail
1.1
Fail
—
1.3
Fail
1.3
Fail
1.3
Fail
1.4
Fail
1.3
Fail
—
White BG
3.0AA Large
3.1AA Large
2.8Fail
3.0Fail
3.9AA Large
Black BG
6.9AA
6.7AA
7.4AAA
7.0AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B849
ACAB69
9E9D89
9E9E78
969528

Deuteranopia

C2CE4B
B1B76B
9E9F8A
9FA07A
999E2E

Tritanopia

F64F50
CC6E6F
A18D8E
A57F80
AC3C40

Achromatopsia

8B8B8B
929292
999999
959595
7B7B7B

Shades & Tints Shades & Tints

#FE5F42

Dark
Light

#D07C63

Dark
Light

#A19984

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fe5f42;
  --color-2: #d07c63;
  --color-3: #a19984;
  --color-4: #a6936f;
  --color-5: #af7510;
}

SCSS

$color-1: #fe5f42;
$color-2: #d07c63;
$color-3: #a19984;
$color-4: #a6936f;
$color-5: #af7510;

TAILWIND

colors: {
  'brand-1': '#fe5f42',
  'brand-2': '#d07c63',
  'brand-3': '#a19984',
  'brand-4': '#a6936f',
  'brand-5': '#af7510',
}

RGB Array

[254, 95, 66], [208, 124, 99], [161, 153, 132], [166, 147, 111], [175, 117, 16]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #FE5F42, #D07C63, #A19984, #A6936F, #AF7510 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: #fe5f42; --color-2: #d07c63; --color-3: #a19984; --color-4: #a6936f; --color-5: #af7510. 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