#7B88AA + #C8B7B0 + #92AFAD + #3A8D9B + #2679A1 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7B88AA

Azure · LightSlateGray · Navy Blue

HEX

#7B88AA

RGB

rgb(123, 136, 170)

HSL

hsl(223, 22%, 57%)

HSB

hsb(223, 28%, 67%)

CMYK

cmyk(28%, 20%, 0%, 33%)

Oklch

oklch(62.9% 0.054 268.5)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#C8B7B0

Apricot · Silver · Warm Sun

HEX

#C8B7B0

RGB

rgb(200, 183, 176)

HSL

hsl(18, 18%, 74%)

HSB

hsb(18, 12%, 78%)

CMYK

cmyk(0%, 8%, 12%, 22%)

Oklch

oklch(79.2% 0.022 43.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#92AFAD

Jade · DarkGray · Lake Green

HEX

#92AFAD

RGB

rgb(146, 175, 173)

HSL

hsl(176, 15%, 63%)

HSB

hsb(176, 17%, 69%)

CMYK

cmyk(17%, 0%, 1%, 31%)

Oklch

oklch(73.2% 0.032 191.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#3A8D9B

Slate Blue · SteelBlue · Mint Ice

HEX

#3A8D9B

RGB

rgb(58, 141, 155)

HSL

hsl(189, 46%, 42%)

HSB

hsb(189, 63%, 61%)

CMYK

cmyk(63%, 9%, 0%, 39%)

Oklch

oklch(59.9% 0.082 210.4)

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

#2679A1

Lake Blue · SteelBlue · Prussian Blue

HEX

#2679A1

RGB

rgb(38, 121, 161)

HSL

hsl(200, 62%, 39%)

HSB

hsb(200, 76%, 63%)

CMYK

cmyk(76%, 25%, 0%, 37%)

Oklch

oklch(54.5% 0.099 234.1)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B88AA

A99C79

Analogous

799FA9

7B88AA

8479A9

Triadic

7B88AA

A97987

87A979

Split-Comp.

7B88AA

A98479

9FA979

Tetradic

7B88AA

A9799F

A99C79

79A984

Contrast Matrix WCAG 2.1 Contrast

7B88AA	C8B7B0	92AFAD	3A8D9B	2679A1
—	1.8 Fail	1.5 Fail	1.1 Fail	1.4 Fail
1.8 Fail	—	1.2 Fail	2.0 Fail	2.5 Fail
1.5 Fail	1.2 Fail	—	1.6 Fail	2.1 Fail
1.1 Fail	2.0 Fail	1.6 Fail	—	1.3 Fail
1.4 Fail	2.5 Fail	2.1 Fail	1.3 Fail	—

White BG

3.5AA Large

1.9Fail

2.3Fail

3.8AA Large

4.8AA

Black BG

5.9AA

10.9AAA

9.0AAA

5.5AA

4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8181A2

C1C0B2

9F9FAD

5E5F98

4A4B97

Deuteranopia

807FA0

C2C3B2

9D9BAE

595397

453F95

Tritanopia

7C9B9A

C7B3B3

93AEAE

3E9594

2A908E

Achromatopsia

888888

BBBBBB

A6A6A6

767676

656565

Shades & Tints Shades & Tints

#7B88AA

Dark

Light

#C8B7B0

Dark

Light

#92AFAD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b88aa;
  --color-2: #c8b7b0;
  --color-3: #92afad;
  --color-4: #3a8d9b;
  --color-5: #2679a1;
}

SCSS

$color-1: #7b88aa;
$color-2: #c8b7b0;
$color-3: #92afad;
$color-4: #3a8d9b;
$color-5: #2679a1;

TAILWIND

colors: {
  'brand-1': '#7b88aa',
  'brand-2': '#c8b7b0',
  'brand-3': '#92afad',
  'brand-4': '#3a8d9b',
  'brand-5': '#2679a1',
}

RGB Array

[123, 136, 170], [200, 183, 176], [146, 175, 173], [58, 141, 155], [38, 121, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #7B88AA, #C8B7B0, #92AFAD, #3A8D9B, #2679A1 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: #7b88aa; --color-2: #c8b7b0; --color-3: #92afad; --color-4: #3a8d9b; --color-5: #2679a1. 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