#F5FCD2 + #DBF74F + #A6E287 + #71CCBE + #918F87 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5FCD2

Willow Green · Beige · Mint Green

HEX

#F5FCD2

RGB

rgb(245, 252, 210)

HSL

hsl(70, 88%, 91%)

HSB

hsb(70, 17%, 99%)

CMYK

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

Oklch

oklch(97.5% 0.055 115.1)

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

#DBF74F

Willow Green · GreenYellow · Apple Green

HEX

#DBF74F

RGB

rgb(219, 247, 79)

HSL

hsl(70, 91%, 64%)

HSB

hsb(70, 68%, 97%)

CMYK

cmyk(11%, 0%, 68%, 3%)

Oklch

oklch(92.6% 0.188 118.5)

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

#A6E287

Emerald · LightGreen · Apple Green

HEX

#A6E287

RGB

rgb(166, 226, 135)

HSL

hsl(100, 61%, 71%)

HSB

hsb(100, 40%, 89%)

CMYK

cmyk(27%, 0%, 40%, 11%)

Oklch

oklch(85.1% 0.135 135.6)

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

#71CCBE

Jade · MediumAquaMarine · Lake Green

HEX

#71CCBE

RGB

rgb(113, 204, 190)

HSL

hsl(171, 47%, 62%)

HSB

hsb(171, 45%, 80%)

CMYK

cmyk(45%, 0%, 7%, 20%)

Oklch

oklch(78.5% 0.090 182.9)

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

#918F87

Ash · Gray · Warm Gray

HEX

#918F87

RGB

rgb(145, 143, 135)

HSL

hsl(48, 4%, 55%)

HSB

hsb(48, 7%, 57%)

CMYK

cmyk(0%, 1%, 7%, 43%)

Oklch

oklch(64.9% 0.012 95.2)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5FCD2

DBD4FC

Analogous

FCEFD4

F5FCD2

E1FCD4

Triadic

F5FCD2

D4F6FC

FCD4F6

Split-Comp.

F5FCD2

D4E1FC

EFD4FC

Tetradic

F5FCD2

D4FCEF

DBD4FC

FCD4E1

Contrast Matrix WCAG 2.1 Contrast

F5FCD2	DBF74F	A6E287	71CCBE	918F87
—	1.1 Fail	1.4 Fail	1.8 Fail	3.0 AA Large
1.1 Fail	—	1.3 Fail	1.6 Fail	2.7 Fail
1.4 Fail	1.3 Fail	—	1.2 Fail	2.1 Fail
1.8 Fail	1.6 Fail	1.2 Fail	—	1.7 Fail
3.0 AA Large	2.7 Fail	2.1 Fail	1.7 Fail	—

White BG

1.1Fail

1.2Fail

1.5Fail

1.9Fail

3.2AA Large

Black BG

19.7AAA

17.4AAA

13.8AAA

11.1AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8DC

E7E778

C0C19D

9899C1

909089

Deuteranopia

F8F7DF

E6E381

BDB8A2

938CC2

909089

Tritanopia

F5E4E6

DC989F

A9AEB2

76C4C5

918A8B

Achromatopsia

F5F5F5

DBDBDB

C6C6C6

AFAFAF

8F8F8F

Shades & Tints Shades & Tints

#F5FCD2

Dark

Light

#DBF74F

Dark

Light

#A6E287

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5fcd2;
  --color-2: #dbf74f;
  --color-3: #a6e287;
  --color-4: #71ccbe;
  --color-5: #918f87;
}

SCSS

$color-1: #f5fcd2;
$color-2: #dbf74f;
$color-3: #a6e287;
$color-4: #71ccbe;
$color-5: #918f87;

TAILWIND

colors: {
  'brand-1': '#f5fcd2',
  'brand-2': '#dbf74f',
  'brand-3': '#a6e287',
  'brand-4': '#71ccbe',
  'brand-5': '#918f87',
}

RGB Array

[245, 252, 210], [219, 247, 79], [166, 226, 135], [113, 204, 190], [145, 143, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5FCD2, #DBF74F, #A6E287, #71CCBE, #918F87 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: #f5fcd2; --color-2: #dbf74f; --color-3: #a6e287; --color-4: #71ccbe; --color-5: #918f87. 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