← Back to Editor

#F2F2CC · #B6B08C · #4C4E49 · #495958 · #808E81

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

#F2F2CC

Fresh Green · Beige · Lemon Cream

HEX
#F2F2CC
RGB
rgb(242, 242, 204)
HSL
hsl(60, 59%, 87%)
HSB
hsb(60, 16%, 95%)
CMYK
cmyk(0%, 0%, 16%, 5%)
Oklch
oklch(95.1% 0.050 107.3)

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

#B6B08C

Fresh Green · Tan · Sunflower

HEX
#B6B08C
RGB
rgb(182, 176, 140)
HSL
hsl(51, 22%, 63%)
HSB
hsb(51, 23%, 71%)
CMYK
cmyk(0%, 3%, 23%, 29%)
Oklch
oklch(75.3% 0.050 99.6)

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

#4C4E49

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4C4E49
RGB
rgb(76, 78, 73)
HSL
hsl(84, 3%, 30%)
HSB
hsb(84, 6%, 31%)
CMYK
cmyk(3%, 0%, 6%, 69%)
Oklch
oklch(42.0% 0.009 124.6)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#495958

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#495958
RGB
rgb(73, 89, 88)
HSL
hsl(176, 10%, 32%)
HSB
hsb(176, 18%, 35%)
CMYK
cmyk(18%, 0%, 1%, 65%)
Oklch
oklch(45.0% 0.020 191.8)

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

#808E81

Ash · Gray · Warm Gray

HEX
#808E81
RGB
rgb(128, 142, 129)
HSL
hsl(124, 6%, 53%)
HSB
hsb(124, 10%, 56%)
CMYK
cmyk(10%, 0%, 9%, 44%)
Oklch
oklch(63.1% 0.025 147.3)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2F2CC
CACAF1

Analogous

F1DECA
F2F2CC
DEF1CA

Triadic

F2F2CC
CAF1F1
F1CAF1

Split-Comp.

F2F2CC
CADEF1
DECAF1

Tetradic

F2F2CC
CAF1DE
CACAF1
F1CADE

Contrast Matrix WCAG 2.1 Contrast

F2F2CC
B6B08C
4C4E49
495958
808E81
—
1.9
Fail
7.4
AAA
6.4
AA
3.0
AA Large
1.9
Fail
—
3.8
AA Large
3.4
AA Large
1.6
Fail
7.4
AAA
3.8
AA Large
—
1.1
Fail
2.4
Fail
6.4
AA
3.4
AA Large
1.1
Fail
—
2.1
Fail
3.0
AA Large
1.6
Fail
2.4
Fail
2.1
Fail
—
White BG
1.1Fail
2.2Fail
8.4AAA
7.4AAA
3.4AA Large
Black BG
18.3AAA
9.6AAA
2.5Fail
2.9Fail
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2D5
B3B395
4D4D4A
505058
868684

Deuteranopia

F2F2D7
B4B497
4D4D4B
4F4E58
858485

Tritanopia

F2DCDE
B69C9D
4C4B4B
4A5858
818787

Achromatopsia

EEEEEE
AEAEAE
4D4D4D
545454
888888

Shades & Tints Shades & Tints

#F2F2CC

Dark
Light

#B6B08C

Dark
Light

#4C4E49

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2f2cc;
  --color-2: #b6b08c;
  --color-3: #4c4e49;
  --color-4: #495958;
  --color-5: #808e81;
}

SCSS

$color-1: #f2f2cc;
$color-2: #b6b08c;
$color-3: #4c4e49;
$color-4: #495958;
$color-5: #808e81;

TAILWIND

colors: {
  'brand-1': '#f2f2cc',
  'brand-2': '#b6b08c',
  'brand-3': '#4c4e49',
  'brand-4': '#495958',
  'brand-5': '#808e81',
}

RGB Array

[242, 242, 204], [182, 176, 140], [76, 78, 73], [73, 89, 88], [128, 142, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F2F2CC, #B6B08C, #4C4E49, #495958, #808E81 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f2f2cc; --color-2: #b6b08c; --color-3: #4c4e49; --color-4: #495958; --color-5: #808e81. 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. Restrained colors convey professionalism and trust. 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