#668CED + #97DEDD + #CEEBED + #F9F8EB + #88979C · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#668CED

Azure · CornflowerBlue · Cobalt Blue

HEX

#668CED

RGB

rgb(102, 140, 237)

HSL

hsl(223, 79%, 66%)

HSB

hsb(223, 57%, 93%)

CMYK

cmyk(57%, 41%, 0%, 7%)

Oklch

oklch(65.7% 0.151 266.2)

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

#97DEDD

Jade · LightBlue · Lake Green

HEX

#97DEDD

RGB

rgb(151, 222, 221)

HSL

hsl(179, 52%, 73%)

HSB

hsb(179, 32%, 87%)

CMYK

cmyk(32%, 0%, 0%, 13%)

Oklch

oklch(85.4% 0.071 194.8)

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

#CEEBED

Sky Blue · Lavender · Glacier Blue

HEX

#CEEBED

RGB

rgb(206, 235, 237)

HSL

hsl(184, 46%, 87%)

HSB

hsb(184, 13%, 93%)

CMYK

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

Oklch

oklch(92.0% 0.031 201.7)

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

#F9F8EB

Fresh Green · SeaShell · Lemon Cream

HEX

#F9F8EB

RGB

rgb(249, 248, 235)

HSL

hsl(56, 54%, 95%)

HSB

hsb(56, 6%, 98%)

CMYK

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

Oklch

oklch(97.6% 0.017 103.1)

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

#88979C

Slate Blue · LightSlateGray · Silver Sand

HEX

#88979C

RGB

rgb(136, 151, 156)

HSL

hsl(195, 9%, 57%)

HSB

hsb(195, 13%, 61%)

CMYK

cmyk(13%, 3%, 0%, 39%)

Oklch

oklch(66.6% 0.019 219.8)

Traditional「Slate Blue」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

668CED

EDC664

Analogous

64CFED

668CED

8164ED

Triadic

668CED

ED648B

8BED64

Split-Comp.

668CED

ED8164

CFED64

Tetradic

668CED

ED64CF

EDC664

64ED81

Contrast Matrix WCAG 2.1 Contrast

668CED	97DEDD	CEEBED	F9F8EB	88979C
—	2.1 Fail	2.6 Fail	3.0 AA Large	1.1 Fail
2.1 Fail	—	1.2 Fail	1.4 Fail	2.0 Fail
2.6 Fail	1.2 Fail	—	1.2 Fail	2.4 Fail
3.0 AA Large	1.4 Fail	1.2 Fail	—	2.8 Fail
1.1 Fail	2.0 Fail	2.4 Fail	2.8 Fail	—

White BG

3.2AA Large

1.5Fail

1.3Fail

1.1Fail

3.0AA Large

Black BG

6.5AA

13.8AAA

16.7AAA

19.7AAA

7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7677D6

B6B6DD

DBDBED

F9F9EE

8E8F9B

Deuteranopia

7471D0

B2ACDD

D9D7EC

F9F9EF

8E8D9B

Tritanopia

68C3BF

9BDDDD

CFECEC

F9F1F1

899A9A

Achromatopsia

8C8C8C

C9C9C9

E3E3E3

F7F7F7

939393

Shades & Tints Shades & Tints

#668CED

Dark

Light

#97DEDD

Dark

Light

#CEEBED

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #668ced;
  --color-2: #97dedd;
  --color-3: #ceebed;
  --color-4: #f9f8eb;
  --color-5: #88979c;
}

SCSS

$color-1: #668ced;
$color-2: #97dedd;
$color-3: #ceebed;
$color-4: #f9f8eb;
$color-5: #88979c;

TAILWIND

colors: {
  'brand-1': '#668ced',
  'brand-2': '#97dedd',
  'brand-3': '#ceebed',
  'brand-4': '#f9f8eb',
  'brand-5': '#88979c',
}

RGB Array

[102, 140, 237], [151, 222, 221], [206, 235, 237], [249, 248, 235], [136, 151, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #668CED, #97DEDD, #CEEBED, #F9F8EB, #88979C 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: #668ced; --color-2: #97dedd; --color-3: #ceebed; --color-4: #f9f8eb; --color-5: #88979c. 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 space-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