#969096 + #F391B1 + #FDC9B9 + #E1F2C4 + #D3E3C4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#969096

Ash · LightSlateGray · Silver Sand

HEX

#969096

RGB

rgb(150, 144, 150)

HSL

hsl(300, 3%, 58%)

HSB

hsb(300, 4%, 59%)

CMYK

cmyk(0%, 4%, 0%, 41%)

Oklch

oklch(66.0% 0.011 325.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#F391B1

Rouge · LightPink · Cherry Blossom

HEX

#F391B1

RGB

rgb(243, 145, 177)

HSL

hsl(340, 80%, 76%)

HSB

hsb(340, 40%, 95%)

CMYK

cmyk(0%, 40%, 27%, 5%)

Oklch

oklch(76.8% 0.123 359.4)

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

#FDC9B9

Peach Pink · Pink · Cherry Blossom

HEX

#FDC9B9

RGB

rgb(253, 201, 185)

HSL

hsl(14, 94%, 86%)

HSB

hsb(14, 27%, 99%)

CMYK

cmyk(0%, 21%, 27%, 1%)

Oklch

oklch(87.7% 0.064 37.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#E1F2C4

Willow Green · Beige · Mint Green

HEX

#E1F2C4

RGB

rgb(225, 242, 196)

HSL

hsl(82, 64%, 86%)

HSB

hsb(82, 19%, 95%)

CMYK

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

Oklch

oklch(93.7% 0.063 124.1)

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

#D3E3C4

Celadon · LightGray · Mint Green

HEX

#D3E3C4

RGB

rgb(211, 227, 196)

HSL

hsl(91, 36%, 83%)

HSB

hsb(91, 14%, 89%)

CMYK

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

Oklch

oklch(89.6% 0.045 129.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

969096

919791

Analogous

949197

969096

979194

Triadic

969096

979791

919797

Split-Comp.

969096

949791

919794

Tetradic

969096

979491

919791

919497

Contrast Matrix WCAG 2.1 Contrast

969096	F391B1	FDC9B9	E1F2C4	D3E3C4
—	1.4 Fail	2.1 Fail	2.6 Fail	2.3 Fail
1.4 Fail	—	1.5 Fail	1.9 Fail	1.6 Fail
2.1 Fail	1.5 Fail	—	1.2 Fail	1.1 Fail
2.6 Fail	1.9 Fail	1.2 Fail	—	1.1 Fail
2.3 Fail	1.6 Fail	1.1 Fail	1.1 Fail	—

White BG

3.1AA Large

2.2Fail

1.5Fail

1.2Fail

1.4Fail

Black BG

6.7AA

9.5AAA

14.2AAA

17.7AAA

15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

939395

C9C8A9

E6E6BD

E8E9CF

DADACC

Deuteranopia

949494

CED6A7

EAEDBE

E7E6D2

D9D8CD

Tritanopia

969393

EEA3A2

FAC0C1

E2D8DA

D4D1D3

Achromatopsia

929292

B2B2B2

D7D7D7

E8E8E8

DBDBDB

Shades & Tints Shades & Tints

#969096

Dark

Light

#F391B1

Dark

Light

#FDC9B9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #969096;
  --color-2: #f391b1;
  --color-3: #fdc9b9;
  --color-4: #e1f2c4;
  --color-5: #d3e3c4;
}

SCSS

$color-1: #969096;
$color-2: #f391b1;
$color-3: #fdc9b9;
$color-4: #e1f2c4;
$color-5: #d3e3c4;

TAILWIND

colors: {
  'brand-1': '#969096',
  'brand-2': '#f391b1',
  'brand-3': '#fdc9b9',
  'brand-4': '#e1f2c4',
  'brand-5': '#d3e3c4',
}

RGB Array

[150, 144, 150], [243, 145, 177], [253, 201, 185], [225, 242, 196], [211, 227, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #969096, #F391B1, #FDC9B9, #E1F2C4, #D3E3C4 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: #969096; --color-2: #f391b1; --color-3: #fdc9b9; --color-4: #e1f2c4; --color-5: #d3e3c4. 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