← Back to Editor

#F2B316 · #F8C687 · #487C70 · #323F2B · #6D7850

sea

A 5-color sea palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F2B316

Ginger · Orange · Sunflower

HEX
#F2B316
RGB
rgb(242, 179, 22)
HSL
hsl(43, 89%, 52%)
HSB
hsb(43, 91%, 95%)
CMYK
cmyk(0%, 26%, 91%, 5%)
Oklch
oklch(80.4% 0.162 82.3)

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

#F8C687

Goose Yellow · BurlyWood · Warm Sun

HEX
#F8C687
RGB
rgb(248, 198, 135)
HSL
hsl(33, 89%, 75%)
HSB
hsb(33, 46%, 97%)
CMYK
cmyk(0%, 20%, 46%, 3%)
Oklch
oklch(85.7% 0.098 72.3)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#487C70

Mineral Blue · DimGray · Mint Ice

HEX
#487C70
RGB
rgb(72, 124, 112)
HSL
hsl(166, 27%, 38%)
HSB
hsb(166, 42%, 49%)
CMYK
cmyk(42%, 0%, 10%, 51%)
Oklch
oklch(54.6% 0.059 177.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#323F2B

Celadon · DarkSlateGray · Forest Green

HEX
#323F2B
RGB
rgb(50, 63, 43)
HSL
hsl(99, 19%, 21%)
HSB
hsb(99, 32%, 25%)
CMYK
cmyk(21%, 0%, 32%, 75%)
Oklch
oklch(35.0% 0.038 134.9)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#6D7850

Grass Green · DimGray · Forest Green

HEX
#6D7850
RGB
rgb(109, 120, 80)
HSL
hsl(77, 20%, 39%)
HSB
hsb(77, 33%, 47%)
CMYK
cmyk(9%, 0%, 33%, 53%)
Oklch
oklch(55.3% 0.060 120.9)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2B316
1855F2

Analogous

F24718
F2B316
C2F218

Triadic

F2B316
18F2B4
B418F2

Split-Comp.

F2B316
18C2F2
4718F2

Tetradic

F2B316
18F247
1855F2
F218C2

Contrast Matrix WCAG 2.1 Contrast

F2B316
F8C687
487C70
323F2B
6D7850
—
1.2
Fail
2.6
Fail
6.0
AA
2.5
Fail
1.2
Fail
—
3.1
AA Large
7.1
AAA
3.0
AA Large
2.6
Fail
3.1
AA Large
—
2.3
Fail
1.0
Fail
6.0
AA
7.1
AAA
2.3
Fail
—
2.4
Fail
2.5
Fail
3.0
AA Large
1.0
Fail
2.4
Fail
—
White BG
1.9Fail
1.6Fail
4.8AA
11.2AAA
4.7AA
Black BG
11.2AAA
13.4AAA
4.4AA Large
1.9Fail
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D63C
E2E296
5F5F73
383830
72725A

Deuteranopia

DADF45
E5E99A
5C5874
373631
71705C

Tritanopia

EF5A61
F6A2A5
4B7576
333435
6E6163

Achromatopsia

B4B4B4
CECECE
6B6B6B
393939
707070

Shades & Tints Shades & Tints

#F2B316

Dark
Light

#F8C687

Dark
Light

#487C70

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2b316;
  --color-2: #f8c687;
  --color-3: #487c70;
  --color-4: #323f2b;
  --color-5: #6d7850;
}

SCSS

$color-1: #f2b316;
$color-2: #f8c687;
$color-3: #487c70;
$color-4: #323f2b;
$color-5: #6d7850;

TAILWIND

colors: {
  'brand-1': '#f2b316',
  'brand-2': '#f8c687',
  'brand-3': '#487c70',
  'brand-4': '#323f2b',
  'brand-5': '#6d7850',
}

RGB Array

[242, 179, 22], [248, 198, 135], [72, 124, 112], [50, 63, 43], [109, 120, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F2B316, #F8C687, #487C70, #323F2B, #6D7850 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: #f2b316; --color-2: #f8c687; --color-3: #487c70; --color-4: #323f2b; --color-5: #6d7850. 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