#F3FFC8 + #A0AC81 + #D6D0BB + #F3F2E2 + #FFFEED - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F3FFC8

Willow Green · Beige · Mint Green

HEX

#F3FFC8

RGB

rgb(243, 255, 200)

HSL

hsl(73, 100%, 89%)

HSB

hsb(73, 22%, 100%)

CMYK

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

Oklch

oklch(97.8% 0.072 117.7)

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

#A0AC81

Grass Green · DarkSeaGreen · Olive Green

HEX

#A0AC81

RGB

rgb(160, 172, 129)

HSL

hsl(77, 21%, 59%)

HSB

hsb(77, 25%, 67%)

CMYK

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

Oklch

oklch(72.4% 0.061 120.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#D6D0BB

Goose Yellow · LightGray · Lemon Cream

HEX

#D6D0BB

RGB

rgb(214, 208, 187)

HSL

hsl(47, 25%, 79%)

HSB

hsb(47, 13%, 84%)

CMYK

cmyk(0%, 3%, 13%, 16%)

Oklch

oklch(85.7% 0.029 93.8)

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

#F3F2E2

Fresh Green · Beige · Lemon Cream

HEX

#F3F2E2

RGB

rgb(243, 242, 226)

HSL

hsl(56, 41%, 92%)

HSB

hsb(56, 7%, 95%)

CMYK

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

Oklch

oklch(95.8% 0.021 103.9)

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

#FFFEED

Fresh Green · SeaShell · Lemon Cream

HEX

#FFFEED

RGB

rgb(255, 254, 237)

HSL

hsl(57, 100%, 96%)

HSB

hsb(57, 7%, 100%)

CMYK

cmyk(0%, 0%, 7%, 0%)

Oklch

oklch(99.3% 0.022 104.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3FFC8

D3C7FF

Analogous

FFEFC7

F3FFC8

D7FFC7

Triadic

F3FFC8

C7F3FF

FFC7F3

Split-Comp.

F3FFC8

C7D7FF

EFC7FF

Tetradic

F3FFC8

C7FFEF

D3C7FF

FFC7D7

Contrast Matrix WCAG 2.1 Contrast

F3FFC8	A0AC81	D6D0BB	F3F2E2	FFFEED
—	2.3 Fail	1.5 Fail	1.1 Fail	1.0 Fail
2.3 Fail	—	1.6 Fail	2.1 Fail	2.4 Fail
1.5 Fail	1.6 Fail	—	1.4 Fail	1.5 Fail
1.1 Fail	2.1 Fail	1.4 Fail	—	1.1 Fail
1.0 Fail	2.4 Fail	1.5 Fail	1.1 Fail	—

White BG

1.1Fail

2.4Fail

1.5Fail

1.1Fail

1.0Fail

Black BG

19.9AAA

8.7AAA

13.6AAA

18.6AAA

20.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8D5

A5A58B

D3D3C0

F3F3E6

FFFFF1

Deuteranopia

F8F7D9

A5A48E

D4D4C1

F3F3E7

FFFFF2

Tritanopia

F4E0E2

A19495

D6C4C5

F3E9EA

FFF4F5

Achromatopsia

F5F5F5

A4A4A4

CFCFCF

F0F0F0

FCFCFC

Shades & Tints Shades & Tints

#F3FFC8

Dark

Light

#A0AC81

Dark

Light

#D6D0BB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3ffc8;
  --color-2: #a0ac81;
  --color-3: #d6d0bb;
  --color-4: #f3f2e2;
  --color-5: #fffeed;
}

SCSS

$color-1: #f3ffc8;
$color-2: #a0ac81;
$color-3: #d6d0bb;
$color-4: #f3f2e2;
$color-5: #fffeed;

TAILWIND

colors: {
  'brand-1': '#f3ffc8',
  'brand-2': '#a0ac81',
  'brand-3': '#d6d0bb',
  'brand-4': '#f3f2e2',
  'brand-5': '#fffeed',
}

RGB Array

[243, 255, 200], [160, 172, 129], [214, 208, 187], [243, 242, 226], [255, 254, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3FFC8, #A0AC81, #D6D0BB, #F3F2E2, #FFFEED 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: #f3ffc8; --color-2: #a0ac81; --color-3: #d6d0bb; --color-4: #f3f2e2; --color-5: #fffeed. 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