#51FAFC + #BAE4E5 + #BBDAD1 + #DFD7F0 + #C5C0B4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#51FAFC

Sky Blue · Turquoise · Lake Green

HEX

#51FAFC

RGB

rgb(81, 250, 252)

HSL

hsl(181, 97%, 65%)

HSB

hsb(181, 68%, 99%)

CMYK

cmyk(68%, 1%, 0%, 1%)

Oklch

oklch(90.2% 0.135 196.2)

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

#BAE4E5

Sky Blue · LightBlue · Glacier Blue

HEX

#BAE4E5

RGB

rgb(186, 228, 229)

HSL

hsl(181, 45%, 81%)

HSB

hsb(181, 19%, 90%)

CMYK

cmyk(19%, 0%, 0%, 10%)

Oklch

oklch(88.9% 0.044 198.2)

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

#BBDAD1

Jade · LightGray · Glacier Blue

HEX

#BBDAD1

RGB

rgb(187, 218, 209)

HSL

hsl(163, 30%, 79%)

HSB

hsb(163, 14%, 85%)

CMYK

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

Oklch

oklch(86.3% 0.035 176.0)

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

#DFD7F0

Wisteria · Lavender · Sky Blue

HEX

#DFD7F0

RGB

rgb(223, 215, 240)

HSL

hsl(259, 45%, 89%)

HSB

hsb(259, 10%, 94%)

CMYK

cmyk(7%, 10%, 0%, 6%)

Oklch

oklch(89.3% 0.035 300.3)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#C5C0B4

Goose Yellow · Silver · Sunflower

HEX

#C5C0B4

RGB

rgb(197, 192, 180)

HSL

hsl(42, 13%, 74%)

HSB

hsb(42, 9%, 77%)

CMYK

cmyk(0%, 3%, 9%, 23%)

Oklch

oklch(80.8% 0.017 88.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

51FAFC

FC524F

Analogous

4FFCA9

51FAFC

4FA3FC

Triadic

51FAFC

FC4FF9

F9FC4F

Split-Comp.

51FAFC

FC4FA3

FCA94F

Tetradic

51FAFC

A94FFC

FC524F

A3FC4F

Contrast Matrix WCAG 2.1 Contrast

51FAFC	BAE4E5	BBDAD1	DFD7F0	C5C0B4
—	1.1 Fail	1.2 Fail	1.1 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.0 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.1 Fail	1.0 Fail	1.1 Fail	—	1.3 Fail
1.4 Fail	1.3 Fail	1.2 Fail	1.3 Fail	—

White BG

1.3Fail

1.4Fail

1.5Fail

1.4Fail

1.8Fail

Black BG

16.4AAA

15.3AAA

14.1AAA

15.1AAA

11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9CFC

CCCDE5

C8C9D3

DCDBEA

C3C3B7

Deuteranopia

9084FB

CAC7E5

C7C4D4

DCDDE9

C3C3B8

Tritanopia

59FBFB

BCE5E5

BDD5D5

DFE5E4

C5B9BA

Achromatopsia

C8C8C8

D8D8D8

D0D0D0

DCDCDC

C0C0C0

Shades & Tints Shades & Tints

#51FAFC

Dark

Light

#BAE4E5

Dark

Light

#BBDAD1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #51fafc;
  --color-2: #bae4e5;
  --color-3: #bbdad1;
  --color-4: #dfd7f0;
  --color-5: #c5c0b4;
}

SCSS

$color-1: #51fafc;
$color-2: #bae4e5;
$color-3: #bbdad1;
$color-4: #dfd7f0;
$color-5: #c5c0b4;

TAILWIND

colors: {
  'brand-1': '#51fafc',
  'brand-2': '#bae4e5',
  'brand-3': '#bbdad1',
  'brand-4': '#dfd7f0',
  'brand-5': '#c5c0b4',
}

RGB Array

[81, 250, 252], [186, 228, 229], [187, 218, 209], [223, 215, 240], [197, 192, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #51FAFC, #BAE4E5, #BBDAD1, #DFD7F0, #C5C0B4 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: #51fafc; --color-2: #bae4e5; --color-3: #bbdad1; --color-4: #dfd7f0; --color-5: #c5c0b4. 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 general-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