#73BDF8 + #7C9BBB + #F6E5BB + #DAECFC + #F7F7F8 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#73BDF8

Sky Blue · LightSkyBlue · Cobalt Blue

HEX

#73BDF8

RGB

rgb(115, 189, 248)

HSL

hsl(207, 90%, 71%)

HSB

hsb(207, 54%, 97%)

CMYK

cmyk(54%, 24%, 0%, 3%)

Oklch

oklch(77.3% 0.113 244.0)

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

#7C9BBB

Azure · LightSlateGray · Cobalt Blue

HEX

#7C9BBB

RGB

rgb(124, 155, 187)

HSL

hsl(210, 32%, 61%)

HSB

hsb(210, 34%, 73%)

CMYK

cmyk(34%, 17%, 0%, 27%)

Oklch

oklch(67.8% 0.059 249.5)

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

#F6E5BB

Goose Yellow · Wheat · Lemon Cream

HEX

#F6E5BB

RGB

rgb(246, 229, 187)

HSL

hsl(43, 77%, 85%)

HSB

hsb(43, 24%, 96%)

CMYK

cmyk(0%, 7%, 24%, 4%)

Oklch

oklch(92.5% 0.058 88.6)

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

#DAECFC

Sky Blue · Lavender · Sky Blue

HEX

#DAECFC

RGB

rgb(218, 236, 252)

HSL

hsl(208, 85%, 92%)

HSB

hsb(208, 13%, 99%)

CMYK

cmyk(13%, 6%, 0%, 1%)

Oklch

oklch(93.5% 0.029 244.9)

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

#F7F7F8

Moonlight White · Snow · Cloud White

HEX

#F7F7F8

RGB

rgb(247, 247, 248)

HSL

hsl(240, 7%, 97%)

HSB

hsb(240, 0%, 97%)

CMYK

cmyk(0%, 0%, 0%, 3%)

Oklch

oklch(97.6% 0.001 286.4)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

73BDF8

F8AE72

Analogous

72F8F1

73BDF8

7279F8

Triadic

73BDF8

F872BC

BCF872

Split-Comp.

73BDF8

F87279

F8F172

Tetradic

73BDF8

F172F8

F8AE72

79F872

Contrast Matrix WCAG 2.1 Contrast

73BDF8	7C9BBB	F6E5BB	DAECFC	F7F7F8
—	1.4 Fail	1.6 Fail	1.7 Fail	1.9 Fail
1.4 Fail	—	2.3 Fail	2.4 Fail	2.7 Fail
1.6 Fail	2.3 Fail	—	1.0 Fail	1.2 Fail
1.7 Fail	2.4 Fail	1.0 Fail	—	1.1 Fail
1.9 Fail	2.7 Fail	1.2 Fail	1.1 Fail	—

White BG

2.0Fail

2.9Fail

1.2Fail

1.1Fail

Black BG

10.4AAA

7.3AAA

16.8AAA

17.4AAA

19.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9394EA

898AB3

EFEEC5

E2E2F8

F7F7F8

Deuteranopia

8F89E6

8885B1

F0F1C8

E1DFF7

F7F7F8

Tritanopia

77DEDC

7EADAC

F5CDCF

DBF5F4

F7F8F8

Achromatopsia

AEAEAE

959595

E5E5E5

E8E8E8

F7F7F7

Shades & Tints Shades & Tints

#73BDF8

Dark

Light

#7C9BBB

Dark

Light

#F6E5BB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #73bdf8;
  --color-2: #7c9bbb;
  --color-3: #f6e5bb;
  --color-4: #daecfc;
  --color-5: #f7f7f8;
}

SCSS

$color-1: #73bdf8;
$color-2: #7c9bbb;
$color-3: #f6e5bb;
$color-4: #daecfc;
$color-5: #f7f7f8;

TAILWIND

colors: {
  'brand-1': '#73bdf8',
  'brand-2': '#7c9bbb',
  'brand-3': '#f6e5bb',
  'brand-4': '#daecfc',
  'brand-5': '#f7f7f8',
}

RGB Array

[115, 189, 248], [124, 155, 187], [246, 229, 187], [218, 236, 252], [247, 247, 248]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #73BDF8, #7C9BBB, #F6E5BB, #DAECFC, #F7F7F8 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: #73bdf8; --color-2: #7c9bbb; --color-3: #f6e5bb; --color-4: #daecfc; --color-5: #f7f7f8. 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