#948299 + #B8A2B5 + #DFBCC0 + #F7DACB + #F7E6DA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#948299

Dark Plum · LightSlateGray · Violet

HEX

#948299

RGB

rgb(148, 130, 153)

HSL

hsl(287, 10%, 55%)

HSB

hsb(287, 15%, 60%)

CMYK

cmyk(3%, 15%, 0%, 40%)

Oklch

oklch(63.1% 0.040 318.8)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#B8A2B5

Mauve · DarkGray · Lilac Purple

HEX

#B8A2B5

RGB

rgb(184, 162, 181)

HSL

hsl(308, 13%, 68%)

HSB

hsb(308, 12%, 72%)

CMYK

cmyk(0%, 12%, 2%, 28%)

Oklch

oklch(73.7% 0.037 330.4)

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

#DFBCC0

Peach Pink · Silver · Cherry Blossom

HEX

#DFBCC0

RGB

rgb(223, 188, 192)

HSL

hsl(353, 35%, 81%)

HSB

hsb(353, 16%, 87%)

CMYK

cmyk(0%, 16%, 14%, 13%)

Oklch

oklch(82.7% 0.040 10.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F7DACB

Apricot · Bisque · Peach Orange

HEX

#F7DACB

RGB

rgb(247, 218, 203)

HSL

hsl(20, 73%, 88%)

HSB

hsb(20, 18%, 97%)

CMYK

cmyk(0%, 12%, 18%, 3%)

Oklch

oklch(90.8% 0.038 49.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F7E6DA

Apricot · Beige · Peach Orange

HEX

#F7E6DA

RGB

rgb(247, 230, 218)

HSL

hsl(25, 64%, 91%)

HSB

hsb(25, 12%, 97%)

CMYK

cmyk(0%, 7%, 12%, 3%)

Oklch

oklch(93.5% 0.025 57.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

948299

869881

Analogous

878198

948299

988191

Triadic

948299

989381

819893

Split-Comp.

948299

919881

819887

Tetradic

948299

988781

869881

819198

Contrast Matrix WCAG 2.1 Contrast

948299	B8A2B5	DFBCC0	F7DACB	F7E6DA
—	1.5 Fail	2.0 Fail	2.7 Fail	2.9 Fail
1.5 Fail	—	1.4 Fail	1.8 Fail	1.9 Fail
2.0 Fail	1.4 Fail	—	1.3 Fail	1.4 Fail
2.7 Fail	1.8 Fail	1.3 Fail	—	1.1 Fail
2.9 Fail	1.9 Fail	1.4 Fail	1.1 Fail	—

White BG

3.6AA Large

2.4Fail

1.7Fail

1.3Fail

1.2Fail

Black BG

5.9AA

8.9AAA

12.1AAA

15.8AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C93

AEAEB0

D0D0BF

EAEACF

F0EFDD

Deuteranopia

8D8F92

B0B1AF

D2D5BF

ECEED0

F1F2DE

Tritanopia

938F8E

B7ADAC

DDBEBE

F6D1D2

F6DFE0

Achromatopsia

8A8A8A

ABABAB

C7C7C7

E1E1E1

EAEAEA

Shades & Tints Shades & Tints

#948299

Dark

Light

#B8A2B5

Dark

Light

#DFBCC0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #948299;
  --color-2: #b8a2b5;
  --color-3: #dfbcc0;
  --color-4: #f7dacb;
  --color-5: #f7e6da;
}

SCSS

$color-1: #948299;
$color-2: #b8a2b5;
$color-3: #dfbcc0;
$color-4: #f7dacb;
$color-5: #f7e6da;

TAILWIND

colors: {
  'brand-1': '#948299',
  'brand-2': '#b8a2b5',
  'brand-3': '#dfbcc0',
  'brand-4': '#f7dacb',
  'brand-5': '#f7e6da',
}

RGB Array

[148, 130, 153], [184, 162, 181], [223, 188, 192], [247, 218, 203], [247, 230, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #948299, #B8A2B5, #DFBCC0, #F7DACB, #F7E6DA 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: #948299; --color-2: #b8a2b5; --color-3: #dfbcc0; --color-4: #f7dacb; --color-5: #f7e6da. 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