#FB754F + #B98480 + #BC8E90 + #A7B2C8 + #A8C9ED - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FB754F

Peach Pink · Coral · Coral Red

HEX

#FB754F

RGB

rgb(251, 117, 79)

HSL

hsl(13, 96%, 65%)

HSB

hsb(13, 69%, 98%)

CMYK

cmyk(0%, 53%, 69%, 2%)

Oklch

oklch(71.5% 0.173 36.7)

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

#B98480

Peach Pink · DarkSalmon · Coral Red

HEX

#B98480

RGB

rgb(185, 132, 128)

HSL

hsl(4, 29%, 61%)

HSB

hsb(4, 31%, 73%)

CMYK

cmyk(0%, 29%, 31%, 27%)

Oklch

oklch(66.5% 0.066 23.8)

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

#BC8E90

Peach Pink · DarkGray · Coral Red

HEX

#BC8E90

RGB

rgb(188, 142, 144)

HSL

hsl(357, 26%, 65%)

HSB

hsb(357, 24%, 74%)

CMYK

cmyk(0%, 24%, 23%, 26%)

Oklch

oklch(69.1% 0.056 15.7)

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

#A7B2C8

Azure · Silver · Cobalt Blue

HEX

#A7B2C8

RGB

rgb(167, 178, 200)

HSL

hsl(220, 23%, 72%)

HSB

hsb(220, 16%, 78%)

CMYK

cmyk(16%, 11%, 0%, 22%)

Oklch

oklch(76.2% 0.034 264.4)

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

#A8C9ED

Azure · LightBlue · Cobalt Blue

HEX

#A8C9ED

RGB

rgb(168, 201, 237)

HSL

hsl(211, 66%, 79%)

HSB

hsb(211, 29%, 93%)

CMYK

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

Oklch

oklch(82.4% 0.062 250.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FB754F

50D6FB

Analogous

FB5081

FB754F

FBCB50

Triadic

FB754F

50FB75

7550FB

Split-Comp.

FB754F

50FBCB

5081FB

Tetradic

FB754F

81FB50

50D6FB

CB50FB

Contrast Matrix WCAG 2.1 Contrast

FB754F	B98480	BC8E90	A7B2C8	A8C9ED
—	1.2 Fail	1.0 Fail	1.3 Fail	1.6 Fail
1.2 Fail	—	1.1 Fail	1.5 Fail	1.8 Fail
1.0 Fail	1.1 Fail	—	1.3 Fail	1.7 Fail
1.3 Fail	1.5 Fail	1.3 Fail	—	1.2 Fail
1.6 Fail	1.8 Fail	1.7 Fail	1.2 Fail	—

White BG

2.7Fail

3.1AA Large

2.8Fail

2.1Fail

1.7Fail

Black BG

7.8AAA

6.7AA

7.4AAA

9.8AAA

12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C058

A2A281

A8A890

ACACC3

B6B7E4

Deuteranopia

C9D35A

A5A981

ABAE8F

ABAAC1

B4B2E2

Tritanopia

F45F61

B68282

BA8F8F

A8BEBE

AADDDC

Achromatopsia

999999

939393

9C9C9C

B1B1B1

C3C3C3

Shades & Tints Shades & Tints

#FB754F

Dark

Light

#B98480

Dark

Light

#BC8E90

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fb754f;
  --color-2: #b98480;
  --color-3: #bc8e90;
  --color-4: #a7b2c8;
  --color-5: #a8c9ed;
}

SCSS

$color-1: #fb754f;
$color-2: #b98480;
$color-3: #bc8e90;
$color-4: #a7b2c8;
$color-5: #a8c9ed;

TAILWIND

colors: {
  'brand-1': '#fb754f',
  'brand-2': '#b98480',
  'brand-3': '#bc8e90',
  'brand-4': '#a7b2c8',
  'brand-5': '#a8c9ed',
}

RGB Array

[251, 117, 79], [185, 132, 128], [188, 142, 144], [167, 178, 200], [168, 201, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FB754F, #B98480, #BC8E90, #A7B2C8, #A8C9ED 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: #fb754f; --color-2: #b98480; --color-3: #bc8e90; --color-4: #a7b2c8; --color-5: #a8c9ed. 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