← Back to Editor

#7CA4A3 · #948157 · #FFF7B9 · #88A4BC · #7F5D6D

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

#7CA4A3

Mineral Blue · CadetBlue · Lake Green

HEX
#7CA4A3
RGB
rgb(124, 164, 163)
HSL
hsl(178, 18%, 56%)
HSB
hsb(178, 24%, 64%)
CMYK
cmyk(24%, 0%, 1%, 36%)
Oklch
oklch(68.9% 0.043 194.3)

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

#948157

Ochre · Gray · Honey Gold

HEX
#948157
RGB
rgb(148, 129, 87)
HSL
hsl(41, 26%, 46%)
HSB
hsb(41, 41%, 58%)
CMYK
cmyk(0%, 13%, 41%, 42%)
Oklch
oklch(61.0% 0.063 86.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#FFF7B9

Fresh Green · Bisque · Lemon Cream

HEX
#FFF7B9
RGB
rgb(255, 247, 185)
HSL
hsl(53, 100%, 86%)
HSB
hsb(53, 27%, 100%)
CMYK
cmyk(0%, 3%, 27%, 0%)
Oklch
oklch(96.8% 0.079 101.6)

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

#88A4BC

Sky Blue · DarkGray · Cobalt Blue

HEX
#88A4BC
RGB
rgb(136, 164, 188)
HSL
hsl(208, 28%, 64%)
HSB
hsb(208, 28%, 74%)
CMYK
cmyk(28%, 13%, 0%, 26%)
Oklch
oklch(70.6% 0.047 244.4)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#7F5D6D

Dark Violet · DimGray · Camellia

HEX
#7F5D6D
RGB
rgb(127, 93, 109)
HSL
hsl(332, 15%, 43%)
HSB
hsb(332, 27%, 50%)
CMYK
cmyk(0%, 27%, 14%, 50%)
Oklch
oklch(51.9% 0.050 349.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7CA4A3
A37B7C

Analogous

7BA38D
7CA4A3
7B90A3

Triadic

7CA4A3
A27BA3
A3A27B

Split-Comp.

7CA4A3
A37B90
A38D7B

Tetradic

7CA4A3
8D7BA3
A37B7C
90A37B

Contrast Matrix WCAG 2.1 Contrast

7CA4A3
948157
FFF7B9
88A4BC
7F5D6D
—
1.4
Fail
2.5
Fail
1.1
Fail
2.1
Fail
1.4
Fail
—
3.5
AA Large
1.5
Fail
1.5
Fail
2.5
Fail
3.5
AA Large
—
2.4
Fail
5.2
AA
1.1
Fail
1.5
Fail
2.4
Fail
—
2.2
Fail
2.1
Fail
1.5
Fail
5.2
AA
2.2
Fail
—
White BG
2.7Fail
3.8AA Large
1.1Fail
2.6Fail
5.7AA
Black BG
7.7AAA
5.5AA
19.3AAA
8.1AAA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8EA3
8C8C61
FCFBC8
9494B6
707069

Deuteranopia

8B88A3
8D8E64
FCFDCC
9390B5
727568

Tritanopia

7EA3A3
93696B
FFD4D6
89B2B1
7D6665

Achromatopsia

989898
828282
F2F2F2
9E9E9E
696969

Shades & Tints Shades & Tints

#7CA4A3

Dark
Light

#948157

Dark
Light

#FFF7B9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7ca4a3;
  --color-2: #948157;
  --color-3: #fff7b9;
  --color-4: #88a4bc;
  --color-5: #7f5d6d;
}

SCSS

$color-1: #7ca4a3;
$color-2: #948157;
$color-3: #fff7b9;
$color-4: #88a4bc;
$color-5: #7f5d6d;

TAILWIND

colors: {
  'brand-1': '#7ca4a3',
  'brand-2': '#948157',
  'brand-3': '#fff7b9',
  'brand-4': '#88a4bc',
  'brand-5': '#7f5d6d',
}

RGB Array

[124, 164, 163], [148, 129, 87], [255, 247, 185], [136, 164, 188], [127, 93, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #7CA4A3, #948157, #FFF7B9, #88A4BC, #7F5D6D 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: #7ca4a3; --color-2: #948157; --color-3: #fff7b9; --color-4: #88a4bc; --color-5: #7f5d6d. 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