#FFE4B8 + #B7D1B0 + #94B5A9 + #B87272 + #BD4242 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFE4B8

Goose Yellow · Bisque · Peach Orange

HEX

#FFE4B8

RGB

rgb(255, 228, 184)

HSL

hsl(37, 100%, 86%)

HSB

hsb(37, 28%, 100%)

CMYK

cmyk(0%, 11%, 28%, 0%)

Oklch

oklch(93.0% 0.064 79.9)

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

#B7D1B0

Celadon · Silver · Apple Green

HEX

#B7D1B0

RGB

rgb(183, 209, 176)

HSL

hsl(107, 26%, 75%)

HSB

hsb(107, 16%, 82%)

CMYK

cmyk(12%, 0%, 16%, 18%)

Oklch

oklch(83.2% 0.053 139.1)

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

#94B5A9

Jade · DarkGray · Apple Green

HEX

#94B5A9

RGB

rgb(148, 181, 169)

HSL

hsl(158, 18%, 65%)

HSB

hsb(158, 18%, 71%)

CMYK

cmyk(18%, 0%, 7%, 29%)

Oklch

oklch(74.5% 0.040 171.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#B87272

Crimson · Gray · Passion Red

HEX

#B87272

RGB

rgb(184, 114, 114)

HSL

hsl(0, 33%, 58%)

HSB

hsb(0, 38%, 72%)

CMYK

cmyk(0%, 38%, 38%, 28%)

Oklch

oklch(62.7% 0.089 19.9)

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

#BD4242

Crimson · Sienna · Passion Red

HEX

#BD4242

RGB

rgb(189, 66, 66)

HSL

hsl(0, 48%, 50%)

HSB

hsb(0, 65%, 74%)

CMYK

cmyk(0%, 65%, 65%, 26%)

Oklch

oklch(55.2% 0.159 23.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFE4B8

B8D3FF

Analogous

FFC0B8

FFE4B8

F7FFB8

Triadic

FFE4B8

B8FFE4

E4B8FF

Split-Comp.

FFE4B8

B8F7FF

C0B8FF

Tetradic

FFE4B8

B8FFC0

B8D3FF

FFB8F7

Contrast Matrix WCAG 2.1 Contrast

FFE4B8	B7D1B0	94B5A9	B87272	BD4242
—	1.3 Fail	1.8 Fail	3.0 Fail	4.2 AA Large
1.3 Fail	—	1.4 Fail	2.2 Fail	3.2 AA Large
1.8 Fail	1.4 Fail	—	1.7 Fail	2.3 Fail
3.0 Fail	2.2 Fail	1.7 Fail	—	1.4 Fail
4.2 AA Large	3.2 AA Large	2.3 Fail	1.4 Fail	—

White BG

1.2Fail

1.6Fail

2.2Fail

3.7AA Large

5.2AA

Black BG

17.0AAA

12.8AAA

9.4AAA

5.7AA

4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3C3

C2C2B8

A2A3AC

9A9972

888742

Deuteranopia

F5F7C5

C1BFBA

A09EAD

9EA372

8F9842

Tritanopia

FECBCD

B8BEC0

96AEAF

B47272

B74242

Achromatopsia

E7E7E7

C5C5C5

AAAAAA

878787

676767

Shades & Tints Shades & Tints

#FFE4B8

Dark

Light

#B7D1B0

Dark

Light

#94B5A9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffe4b8;
  --color-2: #b7d1b0;
  --color-3: #94b5a9;
  --color-4: #b87272;
  --color-5: #bd4242;
}

SCSS

$color-1: #ffe4b8;
$color-2: #b7d1b0;
$color-3: #94b5a9;
$color-4: #b87272;
$color-5: #bd4242;

TAILWIND

colors: {
  'brand-1': '#ffe4b8',
  'brand-2': '#b7d1b0',
  'brand-3': '#94b5a9',
  'brand-4': '#b87272',
  'brand-5': '#bd4242',
}

RGB Array

[255, 228, 184], [183, 209, 176], [148, 181, 169], [184, 114, 114], [189, 66, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFE4B8, #B7D1B0, #94B5A9, #B87272, #BD4242 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: #ffe4b8; --color-2: #b7d1b0; --color-3: #94b5a9; --color-4: #b87272; --color-5: #bd4242. 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