#F8FFC2 + #C1DBC5 + #B3BEE3 + #B89DC2 + #A66883 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8FFC2

Fresh Green · Bisque · Lemon Cream

HEX

#F8FFC2

RGB

rgb(248, 255, 194)

HSL

hsl(67, 100%, 88%)

HSB

hsb(67, 24%, 100%)

CMYK

cmyk(3%, 0%, 24%, 0%)

Oklch

oklch(98.0% 0.078 113.2)

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

#C1DBC5

Celadon · LightGray · Mint Green

HEX

#C1DBC5

RGB

rgb(193, 219, 197)

HSL

hsl(129, 27%, 81%)

HSB

hsb(129, 12%, 86%)

CMYK

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

Oklch

oklch(86.6% 0.041 149.7)

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

#B3BEE3

Azure · LightSteelBlue · Cobalt Blue

HEX

#B3BEE3

RGB

rgb(179, 190, 227)

HSL

hsl(226, 46%, 80%)

HSB

hsb(226, 21%, 89%)

CMYK

cmyk(21%, 16%, 0%, 11%)

Oklch

oklch(80.5% 0.054 272.1)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#B89DC2

Lilac · DarkGray · Lilac Purple

HEX

#B89DC2

RGB

rgb(184, 157, 194)

HSL

hsl(284, 23%, 69%)

HSB

hsb(284, 19%, 76%)

CMYK

cmyk(5%, 19%, 0%, 24%)

Oklch

oklch(73.2% 0.060 316.9)

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

#A66883

Dark Violet · Gray · Rose Pink

HEX

#A66883

RGB

rgb(166, 104, 131)

HSL

hsl(334, 26%, 53%)

HSB

hsb(334, 37%, 65%)

CMYK

cmyk(0%, 37%, 21%, 35%)

Oklch

oklch(59.3% 0.087 352.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8FFC2

C9C2FF

Analogous

FFE8C2

F8FFC2

D9FFC2

Triadic

F8FFC2

C2F8FF

FFC2F8

Split-Comp.

F8FFC2

C2D9FF

E8C2FF

Tetradic

F8FFC2

C2FFE8

C9C2FF

FFC2D9

Contrast Matrix WCAG 2.1 Contrast

F8FFC2	C1DBC5	B3BEE3	B89DC2	A66883
—	1.4 Fail	1.8 Fail	2.3 Fail	4.1 AA Large
1.4 Fail	—	1.2 Fail	1.6 Fail	2.9 Fail
1.8 Fail	1.2 Fail	—	1.3 Fail	2.3 Fail
2.3 Fail	1.6 Fail	1.3 Fail	—	1.8 Fail
4.1 AA Large	2.9 Fail	2.3 Fail	1.8 Fail	—

White BG

1.0Fail

1.5Fail

1.8Fail

2.4Fail

4.3AA Large

Black BG

20.1AAA

14.2AAA

11.4AAA

8.6AAA

4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBD1

CCCCCA

B8B8DA

ACACB9

8B8B7C

Deuteranopia

FBFAD4

CBC9CC

B7B6D8

AEB0B7

8F937B

Tritanopia

F8DCDF

C2CFCF

B4D3D1

B7B2B0

A37776

Achromatopsia

F6F6F6

D1D1D1

BFBFBF

A9A9A9

7E7E7E

Shades & Tints Shades & Tints

#F8FFC2

Dark

Light

#C1DBC5

Dark

Light

#B3BEE3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8ffc2;
  --color-2: #c1dbc5;
  --color-3: #b3bee3;
  --color-4: #b89dc2;
  --color-5: #a66883;
}

SCSS

$color-1: #f8ffc2;
$color-2: #c1dbc5;
$color-3: #b3bee3;
$color-4: #b89dc2;
$color-5: #a66883;

TAILWIND

colors: {
  'brand-1': '#f8ffc2',
  'brand-2': '#c1dbc5',
  'brand-3': '#b3bee3',
  'brand-4': '#b89dc2',
  'brand-5': '#a66883',
}

RGB Array

[248, 255, 194], [193, 219, 197], [179, 190, 227], [184, 157, 194], [166, 104, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8FFC2, #C1DBC5, #B3BEE3, #B89DC2, #A66883 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: #f8ffc2; --color-2: #c1dbc5; --color-3: #b3bee3; --color-4: #b89dc2; --color-5: #a66883. 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