#8EB8B9 + #ABBEBA + #E3D4BB + #FEFBE3 + #FFFFF1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8EB8B9

Sky Blue · DarkGray · Lake Green

HEX

#8EB8B9

RGB

rgb(142, 184, 185)

HSL

hsl(181, 23%, 64%)

HSB

hsb(181, 23%, 73%)

CMYK

cmyk(23%, 1%, 0%, 27%)

Oklch

oklch(75.3% 0.045 198.1)

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

#ABBEBA

Jade · Silver · Lake Green

HEX

#ABBEBA

RGB

rgb(171, 190, 186)

HSL

hsl(167, 13%, 71%)

HSB

hsb(167, 10%, 75%)

CMYK

cmyk(10%, 0%, 2%, 25%)

Oklch

oklch(78.6% 0.022 181.7)

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

#E3D4BB

Goose Yellow · Wheat · Peach Orange

HEX

#E3D4BB

RGB

rgb(227, 212, 187)

HSL

hsl(38, 42%, 81%)

HSB

hsb(38, 18%, 89%)

CMYK

cmyk(0%, 7%, 18%, 11%)

Oklch

oklch(87.6% 0.037 80.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FEFBE3

Fresh Green · LightYellow · Lemon Cream

HEX

#FEFBE3

RGB

rgb(254, 251, 227)

HSL

hsl(53, 93%, 94%)

HSB

hsb(53, 11%, 100%)

CMYK

cmyk(0%, 1%, 11%, 0%)

Oklch

oklch(98.4% 0.031 101.1)

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

#FFFFF1

Fresh Green · Snow · Lemon Cream

HEX

#FFFFF1

RGB

rgb(255, 255, 241)

HSL

hsl(60, 100%, 97%)

HSB

hsb(60, 5%, 100%)

CMYK

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

Oklch

oklch(99.6% 0.018 106.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8EB8B9

B88F8E

Analogous

8EB8A4

8EB8B9

8EA2B8

Triadic

8EB8B9

B88EB8

B8B88E

Split-Comp.

8EB8B9

B88EA2

B8A48E

Tetradic

8EB8B9

A48EB8

B88F8E

A2B88E

Contrast Matrix WCAG 2.1 Contrast

8EB8B9	ABBEBA	E3D4BB	FEFBE3	FFFFF1
—	1.1 Fail	1.5 Fail	2.1 Fail	2.1 Fail
1.1 Fail	—	1.3 Fail	1.9 Fail	1.9 Fail
1.5 Fail	1.3 Fail	—	1.4 Fail	1.4 Fail
2.1 Fail	1.9 Fail	1.4 Fail	—	1.0 Fail
2.1 Fail	1.9 Fail	1.4 Fail	1.0 Fail	—

White BG

2.2Fail

1.9Fail

1.5Fail

1.0Fail

Black BG

9.7AAA

10.8AAA

14.4AAA

20.1AAA

20.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A1B9

B3B3BB

DDDCC1

FDFDE9

FFFFF4

Deuteranopia

9E9BB9

B2B1BB

DDDEC3

FDFDEA

FFFFF5

Tritanopia

90B9B9

ACBCBC

E2C6C7

FEEDEE

FFF7F8

Achromatopsia

ACACAC

B8B8B8

D6D6D6

F9F9F9

FDFDFD

Shades & Tints Shades & Tints

#8EB8B9

Dark

Light

#ABBEBA

Dark

Light

#E3D4BB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8eb8b9;
  --color-2: #abbeba;
  --color-3: #e3d4bb;
  --color-4: #fefbe3;
  --color-5: #fffff1;
}

SCSS

$color-1: #8eb8b9;
$color-2: #abbeba;
$color-3: #e3d4bb;
$color-4: #fefbe3;
$color-5: #fffff1;

TAILWIND

colors: {
  'brand-1': '#8eb8b9',
  'brand-2': '#abbeba',
  'brand-3': '#e3d4bb',
  'brand-4': '#fefbe3',
  'brand-5': '#fffff1',
}

RGB Array

[142, 184, 185], [171, 190, 186], [227, 212, 187], [254, 251, 227], [255, 255, 241]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8EB8B9, #ABBEBA, #E3D4BB, #FEFBE3, #FFFFF1 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: #8eb8b9; --color-2: #abbeba; --color-3: #e3d4bb; --color-4: #fefbe3; --color-5: #fffff1. 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