#C7F8FC + #2BEEFC + #00AEFF + #C5CDD1 + #E6E6E6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C7F8FC

Sky Blue · Lavender · Glacier Blue

HEX

#C7F8FC

RGB

rgb(199, 248, 252)

HSL

hsl(185, 90%, 88%)

HSB

hsb(185, 21%, 99%)

CMYK

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

Oklch

oklch(94.7% 0.050 202.5)

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

#2BEEFC

Lake Blue · Cyan · Lake Green

HEX

#2BEEFC

RGB

rgb(43, 238, 252)

HSL

hsl(184, 97%, 58%)

HSB

hsb(184, 83%, 99%)

CMYK

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

Oklch

oklch(86.7% 0.142 202.8)

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

#00AEFF

Lake Blue · DeepSkyBlue · Mint Ice

HEX

#00AEFF

RGB

rgb(0, 174, 255)

HSL

hsl(199, 100%, 50%)

HSB

hsb(199, 100%, 100%)

CMYK

cmyk(100%, 32%, 0%, 0%)

Oklch

oklch(71.6% 0.165 240.2)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#C5CDD1

Sky Blue · LightGray · Cobalt Blue

HEX

#C5CDD1

RGB

rgb(197, 205, 209)

HSL

hsl(200, 12%, 80%)

HSB

hsb(200, 6%, 82%)

CMYK

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

Oklch

oklch(84.3% 0.010 228.9)

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

#E6E6E6

Plain White · Lavender · Cloud White

HEX

#E6E6E6

RGB

rgb(230, 230, 230)

HSL

hsl(0, 0%, 90%)

HSB

hsb(0, 0%, 90%)

CMYK

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

Oklch

oklch(92.5% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7F8FC

FCC9C5

Analogous

C5FCE5

C7F8FC

C5DCFC

Triadic

C7F8FC

FCC5F7

F7FCC5

Split-Comp.

C7F8FC

FCC5DC

FCE5C5

Tetradic

C7F8FC

E5C5FC

FCC9C5

DCFCC5

Contrast Matrix WCAG 2.1 Contrast

C7F8FC	2BEEFC	00AEFF	C5CDD1	E6E6E6
—	1.2 Fail	2.1 Fail	1.4 Fail	1.1 Fail
1.2 Fail	—	1.7 Fail	1.1 Fail	1.1 Fail
2.1 Fail	1.7 Fail	—	1.5 Fail	2.0 Fail
1.4 Fail	1.1 Fail	1.5 Fail	—	1.3 Fail
1.1 Fail	1.1 Fail	2.0 Fail	1.3 Fail	—

White BG

1.1Fail

1.4Fail

2.5Fail

1.6Fail

1.2Fail

Black BG

18.3AAA

14.7AAA

8.5AAA

13.0AAA

16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDDFB

7F81F9

4B4DEB

C8C9D0

E6E6E6

Deuteranopia

D9D6FB

7465F8

4134E7

C8C7D0

E6E6E6

Tritanopia

C9FAFA

35F6F5

09DCD9

C5CFCF

E6E6E6

Achromatopsia

EAEAEA

B5B5B5

838383

CBCBCB

E6E6E6

Shades & Tints Shades & Tints

#C7F8FC

Dark

Light

#2BEEFC

Dark

Light

#00AEFF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7f8fc;
  --color-2: #2beefc;
  --color-3: #00aeff;
  --color-4: #c5cdd1;
  --color-5: #e6e6e6;
}

SCSS

$color-1: #c7f8fc;
$color-2: #2beefc;
$color-3: #00aeff;
$color-4: #c5cdd1;
$color-5: #e6e6e6;

TAILWIND

colors: {
  'brand-1': '#c7f8fc',
  'brand-2': '#2beefc',
  'brand-3': '#00aeff',
  'brand-4': '#c5cdd1',
  'brand-5': '#e6e6e6',
}

RGB Array

[199, 248, 252], [43, 238, 252], [0, 174, 255], [197, 205, 209], [230, 230, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7F8FC, #2BEEFC, #00AEFF, #C5CDD1, #E6E6E6 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: #c7f8fc; --color-2: #2beefc; --color-3: #00aeff; --color-4: #c5cdd1; --color-5: #e6e6e6. 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