#F36565 + #C88D8F + #9CB4B8 + #BABFAE + #D8C9A3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F36565

Peach Pink · Salmon · Coral Red

HEX

#F36565

RGB

rgb(243, 101, 101)

HSL

hsl(0, 86%, 67%)

HSB

hsb(0, 58%, 95%)

CMYK

cmyk(0%, 58%, 58%, 5%)

Oklch

oklch(68.5% 0.175 22.9)

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

#C88D8F

Peach Pink · DarkSalmon · Coral Red

HEX

#C88D8F

RGB

rgb(200, 141, 143)

HSL

hsl(358, 35%, 67%)

HSB

hsb(358, 29%, 78%)

CMYK

cmyk(0%, 29%, 28%, 22%)

Oklch

oklch(70.2% 0.072 16.8)

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

#9CB4B8

Sky Blue · DarkGray · Lake Green

HEX

#9CB4B8

RGB

rgb(156, 180, 184)

HSL

hsl(189, 16%, 67%)

HSB

hsb(189, 15%, 72%)

CMYK

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

Oklch

oklch(75.3% 0.027 208.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#BABFAE

Willow Green · Silver · Apple Green

HEX

#BABFAE

RGB

rgb(186, 191, 174)

HSL

hsl(78, 12%, 72%)

HSB

hsb(78, 9%, 75%)

CMYK

cmyk(3%, 0%, 9%, 25%)

Oklch

oklch(79.6% 0.024 120.3)

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

#D8C9A3

Goose Yellow · Tan · Sunflower

HEX

#D8C9A3

RGB

rgb(216, 201, 163)

HSL

hsl(43, 40%, 74%)

HSB

hsb(43, 25%, 85%)

CMYK

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

Oklch

oklch(83.9% 0.053 89.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F36565

62F3F3

Analogous

F362AB

F36565

F3AB62

Triadic

F36565

62F362

6262F3

Split-Comp.

F36565

62F3AB

62ABF3

Tetradic

F36565

ABF362

62F3F3

AB62F3

Contrast Matrix WCAG 2.1 Contrast

F36565	C88D8F	9CB4B8	BABFAE	D8C9A3
—	1.1 Fail	1.4 Fail	1.6 Fail	1.9 Fail
1.1 Fail	—	1.3 Fail	1.5 Fail	1.7 Fail
1.4 Fail	1.3 Fail	—	1.2 Fail	1.3 Fail
1.6 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
1.9 Fail	1.7 Fail	1.3 Fail	1.1 Fail	—

White BG

3.1AA Large

2.7Fail

2.2Fail

1.9Fail

1.6Fail

Black BG

6.9AA

7.7AAA

9.6AAA

11.2AAA

12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B465

AEAE8F

A6A7B7

BCBCB2

D2D1AC

Deuteranopia

BEC865

B2B68E

A5A3B7

BCBCB3

D2D4AE

Tritanopia

EC6565

C58E8E

9DB6B6

BAB5B6

D7B3B5

Achromatopsia

8F8F8F

9F9F9F

ADADAD

BCBCBC

C9C9C9

Shades & Tints Shades & Tints

#F36565

Dark

Light

#C88D8F

Dark

Light

#9CB4B8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f36565;
  --color-2: #c88d8f;
  --color-3: #9cb4b8;
  --color-4: #babfae;
  --color-5: #d8c9a3;
}

SCSS

$color-1: #f36565;
$color-2: #c88d8f;
$color-3: #9cb4b8;
$color-4: #babfae;
$color-5: #d8c9a3;

TAILWIND

colors: {
  'brand-1': '#f36565',
  'brand-2': '#c88d8f',
  'brand-3': '#9cb4b8',
  'brand-4': '#babfae',
  'brand-5': '#d8c9a3',
}

RGB Array

[243, 101, 101], [200, 141, 143], [156, 180, 184], [186, 191, 174], [216, 201, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F36565, #C88D8F, #9CB4B8, #BABFAE, #D8C9A3 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: #f36565; --color-2: #c88d8f; --color-3: #9cb4b8; --color-4: #babfae; --color-5: #d8c9a3. 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