#F7D6CB + #DEC8E0 + #C3BAEA + #C596D9 + #8C8AA1 · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7D6CB

Apricot · Bisque · Peach Orange

HEX

#F7D6CB

RGB

rgb(247, 214, 203)

HSL

hsl(15, 73%, 88%)

HSB

hsb(15, 18%, 97%)

CMYK

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

Oklch

oklch(90.1% 0.040 39.3)

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

#DEC8E0

Lilac · LightGray · Lavender

HEX

#DEC8E0

RGB

rgb(222, 200, 224)

HSL

hsl(295, 28%, 83%)

HSB

hsb(295, 11%, 88%)

CMYK

cmyk(1%, 11%, 0%, 12%)

Oklch

oklch(85.8% 0.040 323.3)

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

#C3BAEA

Wisteria · LightSteelBlue · Sky Blue

HEX

#C3BAEA

RGB

rgb(195, 186, 234)

HSL

hsl(251, 53%, 82%)

HSB

hsb(251, 21%, 92%)

CMYK

cmyk(17%, 21%, 0%, 8%)

Oklch

oklch(81.2% 0.068 293.4)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#C596D9

Lilac · Orchid · Lilac Purple

HEX

#C596D9

RGB

rgb(197, 150, 217)

HSL

hsl(282, 47%, 72%)

HSB

hsb(282, 31%, 85%)

CMYK

cmyk(9%, 31%, 0%, 15%)

Oklch

oklch(74.0% 0.107 315.5)

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

#8C8AA1

Deep Indigo · LightSlateGray · Navy Blue

HEX

#8C8AA1

RGB

rgb(140, 138, 161)

HSL

hsl(245, 11%, 59%)

HSB

hsb(245, 14%, 63%)

CMYK

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

Oklch

oklch(64.3% 0.034 289.4)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7D6CB

CAECF7

Analogous

F7CAD5

F7D6CB

F7ECCA

Triadic

F7D6CB

CAF7D5

D5CAF7

Split-Comp.

F7D6CB

CAF7EC

CAD5F7

Tetradic

F7D6CB

D5F7CA

CAECF7

ECCAF7

Contrast Matrix WCAG 2.1 Contrast

F7D6CB	DEC8E0	C3BAEA	C596D9	8C8AA1
—	1.1 Fail	1.3 Fail	1.8 Fail	2.5 Fail
1.1 Fail	—	1.2 Fail	1.5 Fail	2.1 Fail
1.3 Fail	1.2 Fail	—	1.3 Fail	1.8 Fail
1.8 Fail	1.5 Fail	1.3 Fail	—	1.4 Fail
2.5 Fail	2.1 Fail	1.8 Fail	1.4 Fail	—

White BG

1.4Fail

1.6Fail

1.8Fail

2.4Fail

3.4AA Large

Black BG

15.4AAA

13.4AAA

11.5AAA

8.7AAA

6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E8CE

D4D4DA

BFBFDE

B1B0C9

8B8B9B

Deuteranopia

EBEDCE

D6D7D9

C0C0DC

B3B7C5

8B8B9A

Tritanopia

F5D0D0

DDD6D5

C3D5D3

C3BCB9

8C9796

Achromatopsia

DFDFDF

D1D1D1

C2C2C2

ACACAC

8D8D8D

Shades & Tints Shades & Tints

#F7D6CB

Dark

Light

#DEC8E0

Dark

Light

#C3BAEA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7d6cb;
  --color-2: #dec8e0;
  --color-3: #c3baea;
  --color-4: #c596d9;
  --color-5: #8c8aa1;
}

SCSS

$color-1: #f7d6cb;
$color-2: #dec8e0;
$color-3: #c3baea;
$color-4: #c596d9;
$color-5: #8c8aa1;

TAILWIND

colors: {
  'brand-1': '#f7d6cb',
  'brand-2': '#dec8e0',
  'brand-3': '#c3baea',
  'brand-4': '#c596d9',
  'brand-5': '#8c8aa1',
}

RGB Array

[247, 214, 203], [222, 200, 224], [195, 186, 234], [197, 150, 217], [140, 138, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #F7D6CB, #DEC8E0, #C3BAEA, #C596D9, #8C8AA1 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: #f7d6cb; --color-2: #dec8e0; --color-3: #c3baea; --color-4: #c596d9; --color-5: #8c8aa1. 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 space-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