#848484 + #BCBCBB + #F4F1E2 + #FACDC1 + #CD8ACA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#848484

Ash · Gray · Warm Gray

HEX

#848484

RGB

rgb(132, 132, 132)

HSL

hsl(0, 0%, 52%)

HSB

hsb(0, 0%, 52%)

CMYK

cmyk(0%, 0%, 0%, 48%)

Oklch

oklch(61.3% 0.000 89.9)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#BCBCBB

Silver Gray · Silver · Pearl Gray

HEX

#BCBCBB

RGB

rgb(188, 188, 187)

HSL

hsl(60, 1%, 74%)

HSB

hsb(60, 1%, 74%)

CMYK

cmyk(0%, 0%, 1%, 26%)

Oklch

oklch(79.5% 0.001 106.4)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#F4F1E2

Fresh Green · Beige · Lemon Cream

HEX

#F4F1E2

RGB

rgb(244, 241, 226)

HSL

hsl(50, 45%, 92%)

HSB

hsb(50, 7%, 96%)

CMYK

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

Oklch

oklch(95.6% 0.020 97.5)

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

#FACDC1

Peach Pink · Pink · Cherry Blossom

HEX

#FACDC1

RGB

rgb(250, 205, 193)

HSL

hsl(13, 85%, 87%)

HSB

hsb(13, 23%, 98%)

CMYK

cmyk(0%, 18%, 23%, 2%)

Oklch

oklch(88.4% 0.054 35.4)

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

#CD8ACA

Mauve · Orchid · Lilac Purple

HEX

#CD8ACA

RGB

rgb(205, 138, 202)

HSL

hsl(303, 40%, 67%)

HSB

hsb(303, 33%, 80%)

CMYK

cmyk(0%, 33%, 1%, 20%)

Oklch

oklch(72.2% 0.117 328.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

848484

858585

Analogous

858585

848484

858585

Triadic

848484

858585

Split-Comp.

848484

858585

Tetradic

848484

858585

Contrast Matrix WCAG 2.1 Contrast

848484	BCBCBB	F4F1E2	FACDC1	CD8ACA
—	2.0 Fail	3.3 AA Large	2.6 Fail	1.4 Fail
2.0 Fail	—	1.7 Fail	1.3 Fail	1.4 Fail
3.3 AA Large	1.7 Fail	—	1.3 Fail	2.3 Fail
2.6 Fail	1.3 Fail	1.3 Fail	—	1.8 Fail
1.4 Fail	1.4 Fail	2.3 Fail	1.8 Fail	—

White BG

3.7AA Large

1.9Fail

1.1Fail

1.4Fail

2.6Fail

Black BG

5.6AA

11.0AAA

18.5AAA

14.6AAA

8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

848484

BCBCBB

F3F3E6

E7E6C4

B0AFBB

Deuteranopia

848484

BCBCBB

F3F3E7

E9EDC5

B4B9B7

Tritanopia

848484

BCBBBB

F4E8E9

F8C6C7

CAAEAC

Achromatopsia

848484

BCBCBC

F0F0F0

D9D9D9

A5A5A5

Shades & Tints Shades & Tints

#848484

Dark

Light

#BCBCBB

Dark

Light

#F4F1E2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #848484;
  --color-2: #bcbcbb;
  --color-3: #f4f1e2;
  --color-4: #facdc1;
  --color-5: #cd8aca;
}

SCSS

$color-1: #848484;
$color-2: #bcbcbb;
$color-3: #f4f1e2;
$color-4: #facdc1;
$color-5: #cd8aca;

TAILWIND

colors: {
  'brand-1': '#848484',
  'brand-2': '#bcbcbb',
  'brand-3': '#f4f1e2',
  'brand-4': '#facdc1',
  'brand-5': '#cd8aca',
}

RGB Array

[132, 132, 132], [188, 188, 187], [244, 241, 226], [250, 205, 193], [205, 138, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #848484, #BCBCBB, #F4F1E2, #FACDC1, #CD8ACA 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: #848484; --color-2: #bcbcbb; --color-3: #f4f1e2; --color-4: #facdc1; --color-5: #cd8aca. 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