#C4F1F1 + #B1DFDF + #92C7C7 + #DBECA2 + #DEF886 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C4F1F1

Sky Blue · LightBlue · Glacier Blue

HEX

#C4F1F1

RGB

rgb(196, 241, 241)

HSL

hsl(180, 62%, 86%)

HSB

hsb(180, 19%, 95%)

CMYK

cmyk(19%, 0%, 0%, 5%)

Oklch

oklch(92.7% 0.046 196.4)

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

#B1DFDF

Sky Blue · LightBlue · Glacier Blue

HEX

#B1DFDF

RGB

rgb(177, 223, 223)

HSL

hsl(180, 42%, 78%)

HSB

hsb(180, 21%, 87%)

CMYK

cmyk(21%, 0%, 0%, 13%)

Oklch

oklch(87.1% 0.048 196.3)

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

#92C7C7

Sky Blue · LightSteelBlue · Lake Green

HEX

#92C7C7

RGB

rgb(146, 199, 199)

HSL

hsl(180, 32%, 68%)

HSB

hsb(180, 27%, 78%)

CMYK

cmyk(27%, 0%, 0%, 22%)

Oklch

oklch(79.3% 0.055 196.1)

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

#DBECA2

Willow Green · Khaki · Apple Green

HEX

#DBECA2

RGB

rgb(219, 236, 162)

HSL

hsl(74, 66%, 78%)

HSB

hsb(74, 31%, 93%)

CMYK

cmyk(7%, 0%, 31%, 7%)

Oklch

oklch(91.3% 0.097 118.9)

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

#DEF886

Willow Green · Khaki · Apple Green

HEX

#DEF886

RGB

rgb(222, 248, 134)

HSL

hsl(74, 89%, 75%)

HSB

hsb(74, 46%, 97%)

CMYK

cmyk(10%, 0%, 46%, 3%)

Oklch

oklch(93.6% 0.143 119.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4F1F1

F1C5C5

Analogous

C5F1DB

C4F1F1

C5DBF1

Triadic

C4F1F1

F1C5F1

F1F1C5

Split-Comp.

C4F1F1

F1C5DB

F1DBC5

Tetradic

C4F1F1

DBC5F1

F1C5C5

DBF1C5

Contrast Matrix WCAG 2.1 Contrast

C4F1F1	B1DFDF	92C7C7	DBECA2	DEF886
—	1.2 Fail	1.5 Fail	1.0 Fail	1.0 Fail
1.2 Fail	—	1.3 Fail	1.1 Fail	1.2 Fail
1.5 Fail	1.3 Fail	—	1.5 Fail	1.6 Fail
1.0 Fail	1.1 Fail	1.5 Fail	—	1.1 Fail
1.0 Fail	1.2 Fail	1.6 Fail	1.1 Fail	—

White BG

1.2Fail

1.4Fail

1.9Fail

1.3Fail

1.2Fail

Black BG

17.2AAA

14.5AAA

11.2AAA

16.5AAA

17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D8F1

C5C5DF

A9A9C7

E2E3B4

E9E9A2

Deuteranopia

D5D2F1

C2BFDF

A6A2C7

E1E0B8

E8E6A8

Tritanopia

C6F1F1

B3DFDF

95C7C7

DCC2C5

DFB7BC

Achromatopsia

E4E4E4

D1D1D1

B7B7B7

DEDEDE

E3E3E3

Shades & Tints Shades & Tints

#C4F1F1

Dark

Light

#B1DFDF

Dark

Light

#92C7C7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4f1f1;
  --color-2: #b1dfdf;
  --color-3: #92c7c7;
  --color-4: #dbeca2;
  --color-5: #def886;
}

SCSS

$color-1: #c4f1f1;
$color-2: #b1dfdf;
$color-3: #92c7c7;
$color-4: #dbeca2;
$color-5: #def886;

TAILWIND

colors: {
  'brand-1': '#c4f1f1',
  'brand-2': '#b1dfdf',
  'brand-3': '#92c7c7',
  'brand-4': '#dbeca2',
  'brand-5': '#def886',
}

RGB Array

[196, 241, 241], [177, 223, 223], [146, 199, 199], [219, 236, 162], [222, 248, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4F1F1, #B1DFDF, #92C7C7, #DBECA2, #DEF886 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: #c4f1f1; --color-2: #b1dfdf; --color-3: #92c7c7; --color-4: #dbeca2; --color-5: #def886. 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