#F8FEF4 + #EFDC9A + #ABE3D6 + #8DD7CA + #B8D59D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8FEF4

Emerald · Snow · Mint Green

HEX

#F8FEF4

RGB

rgb(248, 254, 244)

HSL

hsl(96, 83%, 98%)

HSB

hsb(96, 4%, 100%)

CMYK

cmyk(2%, 0%, 4%, 0%)

Oklch

oklch(99.0% 0.015 132.5)

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

#EFDC9A

Goose Yellow · Khaki · Lemon Cream

HEX

#EFDC9A

RGB

rgb(239, 220, 154)

HSL

hsl(47, 73%, 77%)

HSB

hsb(47, 36%, 94%)

CMYK

cmyk(0%, 8%, 36%, 6%)

Oklch

oklch(89.5% 0.087 94.0)

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

#ABE3D6

Jade · LightBlue · Glacier Blue

HEX

#ABE3D6

RGB

rgb(171, 227, 214)

HSL

hsl(166, 50%, 78%)

HSB

hsb(166, 25%, 89%)

CMYK

cmyk(25%, 0%, 6%, 11%)

Oklch

oklch(87.4% 0.060 178.9)

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

#8DD7CA

Jade · SkyBlue · Lake Green

HEX

#8DD7CA

RGB

rgb(141, 215, 202)

HSL

hsl(169, 48%, 70%)

HSB

hsb(169, 34%, 84%)

CMYK

cmyk(34%, 0%, 6%, 16%)

Oklch

oklch(82.7% 0.076 182.1)

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

#B8D59D

Celadon · Silver · Apple Green

HEX

#B8D59D

RGB

rgb(184, 213, 157)

HSL

hsl(91, 40%, 73%)

HSB

hsb(91, 26%, 84%)

CMYK

cmyk(14%, 0%, 26%, 16%)

Oklch

oklch(83.7% 0.082 130.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8FEF4

FBF6FE

Analogous

FDFEF6

F8FEF4

F6FEF7

Triadic

F8FEF4

F6F9FE

FEF6F9

Split-Comp.

F8FEF4

F7F6FE

FEF6FD

Tetradic

F8FEF4

F6FDFE

FBF6FE

FEF7F6

Contrast Matrix WCAG 2.1 Contrast

F8FEF4	EFDC9A	ABE3D6	8DD7CA	B8D59D
—	1.3 Fail	1.4 Fail	1.6 Fail	1.6 Fail
1.3 Fail	—	1.0 Fail	1.2 Fail	1.2 Fail
1.4 Fail	1.0 Fail	—	1.2 Fail	1.1 Fail
1.6 Fail	1.2 Fail	1.2 Fail	—	1.0 Fail
1.6 Fail	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

1.0Fail

1.4Fail

1.7Fail

1.6Fail

Black BG

20.5AAA

15.4AAA

14.7AAA

12.7AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBF6

E7E7AA

C3C4D9

ADAECD

C5C5AB

Deuteranopia

FAFAF7

E8E9AE

C0BCDA

A9A3CE

C3C1AE

Tritanopia

F8F8F9

EEB7B9

AEDCDC

91D0D0

B9B5B8

Achromatopsia

FBFBFB

DADADA

D1D1D1

BFBFBF

C6C6C6

Shades & Tints Shades & Tints

#F8FEF4

Dark

Light

#EFDC9A

Dark

Light

#ABE3D6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8fef4;
  --color-2: #efdc9a;
  --color-3: #abe3d6;
  --color-4: #8dd7ca;
  --color-5: #b8d59d;
}

SCSS

$color-1: #f8fef4;
$color-2: #efdc9a;
$color-3: #abe3d6;
$color-4: #8dd7ca;
$color-5: #b8d59d;

TAILWIND

colors: {
  'brand-1': '#f8fef4',
  'brand-2': '#efdc9a',
  'brand-3': '#abe3d6',
  'brand-4': '#8dd7ca',
  'brand-5': '#b8d59d',
}

RGB Array

[248, 254, 244], [239, 220, 154], [171, 227, 214], [141, 215, 202], [184, 213, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8FEF4, #EFDC9A, #ABE3D6, #8DD7CA, #B8D59D 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: #f8fef4; --color-2: #efdc9a; --color-3: #abe3d6; --color-4: #8dd7ca; --color-5: #b8d59d. 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