#8EBE98 + #F4B8AC + #FFF5D6 + #99B1BE + #A58BBE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8EBE98

Celadon · DarkSeaGreen · Apple Green

HEX

#8EBE98

RGB

rgb(142, 190, 152)

HSL

hsl(133, 27%, 65%)

HSB

hsb(133, 25%, 75%)

CMYK

cmyk(25%, 0%, 20%, 25%)

Oklch

oklch(75.7% 0.074 150.7)

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

#F4B8AC

Peach Pink · LightPink · Cherry Blossom

HEX

#F4B8AC

RGB

rgb(244, 184, 172)

HSL

hsl(10, 77%, 82%)

HSB

hsb(10, 30%, 96%)

CMYK

cmyk(0%, 25%, 30%, 4%)

Oklch

oklch(83.4% 0.072 31.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FFF5D6

Goose Yellow · Beige · Lemon Cream

HEX

#FFF5D6

RGB

rgb(255, 245, 214)

HSL

hsl(45, 100%, 92%)

HSB

hsb(45, 16%, 100%)

CMYK

cmyk(0%, 4%, 16%, 0%)

Oklch

oklch(97.0% 0.042 92.2)

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

#99B1BE

Sky Blue · DarkGray · Cobalt Blue

HEX

#99B1BE

RGB

rgb(153, 177, 190)

HSL

hsl(201, 22%, 67%)

HSB

hsb(201, 19%, 75%)

CMYK

cmyk(19%, 7%, 0%, 25%)

Oklch

oklch(74.6% 0.032 231.5)

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

#A58BBE

Lilac · DarkGray · Lilac Purple

HEX

#A58BBE

RGB

rgb(165, 139, 190)

HSL

hsl(271, 28%, 65%)

HSB

hsb(271, 27%, 75%)

CMYK

cmyk(13%, 27%, 0%, 25%)

Oklch

oklch(67.8% 0.079 307.6)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8EBE98

BE8EB3

Analogous

9BBE8E

8EBE98

8EBEB0

Triadic

8EBE98

988EBE

BE988E

Split-Comp.

8EBE98

B08EBE

BE8E9B

Tetradic

8EBE98

8E9BBE

BE8EB3

BEB08E

Contrast Matrix WCAG 2.1 Contrast

8EBE98	F4B8AC	FFF5D6	99B1BE	A58BBE
—	1.2 Fail	1.9 Fail	1.1 Fail	1.4 Fail
1.2 Fail	—	1.6 Fail	1.3 Fail	1.7 Fail
1.9 Fail	1.6 Fail	—	2.1 Fail	2.7 Fail
1.1 Fail	1.3 Fail	2.1 Fail	—	1.3 Fail
1.4 Fail	1.7 Fail	2.7 Fail	1.3 Fail	—

White BG

2.1Fail

1.7Fail

1.1Fail

2.2Fail

3.0Fail

Black BG

10.0AAA

12.3AAA

19.3AAA

9.4AAA

7.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A3A1

DAD9AF

FBFBDE

A3A4BB

9A9AB2

Deuteranopia

A09CA3

DEE2B0

FBFCDF

A2A0BA

9B9DAF

Tritanopia

90A8AA

F1B1B2

FFE3E5

9AB8B8

A4A8A6

Achromatopsia

ABABAB

C9C9C9

F4F4F4

ABABAB

999999

Shades & Tints Shades & Tints

#8EBE98

Dark

Light

#F4B8AC

Dark

Light

#FFF5D6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ebe98;
  --color-2: #f4b8ac;
  --color-3: #fff5d6;
  --color-4: #99b1be;
  --color-5: #a58bbe;
}

SCSS

$color-1: #8ebe98;
$color-2: #f4b8ac;
$color-3: #fff5d6;
$color-4: #99b1be;
$color-5: #a58bbe;

TAILWIND

colors: {
  'brand-1': '#8ebe98',
  'brand-2': '#f4b8ac',
  'brand-3': '#fff5d6',
  'brand-4': '#99b1be',
  'brand-5': '#a58bbe',
}

RGB Array

[142, 190, 152], [244, 184, 172], [255, 245, 214], [153, 177, 190], [165, 139, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8EBE98, #F4B8AC, #FFF5D6, #99B1BE, #A58BBE 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: #8ebe98; --color-2: #f4b8ac; --color-3: #fff5d6; --color-4: #99b1be; --color-5: #a58bbe. 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