#9BACC9 + #C1DDE1 + #F0F0F0 + #F1F7C1 + #CEE571 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9BACC9

Azure · DarkGray · Cobalt Blue

HEX

#9BACC9

RGB

rgb(155, 172, 201)

HSL

hsl(218, 30%, 70%)

HSB

hsb(218, 23%, 79%)

CMYK

cmyk(23%, 14%, 0%, 21%)

Oklch

oklch(74.1% 0.046 261.1)

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

#C1DDE1

Sky Blue · LightBlue · Glacier Blue

HEX

#C1DDE1

RGB

rgb(193, 221, 225)

HSL

hsl(187, 35%, 82%)

HSB

hsb(187, 14%, 88%)

CMYK

cmyk(14%, 2%, 0%, 12%)

Oklch

oklch(87.8% 0.030 207.1)

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

#F0F0F0

Plain White · Linen · Cloud White

HEX

#F0F0F0

RGB

rgb(240, 240, 240)

HSL

hsl(0, 0%, 94%)

HSB

hsb(0, 0%, 94%)

CMYK

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

Oklch

oklch(95.5% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

#F1F7C1

Fresh Green · Bisque · Lemon Cream

HEX

#F1F7C1

RGB

rgb(241, 247, 193)

HSL

hsl(67, 77%, 86%)

HSB

hsb(67, 22%, 97%)

CMYK

cmyk(2%, 0%, 22%, 3%)

Oklch

oklch(95.8% 0.070 112.9)

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

#CEE571

Willow Green · Khaki · Apple Green

HEX

#CEE571

RGB

rgb(206, 229, 113)

HSL

hsl(72, 69%, 67%)

HSB

hsb(72, 51%, 90%)

CMYK

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

Oklch

oklch(88.1% 0.144 118.7)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BACC9

C9B99C

Analogous

9CC3C9

9BACC9

A29CC9

Triadic

9BACC9

C99CAC

ACC99C

Split-Comp.

9BACC9

C9A29C

C3C99C

Tetradic

9BACC9

C99CC3

C9B99C

9CC9A2

Contrast Matrix WCAG 2.1 Contrast

9BACC9	C1DDE1	F0F0F0	F1F7C1	CEE571
—	1.6 Fail	2.0 Fail	2.1 Fail	1.6 Fail
1.6 Fail	—	1.3 Fail	1.3 Fail	1.0 Fail
2.0 Fail	1.3 Fail	—	1.0 Fail	1.2 Fail
2.1 Fail	1.3 Fail	1.0 Fail	—	1.2 Fail
1.6 Fail	1.0 Fail	1.2 Fail	1.2 Fail	—

White BG

2.3Fail

1.4Fail

1.1Fail

1.4Fail

Black BG

9.1AAA

14.7AAA

18.4AAA

18.8AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A3C2

CDCDE0

F0F0F0

F4F4CE

D8D88D

Deuteranopia

A1A0C0

CCC9E0

F0F0F0

F3F3D1

D7D594

Tritanopia

9CBCBB

C2DFDF

F0F0F0

F1D8DB

CFA3A8

Achromatopsia

AAAAAA

D5D5D5

F0F0F0

EFEFEF

D1D1D1

Shades & Tints Shades & Tints

#9BACC9

Dark

Light

#C1DDE1

Dark

Light

#F0F0F0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bacc9;
  --color-2: #c1dde1;
  --color-3: #f0f0f0;
  --color-4: #f1f7c1;
  --color-5: #cee571;
}

SCSS

$color-1: #9bacc9;
$color-2: #c1dde1;
$color-3: #f0f0f0;
$color-4: #f1f7c1;
$color-5: #cee571;

TAILWIND

colors: {
  'brand-1': '#9bacc9',
  'brand-2': '#c1dde1',
  'brand-3': '#f0f0f0',
  'brand-4': '#f1f7c1',
  'brand-5': '#cee571',
}

RGB Array

[155, 172, 201], [193, 221, 225], [240, 240, 240], [241, 247, 193], [206, 229, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BACC9, #C1DDE1, #F0F0F0, #F1F7C1, #CEE571 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: #9bacc9; --color-2: #c1dde1; --color-3: #f0f0f0; --color-4: #f1f7c1; --color-5: #cee571. 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