← Back to Editor

#677C81 · #29241E · #6DB1A2 · #F9F2E0 · #C3C5AF

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

#677C81

Slate Blue · SlateGray · Mint Ice

HEX
#677C81
RGB
rgb(103, 124, 129)
HSL
hsl(192, 11%, 45%)
HSB
hsb(192, 20%, 51%)
CMYK
cmyk(20%, 4%, 0%, 49%)
Oklch
oklch(57.1% 0.026 213.7)

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

#29241E

Ochre · Black · Cinnamon

HEX
#29241E
RGB
rgb(41, 36, 30)
HSL
hsl(33, 15%, 14%)
HSB
hsb(33, 27%, 16%)
CMYK
cmyk(0%, 12%, 27%, 84%)
Oklch
oklch(26.4% 0.013 72.3)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#6DB1A2

Mineral Blue · CadetBlue · Lake Green

HEX
#6DB1A2
RGB
rgb(109, 177, 162)
HSL
hsl(167, 30%, 56%)
HSB
hsb(167, 38%, 69%)
CMYK
cmyk(38%, 0%, 8%, 31%)
Oklch
oklch(71.1% 0.073 178.5)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#F9F2E0

Goose Yellow · Beige · Lemon Cream

HEX
#F9F2E0
RGB
rgb(249, 242, 224)
HSL
hsl(43, 68%, 93%)
HSB
hsb(43, 10%, 98%)
CMYK
cmyk(0%, 3%, 10%, 2%)
Oklch
oklch(96.2% 0.025 89.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#C3C5AF

Fresh Green · Silver · Sunflower

HEX
#C3C5AF
RGB
rgb(195, 197, 175)
HSL
hsl(65, 16%, 73%)
HSB
hsb(65, 11%, 77%)
CMYK
cmyk(1%, 0%, 11%, 23%)
Oklch
oklch(81.6% 0.030 111.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

677C81
7F6B66

Analogous

667F78
677C81
666E7F

Triadic

677C81
7F667A
7A7F66

Split-Comp.

677C81
7F666E
7F7866

Tetradic

677C81
78667F
7F6B66
6E7F66

Contrast Matrix WCAG 2.1 Contrast

677C81
29241E
6DB1A2
F9F2E0
C3C5AF
—
3.5
AA Large
1.8
Fail
3.9
AA Large
2.5
Fail
3.5
AA Large
—
6.2
AA
13.8
AAA
8.7
AAA
1.8
Fail
6.2
AA
—
2.2
Fail
1.4
Fail
3.9
AA Large
13.8
AAA
2.2
Fail
—
1.6
Fail
2.5
Fail
8.7
AAA
1.4
Fail
1.6
Fail
—
White BG
4.4AA Large
15.4AAA
2.5Fail
1.1Fail
1.8Fail
Black BG
4.8AA
1.4Fail
8.5AAA
18.8AAA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

707080
27271F
8A8BA6
F6F6E4
C4C4B4

Deuteranopia

6F6D80
272820
8781A7
F6F7E5
C4C4B6

Tritanopia

687F7F
292121
70A8A9
F9E8E9
C3B9B9

Achromatopsia

767676
252525
9B9B9B
F2F2F2
C2C2C2

Shades & Tints Shades & Tints

#677C81

Dark
Light

#29241E

Dark
Light

#6DB1A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #677c81;
  --color-2: #29241e;
  --color-3: #6db1a2;
  --color-4: #f9f2e0;
  --color-5: #c3c5af;
}

SCSS

$color-1: #677c81;
$color-2: #29241e;
$color-3: #6db1a2;
$color-4: #f9f2e0;
$color-5: #c3c5af;

TAILWIND

colors: {
  'brand-1': '#677c81',
  'brand-2': '#29241e',
  'brand-3': '#6db1a2',
  'brand-4': '#f9f2e0',
  'brand-5': '#c3c5af',
}

RGB Array

[103, 124, 129], [41, 36, 30], [109, 177, 162], [249, 242, 224], [195, 197, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #677C81, #29241E, #6DB1A2, #F9F2E0, #C3C5AF 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: #677c81; --color-2: #29241e; --color-3: #6db1a2; --color-4: #f9f2e0; --color-5: #c3c5af. 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