#7AAEAD + #EDFBF7 + #A1CCBC + #F8FBFD + #9FAAB1 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7AAEAD

Mineral Blue · CadetBlue · Lake Green

HEX

#7AAEAD

RGB

rgb(122, 174, 173)

HSL

hsl(179, 24%, 58%)

HSB

hsb(179, 30%, 68%)

CMYK

cmyk(30%, 0%, 1%, 32%)

Oklch

oklch(71.4% 0.055 194.5)

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

#EDFBF7

Jade · Snow · Glacier Blue

HEX

#EDFBF7

RGB

rgb(237, 251, 247)

HSL

hsl(163, 64%, 96%)

HSB

hsb(163, 6%, 98%)

CMYK

cmyk(6%, 0%, 2%, 2%)

Oklch

oklch(97.7% 0.016 177.1)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#A1CCBC

Jade · Silver · Apple Green

HEX

#A1CCBC

RGB

rgb(161, 204, 188)

HSL

hsl(158, 30%, 72%)

HSB

hsb(158, 21%, 80%)

CMYK

cmyk(21%, 0%, 8%, 20%)

Oklch

oklch(81.0% 0.051 170.3)

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

#F8FBFD

Sky Blue · Snow · Sky Blue

HEX

#F8FBFD

RGB

rgb(248, 251, 253)

HSL

hsl(204, 56%, 98%)

HSB

hsb(204, 2%, 99%)

CMYK

cmyk(2%, 1%, 0%, 1%)

Oklch

oklch(98.6% 0.004 236.5)

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

#9FAAB1

Sky Blue · DarkGray · Cobalt Blue

HEX

#9FAAB1

RGB

rgb(159, 170, 177)

HSL

hsl(203, 10%, 66%)

HSB

hsb(203, 10%, 69%)

CMYK

cmyk(10%, 4%, 0%, 31%)

Oklch

oklch(73.1% 0.016 235.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7AAEAD

AE7A7B

Analogous

7AAE93

7AAEAD

7A95AE

Triadic

7AAEAD

AD7AAE

AEAD7A

Split-Comp.

7AAEAD

AE7A95

AE937A

Tetradic

7AAEAD

937AAE

AE7A7B

95AE7A

Contrast Matrix WCAG 2.1 Contrast

7AAEAD	EDFBF7	A1CCBC	F8FBFD	9FAAB1
—	2.3 Fail	1.4 Fail	2.4 Fail	1.0 Fail
2.3 Fail	—	1.7 Fail	1.0 Fail	2.2 Fail
1.4 Fail	1.7 Fail	—	1.7 Fail	1.3 Fail
2.4 Fail	1.0 Fail	1.7 Fail	—	2.3 Fail
1.0 Fail	2.2 Fail	1.3 Fail	2.3 Fail	—

White BG

2.5Fail

1.1Fail

1.8Fail

1.0Fail

2.4Fail

Black BG

8.5AAA

19.7AAA

11.9AAA

20.2AAA

8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9191AD

F3F3F8

B4B4C0

F9F9FD

A4A4AF

Deuteranopia

8E8AAD

F2F1F8

B1AEC1

F9F9FC

A3A2AF

Tritanopia

7DADAD

EEF9F9

A3C3C4

F8FCFC

A0AEAE

Achromatopsia

9E9E9E

F6F6F6

BDBDBD

FAFAFA

A8A8A8

Shades & Tints Shades & Tints

#7AAEAD

Dark

Light

#EDFBF7

Dark

Light

#A1CCBC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7aaead;
  --color-2: #edfbf7;
  --color-3: #a1ccbc;
  --color-4: #f8fbfd;
  --color-5: #9faab1;
}

SCSS

$color-1: #7aaead;
$color-2: #edfbf7;
$color-3: #a1ccbc;
$color-4: #f8fbfd;
$color-5: #9faab1;

TAILWIND

colors: {
  'brand-1': '#7aaead',
  'brand-2': '#edfbf7',
  'brand-3': '#a1ccbc',
  'brand-4': '#f8fbfd',
  'brand-5': '#9faab1',
}

RGB Array

[122, 174, 173], [237, 251, 247], [161, 204, 188], [248, 251, 253], [159, 170, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #7AAEAD, #EDFBF7, #A1CCBC, #F8FBFD, #9FAAB1 is ideal for: health products, baby brands, fresh-style blogs. 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: #7aaead; --color-2: #edfbf7; --color-3: #a1ccbc; --color-4: #f8fbfd; --color-5: #9faab1. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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