#FBC7B7 + #F9889C + #D180A3 + #A8789C + #6C658A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FBC7B7

Peach Pink · LightPink · Cherry Blossom

HEX

#FBC7B7

RGB

rgb(251, 199, 183)

HSL

hsl(14, 89%, 85%)

HSB

hsb(14, 27%, 98%)

CMYK

cmyk(0%, 21%, 27%, 2%)

Oklch

oklch(87.1% 0.064 37.8)

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

#F9889C

Peach Pink · LightCoral · Coral Red

HEX

#F9889C

RGB

rgb(249, 136, 156)

HSL

hsl(349, 90%, 75%)

HSB

hsb(349, 45%, 98%)

CMYK

cmyk(0%, 45%, 37%, 2%)

Oklch

oklch(75.5% 0.138 9.7)

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

#D180A3

Rouge · LightCoral · Rose Pink

HEX

#D180A3

RGB

rgb(209, 128, 163)

HSL

hsl(334, 47%, 66%)

HSB

hsb(334, 39%, 82%)

CMYK

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

Oklch

oklch(69.5% 0.109 352.9)

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

#A8789C

Rose Purple · Gray · Violet

HEX

#A8789C

RGB

rgb(168, 120, 156)

HSL

hsl(315, 22%, 56%)

HSB

hsb(315, 29%, 66%)

CMYK

cmyk(0%, 29%, 7%, 34%)

Oklch

oklch(63.2% 0.077 335.8)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#6C658A

Deep Indigo · SlateGray · Navy Blue

HEX

#6C658A

RGB

rgb(108, 101, 138)

HSL

hsl(251, 15%, 47%)

HSB

hsb(251, 27%, 54%)

CMYK

cmyk(22%, 27%, 0%, 46%)

Oklch

oklch(52.8% 0.058 293.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBC7B7

B7EBFB

Analogous

FBB7C9

FBC7B7

FBE9B7

Triadic

FBC7B7

B7FBC7

C7B7FB

Split-Comp.

FBC7B7

B7FBE9

B7C9FB

Tetradic

FBC7B7

C9FBB7

B7EBFB

E9B7FB

Contrast Matrix WCAG 2.1 Contrast

FBC7B7	F9889C	D180A3	A8789C	6C658A
—	1.5 Fail	1.9 Fail	2.4 Fail	3.6 AA Large
1.5 Fail	—	1.2 Fail	1.5 Fail	2.3 Fail
1.9 Fail	1.2 Fail	—	1.3 Fail	1.9 Fail
2.4 Fail	1.5 Fail	1.3 Fail	—	1.5 Fail
3.6 AA Large	2.3 Fail	1.9 Fail	1.5 Fail	—

White BG

1.5Fail

2.3Fail

2.9Fail

3.6AA Large

5.4AA

Black BG

14.0AAA

9.0AAA

7.3AAA

5.8AA

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4BB

C8C797

AEAD9B

939393

696981

Deuteranopia

E8EBBC

CFD796

B3B999

969A91

696A7F

Tritanopia

F8BEBF

F39393

CD9492

A68C8B

6C7A78

Achromatopsia

D5D5D5

ACACAC

9C9C9C

8A8A8A

6B6B6B

Shades & Tints Shades & Tints

#FBC7B7

Dark

Light

#F9889C

Dark

Light

#D180A3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbc7b7;
  --color-2: #f9889c;
  --color-3: #d180a3;
  --color-4: #a8789c;
  --color-5: #6c658a;
}

SCSS

$color-1: #fbc7b7;
$color-2: #f9889c;
$color-3: #d180a3;
$color-4: #a8789c;
$color-5: #6c658a;

TAILWIND

colors: {
  'brand-1': '#fbc7b7',
  'brand-2': '#f9889c',
  'brand-3': '#d180a3',
  'brand-4': '#a8789c',
  'brand-5': '#6c658a',
}

RGB Array

[251, 199, 183], [249, 136, 156], [209, 128, 163], [168, 120, 156], [108, 101, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBC7B7, #F9889C, #D180A3, #A8789C, #6C658A 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: #fbc7b7; --color-2: #f9889c; --color-3: #d180a3; --color-4: #a8789c; --color-5: #6c658a. 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