#F7FDD3 + #D7EBD8 + #A5D1D9 + #B0B5CC + #C5BDAD · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7FDD3

Fresh Green · Beige · Lemon Cream

HEX

#F7FDD3

RGB

rgb(247, 253, 211)

HSL

hsl(69, 91%, 91%)

HSB

hsb(69, 17%, 99%)

CMYK

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

Oklch

oklch(97.9% 0.055 114.0)

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

#D7EBD8

Celadon · LightGray · Mint Green

HEX

#D7EBD8

RGB

rgb(215, 235, 216)

HSL

hsl(123, 33%, 88%)

HSB

hsb(123, 9%, 92%)

CMYK

cmyk(9%, 0%, 8%, 8%)

Oklch

oklch(92.0% 0.033 146.7)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#A5D1D9

Sky Blue · LightBlue · Lake Green

HEX

#A5D1D9

RGB

rgb(165, 209, 217)

HSL

hsl(189, 41%, 75%)

HSB

hsb(189, 24%, 85%)

CMYK

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

Oklch

oklch(83.2% 0.047 209.9)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B0B5CC

Azure · Silver · Cobalt Blue

HEX

#B0B5CC

RGB

rgb(176, 181, 204)

HSL

hsl(229, 22%, 75%)

HSB

hsb(229, 14%, 80%)

CMYK

cmyk(14%, 11%, 0%, 20%)

Oklch

oklch(77.7% 0.033 275.9)

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

#C5BDAD

Goose Yellow · Silver · Sunflower

HEX

#C5BDAD

RGB

rgb(197, 189, 173)

HSL

hsl(40, 17%, 73%)

HSB

hsb(40, 12%, 77%)

CMYK

cmyk(0%, 4%, 12%, 23%)

Oklch

oklch(80.0% 0.024 84.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7FDD3

D9D3FD

Analogous

FDEED3

F7FDD3

E2FDD3

Triadic

F7FDD3

D3F7FD

FDD3F7

Split-Comp.

F7FDD3

D3E2FD

EED3FD

Tetradic

F7FDD3

D3FDEE

D9D3FD

FDD3E2

Contrast Matrix WCAG 2.1 Contrast

F7FDD3	D7EBD8	A5D1D9	B0B5CC	C5BDAD
—	1.2 Fail	1.6 Fail	1.9 Fail	1.8 Fail
1.2 Fail	—	1.3 Fail	1.6 Fail	1.5 Fail
1.6 Fail	1.3 Fail	—	1.2 Fail	1.1 Fail
1.9 Fail	1.6 Fail	1.2 Fail	—	1.1 Fail
1.8 Fail	1.5 Fail	1.1 Fail	1.1 Fail	—

White BG

1.1Fail

1.3Fail

1.7Fail

2.0Fail

1.9Fail

Black BG

19.9AAA

16.8AAA

12.7AAA

10.3AAA

11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFADD

E0E0DD

B8B8D7

B2B2C6

C2C1B1

Deuteranopia

F9F9E0

DFDDDE

B6B2D7

B2B2C5

C2C3B2

Tritanopia

F7E5E7

D8E0E1

A7D6D5

B0C2C1

C5B4B5

Achromatopsia

F6F6F6

E3E3E3

C5C5C5

B6B6B6

BEBEBE

Shades & Tints Shades & Tints

#F7FDD3

Dark

Light

#D7EBD8

Dark

Light

#A5D1D9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7fdd3;
  --color-2: #d7ebd8;
  --color-3: #a5d1d9;
  --color-4: #b0b5cc;
  --color-5: #c5bdad;
}

SCSS

$color-1: #f7fdd3;
$color-2: #d7ebd8;
$color-3: #a5d1d9;
$color-4: #b0b5cc;
$color-5: #c5bdad;

TAILWIND

colors: {
  'brand-1': '#f7fdd3',
  'brand-2': '#d7ebd8',
  'brand-3': '#a5d1d9',
  'brand-4': '#b0b5cc',
  'brand-5': '#c5bdad',
}

RGB Array

[247, 253, 211], [215, 235, 216], [165, 209, 217], [176, 181, 204], [197, 189, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F7FDD3, #D7EBD8, #A5D1D9, #B0B5CC, #C5BDAD 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: #f7fdd3; --color-2: #d7ebd8; --color-3: #a5d1d9; --color-4: #b0b5cc; --color-5: #c5bdad. 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