← Back to Editor

#9DC8FC · #9DFCD1 · #FCD19D · #FC9DC8 · #D19DFC

sea

A 5-color sea palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#9DC8FC

Azure · LightSkyBlue · Cobalt Blue

HEX
#9DC8FC
RGB
rgb(157, 200, 252)
HSL
hsl(213, 94%, 80%)
HSB
hsb(213, 38%, 99%)
CMYK
cmyk(38%, 21%, 0%, 1%)
Oklch
oklch(82.1% 0.087 253.5)

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

#9DFCD1

Jade · LightBlue · Apple Green

HEX
#9DFCD1
RGB
rgb(157, 252, 209)
HSL
hsl(153, 94%, 80%)
HSB
hsb(153, 38%, 99%)
CMYK
cmyk(38%, 0%, 17%, 1%)
Oklch
oklch(92.0% 0.109 163.8)

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

#FCD19D

Goose Yellow · Wheat · Peach Orange

HEX
#FCD19D
RGB
rgb(252, 209, 157)
HSL
hsl(33, 94%, 80%)
HSB
hsb(33, 38%, 99%)
CMYK
cmyk(0%, 17%, 38%, 1%)
Oklch
oklch(88.6% 0.083 71.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FC9DC8

Rouge · LightPink · Cherry Blossom

HEX
#FC9DC8
RGB
rgb(252, 157, 200)
HSL
hsl(333, 94%, 80%)
HSB
hsb(333, 38%, 99%)
CMYK
cmyk(0%, 38%, 21%, 1%)
Oklch
oklch(80.4% 0.124 351.6)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#D19DFC

Lilac · Violet · Lilac Purple

HEX
#D19DFC
RGB
rgb(209, 157, 252)
HSL
hsl(273, 94%, 80%)
HSB
hsb(273, 38%, 99%)
CMYK
cmyk(17%, 38%, 0%, 1%)
Oklch
oklch(77.9% 0.142 308.6)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DC8FC
FCD19C

Analogous

9CF7FC
9DC8FC
A19CFC

Triadic

9DC8FC
FC9CC7
C7FC9C

Split-Comp.

9DC8FC
FCA19C
F7FC9C

Tetradic

9DC8FC
FC9CF7
FCD19C
9CFCA1

Contrast Matrix WCAG 2.1 Contrast

9DC8FC
9DFCD1
FCD19D
FC9DC8
D19DFC
—
1.4
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.4
Fail
—
1.2
Fail
1.6
Fail
1.7
Fail
1.2
Fail
1.2
Fail
—
1.4
Fail
1.5
Fail
1.1
Fail
1.6
Fail
1.4
Fail
—
1.1
Fail
1.2
Fail
1.7
Fail
1.5
Fail
1.1
Fail
—
White BG
1.7Fail
1.2Fail
1.4Fail
1.9Fail
2.1Fail
Black BG
12.1AAA
17.3AAA
14.7AAA
10.8AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0B0EF
C6C7DB
E9E9AA
D3D2BE
BABAE5

Deuteranopia

ADAAEC
C1BADE
ECEFAD
D8DFBB
BEC1DF

Tritanopia

9FE5E3
A2E4E5
FAB4B6
F7B5B4
CED3CF

Achromatopsia

C1C1C1
DBDBDB
D8D8D8
BEBEBE
B7B7B7

Shades & Tints Shades & Tints

#9DC8FC

Dark
Light

#9DFCD1

Dark
Light

#FCD19D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9dc8fc;
  --color-2: #9dfcd1;
  --color-3: #fcd19d;
  --color-4: #fc9dc8;
  --color-5: #d19dfc;
}

SCSS

$color-1: #9dc8fc;
$color-2: #9dfcd1;
$color-3: #fcd19d;
$color-4: #fc9dc8;
$color-5: #d19dfc;

TAILWIND

colors: {
  'brand-1': '#9dc8fc',
  'brand-2': '#9dfcd1',
  'brand-3': '#fcd19d',
  'brand-4': '#fc9dc8',
  'brand-5': '#d19dfc',
}

RGB Array

[157, 200, 252], [157, 252, 209], [252, 209, 157], [252, 157, 200], [209, 157, 252]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #9DC8FC, #9DFCD1, #FCD19D, #FC9DC8, #D19DFC is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9dc8fc; --color-2: #9dfcd1; --color-3: #fcd19d; --color-4: #fc9dc8; --color-5: #d19dfc. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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