#F4A4A5 + #BFA099 + #C6B8A5 + #D4C7A1 + #F0CB97 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4A4A5

Peach Pink · LightPink · Coral Red

HEX

#F4A4A5

RGB

rgb(244, 164, 165)

HSL

hsl(359, 78%, 80%)

HSB

hsb(359, 33%, 96%)

CMYK

cmyk(0%, 33%, 32%, 4%)

Oklch

oklch(79.7% 0.095 18.6)

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

#BFA099

Peach Pink · DarkGray · Coral Red

HEX

#BFA099

RGB

rgb(191, 160, 153)

HSL

hsl(11, 23%, 67%)

HSB

hsb(11, 20%, 75%)

CMYK

cmyk(0%, 16%, 20%, 25%)

Oklch

oklch(73.1% 0.038 32.9)

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

#C6B8A5

Goose Yellow · Tan · Warm Sun

HEX

#C6B8A5

RGB

rgb(198, 184, 165)

HSL

hsl(35, 22%, 71%)

HSB

hsb(35, 17%, 78%)

CMYK

cmyk(0%, 7%, 17%, 22%)

Oklch

oklch(78.9% 0.031 75.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D4C7A1

Goose Yellow · Tan · Sunflower

HEX

#D4C7A1

RGB

rgb(212, 199, 161)

HSL

hsl(45, 37%, 73%)

HSB

hsb(45, 24%, 83%)

CMYK

cmyk(0%, 6%, 24%, 17%)

Oklch

oklch(83.1% 0.053 91.4)

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

#F0CB97

Goose Yellow · Khaki · Peach Orange

HEX

#F0CB97

RGB

rgb(240, 203, 151)

HSL

hsl(35, 75%, 77%)

HSB

hsb(35, 37%, 94%)

CMYK

cmyk(0%, 15%, 37%, 6%)

Oklch

oklch(86.2% 0.079 75.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4A4A5

A4F4F2

Analogous

F4A4CD

F4A4A5

F4CBA4

Triadic

F4A4A5

A6F4A4

A4A6F4

Split-Comp.

F4A4A5

A4F4CB

A4CDF4

Tetradic

F4A4A5

CDF4A4

A4F4F2

CBA4F4

Contrast Matrix WCAG 2.1 Contrast

F4A4A5	BFA099	C6B8A5	D4C7A1	F0CB97
—	1.2 Fail	1.0 Fail	1.2 Fail	1.3 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.6 Fail
1.0 Fail	1.2 Fail	—	1.2 Fail	1.3 Fail
1.2 Fail	1.4 Fail	1.2 Fail	—	1.1 Fail
1.3 Fail	1.6 Fail	1.3 Fail	1.1 Fail	—

White BG

2.0Fail

2.4Fail

1.9Fail

1.7Fail

1.5Fail

Black BG

10.7AAA

8.7AAA

10.8AAA

12.5AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1A5

B2B19B

C0C0AA

CECEAA

E0E0A4

Deuteranopia

D6DCA5

B3B69B

C1C2AB

CFD0AC

E2E5A7

Tritanopia

F0A5A5

BD9C9C

C5ADAE

D3B1B3

EEAEB0

Achromatopsia

BCBCBC

A8A8A8

BABABA

C7C7C7

D0D0D0

Shades & Tints Shades & Tints

#F4A4A5

Dark

Light

#BFA099

Dark

Light

#C6B8A5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4a4a5;
  --color-2: #bfa099;
  --color-3: #c6b8a5;
  --color-4: #d4c7a1;
  --color-5: #f0cb97;
}

SCSS

$color-1: #f4a4a5;
$color-2: #bfa099;
$color-3: #c6b8a5;
$color-4: #d4c7a1;
$color-5: #f0cb97;

TAILWIND

colors: {
  'brand-1': '#f4a4a5',
  'brand-2': '#bfa099',
  'brand-3': '#c6b8a5',
  'brand-4': '#d4c7a1',
  'brand-5': '#f0cb97',
}

RGB Array

[244, 164, 165], [191, 160, 153], [198, 184, 165], [212, 199, 161], [240, 203, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F4A4A5, #BFA099, #C6B8A5, #D4C7A1, #F0CB97 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: #f4a4a5; --color-2: #bfa099; --color-3: #c6b8a5; --color-4: #d4c7a1; --color-5: #f0cb97. 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 warm-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