#F4F0C3 + #E4E8C3 + #BFD9CC + #BBA1C8 + #A4778C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4F0C3

Fresh Green · Bisque · Lemon Cream

HEX

#F4F0C3

RGB

rgb(244, 240, 195)

HSL

hsl(55, 69%, 86%)

HSB

hsb(55, 20%, 96%)

CMYK

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

Oklch

oklch(94.7% 0.059 103.2)

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

#E4E8C3

Fresh Green · Wheat · Lemon Cream

HEX

#E4E8C3

RGB

rgb(228, 232, 195)

HSL

hsl(66, 45%, 84%)

HSB

hsb(66, 16%, 91%)

CMYK

cmyk(2%, 0%, 16%, 9%)

Oklch

oklch(91.8% 0.049 112.4)

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

#BFD9CC

Jade · LightGray · Apple Green

HEX

#BFD9CC

RGB

rgb(191, 217, 204)

HSL

hsl(150, 25%, 80%)

HSB

hsb(150, 12%, 85%)

CMYK

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

Oklch

oklch(86.2% 0.033 164.1)

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

#BBA1C8

Lilac · Silver · Lilac Purple

HEX

#BBA1C8

RGB

rgb(187, 161, 200)

HSL

hsl(280, 26%, 71%)

HSB

hsb(280, 20%, 78%)

CMYK

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

Oklch

oklch(74.5% 0.062 314.4)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#A4778C

Dark Violet · Gray · Rose Pink

HEX

#A4778C

RGB

rgb(164, 119, 140)

HSL

hsl(332, 20%, 55%)

HSB

hsb(332, 27%, 64%)

CMYK

cmyk(0%, 27%, 15%, 36%)

Oklch

oklch(62.1% 0.063 349.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4F0C3

C3C7F4

Analogous

F4D7C3

F4F0C3

DFF4C3

Triadic

F4F0C3

C3F4F0

F0C3F4

Split-Comp.

F4F0C3

C3DFF4

D7C3F4

Tetradic

F4F0C3

C3F4D7

C3C7F4

F4C3DF

Contrast Matrix WCAG 2.1 Contrast

F4F0C3	E4E8C3	BFD9CC	BBA1C8	A4778C
—	1.1 Fail	1.3 Fail	2.0 Fail	3.2 AA Large
1.1 Fail	—	1.2 Fail	1.8 Fail	3.0 Fail
1.3 Fail	1.2 Fail	—	1.5 Fail	2.5 Fail
2.0 Fail	1.8 Fail	1.5 Fail	—	1.6 Fail
3.2 AA Large	3.0 Fail	2.5 Fail	1.6 Fail	—

White BG

1.2Fail

1.3Fail

1.5Fail

2.3Fail

3.8AA Large

Black BG

18.1AAA

16.6AAA

14.0AAA

9.0AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2CE

E6E6CC

CACACF

B0B0BF

919087

Deuteranopia

F3F3D1

E6E5CE

C9C7D0

B1B3BC

939786

Tritanopia

F4D6D8

E4D3D5

C0D2D2

BAB7B5

A28382

Achromatopsia

ECECEC

E3E3E3

D0D0D0

ADADAD

878787

Shades & Tints Shades & Tints

#F4F0C3

Dark

Light

#E4E8C3

Dark

Light

#BFD9CC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4f0c3;
  --color-2: #e4e8c3;
  --color-3: #bfd9cc;
  --color-4: #bba1c8;
  --color-5: #a4778c;
}

SCSS

$color-1: #f4f0c3;
$color-2: #e4e8c3;
$color-3: #bfd9cc;
$color-4: #bba1c8;
$color-5: #a4778c;

TAILWIND

colors: {
  'brand-1': '#f4f0c3',
  'brand-2': '#e4e8c3',
  'brand-3': '#bfd9cc',
  'brand-4': '#bba1c8',
  'brand-5': '#a4778c',
}

RGB Array

[244, 240, 195], [228, 232, 195], [191, 217, 204], [187, 161, 200], [164, 119, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4F0C3, #E4E8C3, #BFD9CC, #BBA1C8, #A4778C 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: #f4f0c3; --color-2: #e4e8c3; --color-3: #bfd9cc; --color-4: #bba1c8; --color-5: #a4778c. 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