#B782B5 + #F7B2C6 + #FFE4C4 + #ECEED8 + #F5F4F3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B782B5

Mauve · DarkGray · Lilac Purple

HEX

#B782B5

RGB

rgb(183, 130, 181)

HSL

hsl(302, 27%, 61%)

HSB

hsb(302, 29%, 72%)

CMYK

cmyk(0%, 29%, 1%, 28%)

Oklch

oklch(67.6% 0.095 327.8)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#F7B2C6

Rouge · LightPink · Cherry Blossom

HEX

#F7B2C6

RGB

rgb(247, 178, 198)

HSL

hsl(343, 81%, 83%)

HSB

hsb(343, 28%, 97%)

CMYK

cmyk(0%, 28%, 20%, 3%)

Oklch

oklch(83.4% 0.084 0.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#FFE4C4

Goose Yellow · Bisque · Peach Orange

HEX

#FFE4C4

RGB

rgb(255, 228, 196)

HSL

hsl(33, 100%, 88%)

HSB

hsb(33, 23%, 100%)

CMYK

cmyk(0%, 11%, 23%, 0%)

Oklch

oklch(93.3% 0.051 71.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#ECEED8

Fresh Green · Beige · Lemon Cream

HEX

#ECEED8

RGB

rgb(236, 238, 216)

HSL

hsl(65, 39%, 89%)

HSB

hsb(65, 9%, 93%)

CMYK

cmyk(1%, 0%, 9%, 7%)

Oklch

oklch(94.2% 0.029 111.2)

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

#F5F4F3

Goose Yellow · SeaShell · Cloud White

HEX

#F5F4F3

RGB

rgb(245, 244, 243)

HSL

hsl(30, 9%, 96%)

HSB

hsb(30, 1%, 96%)

CMYK

cmyk(0%, 0%, 1%, 4%)

Oklch

oklch(96.8% 0.002 67.8)

Traditional「Goose Yellow」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B782B5

81B682

Analogous

9D81B6

B782B5

B6819A

Triadic

B782B5

B5B681

81B5B6

Split-Comp.

B782B5

9AB681

81B69D

Tetradic

B782B5

B69D81

81B682

819AB6

Contrast Matrix WCAG 2.1 Contrast

B782B5	F7B2C6	FFE4C4	ECEED8	F5F4F3
—	1.8 Fail	2.5 Fail	2.6 Fail	2.8 Fail
1.8 Fail	—	1.4 Fail	1.5 Fail	1.6 Fail
2.5 Fail	1.4 Fail	—	1.0 Fail	1.1 Fail
2.6 Fail	1.5 Fail	1.0 Fail	—	1.1 Fail
2.8 Fail	1.6 Fail	1.1 Fail	1.1 Fail	—

White BG

3.1AA Large

1.7Fail

1.2Fail

1.1Fail

Black BG

6.9AA

12.1AAA

17.1AAA

17.8AAA

19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A0A9

D9D9C1

F3F3CC

EDEDDD

F5F5F3

Deuteranopia

A3A7A6

DDE2C0

F5F7CE

EDEDDF

F5F5F3

Tritanopia

B49F9D

F4BDBD

FED2D3

ECE2E2

F5F3F3

Achromatopsia

989898

C9C9C9

E8E8E8

EBEBEB

F4F4F4

Shades & Tints Shades & Tints

#B782B5

Dark

Light

#F7B2C6

Dark

Light

#FFE4C4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b782b5;
  --color-2: #f7b2c6;
  --color-3: #ffe4c4;
  --color-4: #eceed8;
  --color-5: #f5f4f3;
}

SCSS

$color-1: #b782b5;
$color-2: #f7b2c6;
$color-3: #ffe4c4;
$color-4: #eceed8;
$color-5: #f5f4f3;

TAILWIND

colors: {
  'brand-1': '#b782b5',
  'brand-2': '#f7b2c6',
  'brand-3': '#ffe4c4',
  'brand-4': '#eceed8',
  'brand-5': '#f5f4f3',
}

RGB Array

[183, 130, 181], [247, 178, 198], [255, 228, 196], [236, 238, 216], [245, 244, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B782B5, #F7B2C6, #FFE4C4, #ECEED8, #F5F4F3 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: #b782b5; --color-2: #f7b2c6; --color-3: #ffe4c4; --color-4: #eceed8; --color-5: #f5f4f3. 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