#FB4F6A + #F6717F + #ECA595 + #B8B49C + #9EACA0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FB4F6A

Peach Pink · Tomato · Coral Red

HEX

#FB4F6A

RGB

rgb(251, 79, 106)

HSL

hsl(351, 96%, 65%)

HSB

hsb(351, 69%, 98%)

CMYK

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

Oklch

oklch(67.3% 0.207 15.8)

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

#F6717F

Peach Pink · LightCoral · Coral Red

HEX

#F6717F

RGB

rgb(246, 113, 127)

HSL

hsl(354, 88%, 70%)

HSB

hsb(354, 54%, 96%)

CMYK

cmyk(0%, 54%, 48%, 4%)

Oklch

oklch(71.1% 0.163 15.7)

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

#ECA595

Peach Pink · BurlyWood · Coral Red

HEX

#ECA595

RGB

rgb(236, 165, 149)

HSL

hsl(11, 70%, 75%)

HSB

hsb(11, 37%, 93%)

CMYK

cmyk(0%, 30%, 37%, 7%)

Oklch

oklch(78.6% 0.088 33.2)

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

#B8B49C

Fresh Green · DarkGray · Sunflower

HEX

#B8B49C

RGB

rgb(184, 180, 156)

HSL

hsl(51, 16%, 67%)

HSB

hsb(51, 15%, 72%)

CMYK

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

Oklch

oklch(76.7% 0.033 99.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#9EACA0

Celadon · DarkGray · Silver Sand

HEX

#9EACA0

RGB

rgb(158, 172, 160)

HSL

hsl(129, 8%, 65%)

HSB

hsb(129, 8%, 67%)

CMYK

cmyk(8%, 0%, 7%, 33%)

Oklch

oklch(73.0% 0.023 149.6)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FB4F6A

50FBE2

Analogous

FB50BF

FB4F6A

FB8C50

Triadic

FB4F6A

6AFB50

506AFB

Split-Comp.

FB4F6A

50FB8C

50BFFB

Tetradic

FB4F6A

BFFB50

50FBE2

8C50FB

Contrast Matrix WCAG 2.1 Contrast

FB4F6A	F6717F	ECA595	B8B49C	9EACA0
—	1.2 Fail	1.6 Fail	1.6 Fail	1.4 Fail
1.2 Fail	—	1.4 Fail	1.3 Fail	1.2 Fail
1.6 Fail	1.4 Fail	—	1.0 Fail	1.2 Fail
1.6 Fail	1.3 Fail	1.0 Fail	—	1.1 Fail
1.4 Fail	1.2 Fail	1.2 Fail	1.1 Fail	—

White BG

3.3AA Large

2.8Fail

2.0Fail

2.1Fail

2.4Fail

Black BG

6.4AA

7.6AAA

10.4AAA

10.0AAA

8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1AF63

BCBB7C

CDCD99

B6B6A2

A4A4A3

Deuteranopia

BBC762

C4CE7B

D1D79A

B7B7A3

A3A2A4

Tritanopia

F25E5D

EF7978

E89C9D

B8A6A7

9FA5A6

Achromatopsia

868686

9A9A9A

B8B8B8

B2B2B2

A6A6A6

Shades & Tints Shades & Tints

#FB4F6A

Dark

Light

#F6717F

Dark

Light

#ECA595

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fb4f6a;
  --color-2: #f6717f;
  --color-3: #eca595;
  --color-4: #b8b49c;
  --color-5: #9eaca0;
}

SCSS

$color-1: #fb4f6a;
$color-2: #f6717f;
$color-3: #eca595;
$color-4: #b8b49c;
$color-5: #9eaca0;

TAILWIND

colors: {
  'brand-1': '#fb4f6a',
  'brand-2': '#f6717f',
  'brand-3': '#eca595',
  'brand-4': '#b8b49c',
  'brand-5': '#9eaca0',
}

RGB Array

[251, 79, 106], [246, 113, 127], [236, 165, 149], [184, 180, 156], [158, 172, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FB4F6A, #F6717F, #ECA595, #B8B49C, #9EACA0 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: #fb4f6a; --color-2: #f6717f; --color-3: #eca595; --color-4: #b8b49c; --color-5: #9eaca0. 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