#B16975 + #F48E8A + #F9B56E + #C7E277 + #B4D5BA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B16975

Crimson · Gray · Passion Red

HEX

#B16975

RGB

rgb(177, 105, 117)

HSL

hsl(350, 32%, 55%)

HSB

hsb(350, 41%, 69%)

CMYK

cmyk(0%, 41%, 34%, 31%)

Oklch

oklch(60.4% 0.093 9.5)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#F48E8A

Peach Pink · LightCoral · Coral Red

HEX

#F48E8A

RGB

rgb(244, 142, 138)

HSL

hsl(2, 83%, 75%)

HSB

hsb(2, 43%, 96%)

CMYK

cmyk(0%, 42%, 43%, 4%)

Oklch

oklch(75.4% 0.124 22.8)

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

#F9B56E

Ginger · SandyBrown · Warm Sun

HEX

#F9B56E

RGB

rgb(249, 181, 110)

HSL

hsl(31, 92%, 70%)

HSB

hsb(31, 56%, 98%)

CMYK

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

Oklch

oklch(82.2% 0.118 66.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#C7E277

Willow Green · Khaki · Apple Green

HEX

#C7E277

RGB

rgb(199, 226, 119)

HSL

hsl(75, 65%, 68%)

HSB

hsb(75, 47%, 89%)

CMYK

cmyk(12%, 0%, 47%, 11%)

Oklch

oklch(87.0% 0.137 121.0)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#B4D5BA

Celadon · Silver · Apple Green

HEX

#B4D5BA

RGB

rgb(180, 213, 186)

HSL

hsl(131, 28%, 77%)

HSB

hsb(131, 15%, 84%)

CMYK

cmyk(15%, 0%, 13%, 16%)

Oklch

oklch(84.1% 0.051 150.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B16975

68B1A5

Analogous

B16898

B16975

B18068

Triadic

B16975

74B168

6874B1

Split-Comp.

B16975

68B180

6898B1

Tetradic

B16975

98B168

68B1A5

8068B1

Contrast Matrix WCAG 2.1 Contrast

B16975	F48E8A	F9B56E	C7E277	B4D5BA
—	1.8 Fail	2.3 Fail	2.8 Fail	2.6 Fail
1.8 Fail	—	1.3 Fail	1.6 Fail	1.4 Fail
2.3 Fail	1.3 Fail	—	1.2 Fail	1.1 Fail
2.8 Fail	1.6 Fail	1.2 Fail	—	1.1 Fail
2.6 Fail	1.4 Fail	1.1 Fail	1.1 Fail	—

White BG

4.1AA Large

2.3Fail

1.8Fail

1.4Fail

1.6Fail

Black BG

5.1AA

9.1AAA

11.9AAA

14.6AAA

13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

929172

C8C78B

DCDB7F

D3D391

C2C3C1

Deuteranopia

969B71

CED58B

E0E583

D1CF97

C0BEC2

Tritanopia

AD706F

EF8C8C

F68D90

C8A5AA

B6C6C7

Achromatopsia

808080

ACACAC

C1C1C1

CECECE

C8C8C8

Shades & Tints Shades & Tints

#B16975

Dark

Light

#F48E8A

Dark

Light

#F9B56E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b16975;
  --color-2: #f48e8a;
  --color-3: #f9b56e;
  --color-4: #c7e277;
  --color-5: #b4d5ba;
}

SCSS

$color-1: #b16975;
$color-2: #f48e8a;
$color-3: #f9b56e;
$color-4: #c7e277;
$color-5: #b4d5ba;

TAILWIND

colors: {
  'brand-1': '#b16975',
  'brand-2': '#f48e8a',
  'brand-3': '#f9b56e',
  'brand-4': '#c7e277',
  'brand-5': '#b4d5ba',
}

RGB Array

[177, 105, 117], [244, 142, 138], [249, 181, 110], [199, 226, 119], [180, 213, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B16975, #F48E8A, #F9B56E, #C7E277, #B4D5BA 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: #b16975; --color-2: #f48e8a; --color-3: #f9b56e; --color-4: #c7e277; --color-5: #b4d5ba. 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