#FBD7B4 + #D8C2C6 + #B4B8D7 + #93A3D0 + #7B89B4 · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FBD7B4

Goose Yellow · Wheat · Peach Orange

HEX

#FBD7B4

RGB

rgb(251, 215, 180)

HSL

hsl(30, 90%, 85%)

HSB

hsb(30, 28%, 98%)

CMYK

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

Oklch

oklch(90.1% 0.061 66.1)

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

#D8C2C6

Peach Pink · LightGray · Coral Red

HEX

#D8C2C6

RGB

rgb(216, 194, 198)

HSL

hsl(349, 22%, 80%)

HSB

hsb(349, 10%, 85%)

CMYK

cmyk(0%, 10%, 8%, 15%)

Oklch

oklch(83.4% 0.025 5.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#B4B8D7

Azure · LightSteelBlue · Cobalt Blue

HEX

#B4B8D7

RGB

rgb(180, 184, 215)

HSL

hsl(233, 30%, 77%)

HSB

hsb(233, 16%, 84%)

CMYK

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

Oklch

oklch(79.0% 0.044 279.5)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#93A3D0

Azure · DarkGray · Cobalt Blue

HEX

#93A3D0

RGB

rgb(147, 163, 208)

HSL

hsl(224, 39%, 70%)

HSB

hsb(224, 29%, 82%)

CMYK

cmyk(29%, 22%, 0%, 18%)

Oklch

oklch(71.9% 0.068 269.4)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#7B89B4

Azure · LightSlateGray · Navy Blue

HEX

#7B89B4

RGB

rgb(123, 137, 180)

HSL

hsl(225, 28%, 59%)

HSB

hsb(225, 32%, 71%)

CMYK

cmyk(32%, 24%, 0%, 29%)

Oklch

oklch(63.5% 0.067 270.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBD7B4

B6D9FB

Analogous

FBB6B6

FBD7B4

FBFBB6

Triadic

FBD7B4

B6FBD9

D9B6FB

Split-Comp.

FBD7B4

B6FBFB

B6B6FB

Tetradic

FBD7B4

B6FBB6

B6D9FB

FBB6FB

Contrast Matrix WCAG 2.1 Contrast

FBD7B4	D8C2C6	B4B8D7	93A3D0	7B89B4
—	1.2 Fail	1.4 Fail	1.8 Fail	2.5 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	2.0 Fail
1.4 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.0 Fail	1.8 Fail	1.4 Fail	—

White BG

1.4Fail

1.7Fail

1.9Fail

2.5Fail

3.5AA Large

Black BG

15.5AAA

12.5AAA

10.8AAA

8.4AAA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBBC

CECEC5

B6B6CF

9A9AC5

8181AA

Deuteranopia

EEF0BF

D0D1C5

B6B5CE

9998C3

807FA7

Tritanopia

F9C3C5

D7C4C4

B4CAC8

94BDBB

7CA1A0

Achromatopsia

DEDEDE

C9C9C9

BABABA

A3A3A3

8A8A8A

Shades & Tints Shades & Tints

#FBD7B4

Dark

Light

#D8C2C6

Dark

Light

#B4B8D7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbd7b4;
  --color-2: #d8c2c6;
  --color-3: #b4b8d7;
  --color-4: #93a3d0;
  --color-5: #7b89b4;
}

SCSS

$color-1: #fbd7b4;
$color-2: #d8c2c6;
$color-3: #b4b8d7;
$color-4: #93a3d0;
$color-5: #7b89b4;

TAILWIND

colors: {
  'brand-1': '#fbd7b4',
  'brand-2': '#d8c2c6',
  'brand-3': '#b4b8d7',
  'brand-4': '#93a3d0',
  'brand-5': '#7b89b4',
}

RGB Array

[251, 215, 180], [216, 194, 198], [180, 184, 215], [147, 163, 208], [123, 137, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #FBD7B4, #D8C2C6, #B4B8D7, #93A3D0, #7B89B4 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: #fbd7b4; --color-2: #d8c2c6; --color-3: #b4b8d7; --color-4: #93a3d0; --color-5: #7b89b4. 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