#7B819F + #B094A0 + #E4A7A0 + #F8CC8A + #FCECBA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7B819F

Azure · LightSlateGray · Navy Blue

HEX

#7B819F

RGB

rgb(123, 129, 159)

HSL

hsl(230, 16%, 55%)

HSB

hsb(230, 23%, 62%)

CMYK

cmyk(23%, 19%, 0%, 38%)

Oklch

oklch(60.9% 0.046 276.1)

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

#B094A0

Rouge · DarkGray · Rose Pink

HEX

#B094A0

RGB

rgb(176, 148, 160)

HSL

hsl(334, 15%, 64%)

HSB

hsb(334, 16%, 69%)

CMYK

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

Oklch

oklch(69.5% 0.037 350.4)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#E4A7A0

Peach Pink · Tan · Coral Red

HEX

#E4A7A0

RGB

rgb(228, 167, 160)

HSL

hsl(6, 56%, 76%)

HSB

hsb(6, 30%, 89%)

CMYK

cmyk(0%, 27%, 30%, 11%)

Oklch

oklch(78.4% 0.073 26.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F8CC8A

Goose Yellow · Khaki · Peach Orange

HEX

#F8CC8A

RGB

rgb(248, 204, 138)

HSL

hsl(36, 89%, 76%)

HSB

hsb(36, 44%, 97%)

CMYK

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

Oklch

oklch(86.9% 0.097 77.1)

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

#FCECBA

Goose Yellow · Bisque · Lemon Cream

HEX

#FCECBA

RGB

rgb(252, 236, 186)

HSL

hsl(45, 92%, 86%)

HSB

hsb(45, 26%, 99%)

CMYK

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

Oklch

oklch(94.4% 0.067 92.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B819F

9F987A

Analogous

7A929F

7B819F

867A9F

Triadic

7B819F

9F7A80

809F7A

Split-Comp.

7B819F

9F867A

929F7A

Tetradic

7B819F

9F7A92

9F987A

7A9F86

Contrast Matrix WCAG 2.1 Contrast

7B819F	B094A0	E4A7A0	F8CC8A	FCECBA
—	1.4 Fail	1.9 Fail	2.6 Fail	3.3 AA Large
1.4 Fail	—	1.4 Fail	1.8 Fail	2.4 Fail
1.9 Fail	1.4 Fail	—	1.4 Fail	1.7 Fail
2.6 Fail	1.8 Fail	1.4 Fail	—	1.3 Fail
3.3 AA Large	2.4 Fail	1.7 Fail	1.3 Fail	—

White BG

3.8AA Large

2.8Fail

2.0Fail

1.5Fail

1.2Fail

Black BG

5.5AA

7.6AAA

10.3AAA

14.0AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7E98

A4A49D

CAC9A2

E5E59A

F5F5C6

Deuteranopia

7D7D96

A6A89C

CDD2A2

E8EB9E

F6F7C9

Tritanopia

7B9291

AF9B9A

E1A3A3

F6A7A9

FBD0D2

Achromatopsia

838383

9E9E9E

B8B8B8

D2D2D2

EBEBEB

Shades & Tints Shades & Tints

#7B819F

Dark

Light

#B094A0

Dark

Light

#E4A7A0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b819f;
  --color-2: #b094a0;
  --color-3: #e4a7a0;
  --color-4: #f8cc8a;
  --color-5: #fcecba;
}

SCSS

$color-1: #7b819f;
$color-2: #b094a0;
$color-3: #e4a7a0;
$color-4: #f8cc8a;
$color-5: #fcecba;

TAILWIND

colors: {
  'brand-1': '#7b819f',
  'brand-2': '#b094a0',
  'brand-3': '#e4a7a0',
  'brand-4': '#f8cc8a',
  'brand-5': '#fcecba',
}

RGB Array

[123, 129, 159], [176, 148, 160], [228, 167, 160], [248, 204, 138], [252, 236, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7B819F, #B094A0, #E4A7A0, #F8CC8A, #FCECBA 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: #7b819f; --color-2: #b094a0; --color-3: #e4a7a0; --color-4: #f8cc8a; --color-5: #fcecba. 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