#F8BDAD + #BEA27A + #EFDDC7 + #F4977E + #9C8051 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8BDAD

Peach Pink · LightPink · Cherry Blossom

HEX

#F8BDAD

RGB

rgb(248, 189, 173)

HSL

hsl(13, 84%, 83%)

HSB

hsb(13, 30%, 97%)

CMYK

cmyk(0%, 24%, 30%, 3%)

Oklch

oklch(84.8% 0.072 35.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#BEA27A

Ginger · Tan · Warm Sun

HEX

#BEA27A

RGB

rgb(190, 162, 122)

HSL

hsl(35, 34%, 61%)

HSB

hsb(35, 36%, 75%)

CMYK

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

Oklch

oklch(72.7% 0.064 76.3)

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

#EFDDC7

Goose Yellow · Bisque · Peach Orange

HEX

#EFDDC7

RGB

rgb(239, 221, 199)

HSL

hsl(33, 56%, 86%)

HSB

hsb(33, 17%, 94%)

CMYK

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

Oklch

oklch(90.6% 0.035 72.9)

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

#F4977E

Peach Pink · DarkSalmon · Coral Red

HEX

#F4977E

RGB

rgb(244, 151, 126)

HSL

hsl(13, 84%, 73%)

HSB

hsb(13, 48%, 96%)

CMYK

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

Oklch

oklch(76.6% 0.118 35.8)

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

#9C8051

Ochre · Gray · Amber Brown

HEX

#9C8051

RGB

rgb(156, 128, 81)

HSL

hsl(38, 32%, 46%)

HSB

hsb(38, 48%, 61%)

CMYK

cmyk(0%, 18%, 48%, 39%)

Oklch

oklch(61.5% 0.073 79.7)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8BDAD

AFE8F8

Analogous

F8AFC4

F8BDAD

F8E3AF

Triadic

F8BDAD

AFF8BF

BFAFF8

Split-Comp.

F8BDAD

AFF8E3

AFC4F8

Tetradic

F8BDAD

C4F8AF

AFE8F8

E3AFF8

Contrast Matrix WCAG 2.1 Contrast

F8BDAD	BEA27A	EFDDC7	F4977E	9C8051
—	1.5 Fail	1.2 Fail	1.3 Fail	2.3 Fail
1.5 Fail	—	1.8 Fail	1.1 Fail	1.5 Fail
1.2 Fail	1.8 Fail	—	1.7 Fail	2.8 Fail
1.3 Fail	1.1 Fail	1.7 Fail	—	1.7 Fail
2.3 Fail	1.5 Fail	2.8 Fail	1.7 Fail	—

White BG

1.6Fail

2.4Fail

1.3Fail

2.2Fail

3.7AA Large

Black BG

12.9AAA

8.6AAA

15.8AAA

9.6AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEB1

B2B284

E7E7CC

CCCB84

90905C

Deuteranopia

E2E6B2

B4B686

E8EACE

D1D886

92945F

Tritanopia

F5B4B5

BD8B8D

EED1D1

EF898A

9B6567

Achromatopsia

CDCDCD

A6A6A6

E0E0E0

B0B0B0

838383

Shades & Tints Shades & Tints

#F8BDAD

Dark

Light

#BEA27A

Dark

Light

#EFDDC7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8bdad;
  --color-2: #bea27a;
  --color-3: #efddc7;
  --color-4: #f4977e;
  --color-5: #9c8051;
}

SCSS

$color-1: #f8bdad;
$color-2: #bea27a;
$color-3: #efddc7;
$color-4: #f4977e;
$color-5: #9c8051;

TAILWIND

colors: {
  'brand-1': '#f8bdad',
  'brand-2': '#bea27a',
  'brand-3': '#efddc7',
  'brand-4': '#f4977e',
  'brand-5': '#9c8051',
}

RGB Array

[248, 189, 173], [190, 162, 122], [239, 221, 199], [244, 151, 126], [156, 128, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8BDAD, #BEA27A, #EFDDC7, #F4977E, #9C8051 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: #f8bdad; --color-2: #bea27a; --color-3: #efddc7; --color-4: #f4977e; --color-5: #9c8051. 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