#FFF7BF + #D4E3BC + #B8D6BB + #8ABDB0 + #56999C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFF7BF

Fresh Green · Bisque · Lemon Cream

HEX

#FFF7BF

RGB

rgb(255, 247, 191)

HSL

hsl(53, 100%, 87%)

HSB

hsb(53, 25%, 100%)

CMYK

cmyk(0%, 3%, 25%, 0%)

Oklch

oklch(96.9% 0.072 100.8)

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

#D4E3BC

Willow Green · LightGray · Mint Green

HEX

#D4E3BC

RGB

rgb(212, 227, 188)

HSL

hsl(83, 41%, 81%)

HSB

hsb(83, 17%, 89%)

CMYK

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

Oklch

oklch(89.4% 0.054 124.6)

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

#B8D6BB

Celadon · Silver · Apple Green

HEX

#B8D6BB

RGB

rgb(184, 214, 187)

HSL

hsl(126, 27%, 78%)

HSB

hsb(126, 14%, 84%)

CMYK

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

Oklch

oklch(84.7% 0.049 147.9)

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

#8ABDB0

Jade · DarkSeaGreen · Lake Green

HEX

#8ABDB0

RGB

rgb(138, 189, 176)

HSL

hsl(165, 28%, 64%)

HSB

hsb(165, 27%, 74%)

CMYK

cmyk(27%, 0%, 7%, 26%)

Oklch

oklch(75.9% 0.057 177.2)

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

#56999C

Slate Blue · CadetBlue · Mint Ice

HEX

#56999C

RGB

rgb(86, 153, 156)

HSL

hsl(183, 29%, 47%)

HSB

hsb(183, 45%, 61%)

CMYK

cmyk(45%, 2%, 0%, 39%)

Oklch

oklch(64.0% 0.068 199.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF7BF

BDC4FF

Analogous

FFD6BD

FFF7BF

E6FFBD

Triadic

FFF7BF

BDFFF7

F7BDFF

Split-Comp.

FFF7BF

BDE6FF

D6BDFF

Tetradic

FFF7BF

BDFFD6

BDC4FF

FFBDE6

Contrast Matrix WCAG 2.1 Contrast

FFF7BF	D4E3BC	B8D6BB	8ABDB0	56999C
—	1.2 Fail	1.4 Fail	1.9 Fail	3.0 AA Large
1.2 Fail	—	1.2 Fail	1.6 Fail	2.4 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	2.1 Fail
1.9 Fail	1.6 Fail	1.3 Fail	—	1.6 Fail
3.0 AA Large	2.4 Fail	2.1 Fail	1.6 Fail	—

White BG

1.1Fail

1.4Fail

1.6Fail

2.1Fail

3.3AA Large

Black BG

19.3AAA

15.5AAA

13.4AAA

10.0AAA

6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFBCD

DADBC5

C5C5C2

A0A1B3

73749B

Deuteranopia

FCFDD0

DAD8C8

C3C1C3

9D99B4

6F6A9B

Tritanopia

FFD7DA

D5CDCF

B9C7C8

8DB6B6

599B9B

Achromatopsia

F3F3F3

DADADA

CACACA

ACACAC

858585

Shades & Tints Shades & Tints

#FFF7BF

Dark

Light

#D4E3BC

Dark

Light

#B8D6BB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff7bf;
  --color-2: #d4e3bc;
  --color-3: #b8d6bb;
  --color-4: #8abdb0;
  --color-5: #56999c;
}

SCSS

$color-1: #fff7bf;
$color-2: #d4e3bc;
$color-3: #b8d6bb;
$color-4: #8abdb0;
$color-5: #56999c;

TAILWIND

colors: {
  'brand-1': '#fff7bf',
  'brand-2': '#d4e3bc',
  'brand-3': '#b8d6bb',
  'brand-4': '#8abdb0',
  'brand-5': '#56999c',
}

RGB Array

[255, 247, 191], [212, 227, 188], [184, 214, 187], [138, 189, 176], [86, 153, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF7BF, #D4E3BC, #B8D6BB, #8ABDB0, #56999C 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: #fff7bf; --color-2: #d4e3bc; --color-3: #b8d6bb; --color-4: #8abdb0; --color-5: #56999c. 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