#B1E9EF + #C1E8E2 + #D1E8D3 + #E1E7C7 + #F1E6B9 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B1E9EF

Sky Blue · LightBlue · Glacier Blue

HEX

#B1E9EF

RGB

rgb(177, 233, 239)

HSL

hsl(186, 66%, 82%)

HSB

hsb(186, 26%, 94%)

CMYK

cmyk(26%, 3%, 0%, 6%)

Oklch

oklch(89.8% 0.057 204.4)

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

#C1E8E2

Jade · LightBlue · Glacier Blue

HEX

#C1E8E2

RGB

rgb(193, 232, 226)

HSL

hsl(171, 46%, 83%)

HSB

hsb(171, 17%, 91%)

CMYK

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

Oklch

oklch(90.2% 0.041 185.1)

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

#D1E8D3

Celadon · LightGray · Mint Green

HEX

#D1E8D3

RGB

rgb(209, 232, 211)

HSL

hsl(125, 33%, 86%)

HSB

hsb(125, 10%, 91%)

CMYK

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

Oklch

oklch(90.8% 0.037 147.7)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#E1E7C7

Willow Green · LightGray · Mint Green

HEX

#E1E7C7

RGB

rgb(225, 231, 199)

HSL

hsl(71, 40%, 84%)

HSB

hsb(71, 14%, 91%)

CMYK

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

Oklch

oklch(91.5% 0.043 115.9)

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

#F1E6B9

Goose Yellow · Wheat · Lemon Cream

HEX

#F1E6B9

RGB

rgb(241, 230, 185)

HSL

hsl(48, 67%, 84%)

HSB

hsb(48, 23%, 95%)

CMYK

cmyk(0%, 5%, 23%, 5%)

Oklch

oklch(92.3% 0.060 95.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1E9EF

EFB9B3

Analogous

B3EFD7

B1E9EF

B3CBEF

Triadic

B1E9EF

EFB3E9

E9EFB3

Split-Comp.

B1E9EF

EFB3CB

EFD7B3

Tetradic

B1E9EF

D7B3EF

EFB9B3

CBEFB3

Contrast Matrix WCAG 2.1 Contrast

B1E9EF	C1E8E2	D1E8D3	E1E7C7	F1E6B9
—	1.0 Fail	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

1.3Fail

Black BG

15.8AAA

15.9AAA

16.2AAA

16.5AAA

16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9CAEE

D2D2E3

DBDBD8

E4E4CF

ECECC4

Deuteranopia

C6C2ED

D0CDE4

DAD8D9

E3E3D1

EDEEC7

Tritanopia

B4ECEC

C3E5E5

D2DCDD

E1D5D6

F0CCCE

Achromatopsia

D9D9D9

DCDCDC

DFDFDF

E2E2E2

E4E4E4

Shades & Tints Shades & Tints

#B1E9EF

Dark

Light

#C1E8E2

Dark

Light

#D1E8D3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1e9ef;
  --color-2: #c1e8e2;
  --color-3: #d1e8d3;
  --color-4: #e1e7c7;
  --color-5: #f1e6b9;
}

SCSS

$color-1: #b1e9ef;
$color-2: #c1e8e2;
$color-3: #d1e8d3;
$color-4: #e1e7c7;
$color-5: #f1e6b9;

TAILWIND

colors: {
  'brand-1': '#b1e9ef',
  'brand-2': '#c1e8e2',
  'brand-3': '#d1e8d3',
  'brand-4': '#e1e7c7',
  'brand-5': '#f1e6b9',
}

RGB Array

[177, 233, 239], [193, 232, 226], [209, 232, 211], [225, 231, 199], [241, 230, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #B1E9EF, #C1E8E2, #D1E8D3, #E1E7C7, #F1E6B9 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: #b1e9ef; --color-2: #c1e8e2; --color-3: #d1e8d3; --color-4: #e1e7c7; --color-5: #f1e6b9. 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 earth-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