#F1FFBC + #E2FCC2 + #DDF0CD + #B9E0C9 + #7D7394 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1FFBC

Willow Green · Bisque · Mint Green

HEX

#F1FFBC

RGB

rgb(241, 255, 188)

HSL

hsl(73, 100%, 87%)

HSB

hsb(73, 26%, 100%)

CMYK

cmyk(5%, 0%, 26%, 0%)

Oklch

oklch(97.4% 0.087 117.6)

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

#E2FCC2

Willow Green · Beige · Mint Green

HEX

#E2FCC2

RGB

rgb(226, 252, 194)

HSL

hsl(87, 91%, 87%)

HSB

hsb(87, 23%, 99%)

CMYK

cmyk(10%, 0%, 23%, 1%)

Oklch

oklch(95.8% 0.080 127.5)

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

#DDF0CD

Emerald · Beige · Mint Green

HEX

#DDF0CD

RGB

rgb(221, 240, 205)

HSL

hsl(93, 54%, 87%)

HSB

hsb(93, 15%, 94%)

CMYK

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

Oklch

oklch(93.2% 0.051 130.7)

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

#B9E0C9

Celadon · LightGray · Apple Green

HEX

#B9E0C9

RGB

rgb(185, 224, 201)

HSL

hsl(145, 39%, 80%)

HSB

hsb(145, 17%, 88%)

CMYK

cmyk(17%, 0%, 10%, 12%)

Oklch

oklch(87.2% 0.052 159.3)

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

#7D7394

Deep Indigo · SlateGray · Navy Blue

HEX

#7D7394

RGB

rgb(125, 115, 148)

HSL

hsl(258, 13%, 52%)

HSB

hsb(258, 22%, 58%)

CMYK

cmyk(16%, 22%, 0%, 42%)

Oklch

oklch(57.7% 0.051 298.7)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1FFBC

CBBDFF

Analogous

FFECBD

F1FFBC

CFFFBD

Triadic

F1FFBC

BDF1FF

FFBDF1

Split-Comp.

F1FFBC

BDCFFF

ECBDFF

Tetradic

F1FFBC

BDFFEC

CBBDFF

FFBDCF

Contrast Matrix WCAG 2.1 Contrast

F1FFBC	E2FCC2	DDF0CD	B9E0C9	7D7394
—	1.0 Fail	1.1 Fail	1.4 Fail	4.2 AA Large
1.0 Fail	—	1.1 Fail	1.3 Fail	4.0 AA Large
1.1 Fail	1.1 Fail	—	1.2 Fail	3.7 AA Large
1.4 Fail	1.3 Fail	1.2 Fail	—	3.1 AA Large
4.2 AA Large	4.0 AA Large	3.7 AA Large	3.1 AA Large	—

White BG

1.1Fail

1.2Fail

1.4Fail

4.4AA Large

Black BG

19.8AAA

18.9AAA

17.4AAA

14.6AAA

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7CC

EDEDD0

E5E5D5

CACACF

79798C

Deuteranopia

F6F5D0

ECEAD3

E4E3D8

C8C5D0

797A8A

Tritanopia

F2D9DC

E3DBDE

DEDCDE

BBD3D4

7D8684

Achromatopsia

F3F3F3

EEEEEE

E6E6E6

D2D2D2

7A7A7A

Shades & Tints Shades & Tints

#F1FFBC

Dark

Light

#E2FCC2

Dark

Light

#DDF0CD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1ffbc;
  --color-2: #e2fcc2;
  --color-3: #ddf0cd;
  --color-4: #b9e0c9;
  --color-5: #7d7394;
}

SCSS

$color-1: #f1ffbc;
$color-2: #e2fcc2;
$color-3: #ddf0cd;
$color-4: #b9e0c9;
$color-5: #7d7394;

TAILWIND

colors: {
  'brand-1': '#f1ffbc',
  'brand-2': '#e2fcc2',
  'brand-3': '#ddf0cd',
  'brand-4': '#b9e0c9',
  'brand-5': '#7d7394',
}

RGB Array

[241, 255, 188], [226, 252, 194], [221, 240, 205], [185, 224, 201], [125, 115, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1FFBC, #E2FCC2, #DDF0CD, #B9E0C9, #7D7394 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: #f1ffbc; --color-2: #e2fcc2; --color-3: #ddf0cd; --color-4: #b9e0c9; --color-5: #7d7394. 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