← Back to Editor

#F4DBE0 · #BAA3B5 · #816C86 · #443448 · #5A3E34

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F4DBE0

Peach Pink · Linen · Cherry Blossom

HEX
#F4DBE0
RGB
rgb(244, 219, 224)
HSL
hsl(348, 53%, 91%)
HSB
hsb(348, 10%, 96%)
CMYK
cmyk(0%, 10%, 8%, 4%)
Oklch
oklch(91.3% 0.028 4.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#BAA3B5

Mauve · DarkGray · Lilac Purple

HEX
#BAA3B5
RGB
rgb(186, 163, 181)
HSL
hsl(313, 14%, 68%)
HSB
hsb(313, 12%, 73%)
CMYK
cmyk(0%, 12%, 3%, 27%)
Oklch
oklch(74.1% 0.036 333.4)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#816C86

Dark Plum · Gray · Violet

HEX
#816C86
RGB
rgb(129, 108, 134)
HSL
hsl(288, 11%, 47%)
HSB
hsb(288, 19%, 53%)
CMYK
cmyk(4%, 19%, 0%, 47%)
Oklch
oklch(56.0% 0.047 319.7)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#443448

Dark Plum · DarkSlateGray · Eggplant

HEX
#443448
RGB
rgb(68, 52, 72)
HSL
hsl(288, 16%, 24%)
HSB
hsb(288, 28%, 28%)
CMYK
cmyk(6%, 28%, 0%, 72%)
Oklch
oklch(35.1% 0.040 319.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#5A3E34

Tangerine · DarkOliveGreen · Amber Brown

HEX
#5A3E34
RGB
rgb(90, 62, 52)
HSL
hsl(16, 27%, 28%)
HSB
hsb(16, 42%, 35%)
CMYK
cmyk(0%, 31%, 42%, 65%)
Oklch
oklch(39.3% 0.043 40.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4DBE0
DCF4EF

Analogous

F4DCED
F4DBE0
F4E3DC

Triadic

F4DBE0
E1F4DC
DCE1F4

Split-Comp.

F4DBE0
DCF4E3
DCEDF4

Tetradic

F4DBE0
EDF4DC
DCF4EF
E3DCF4

Contrast Matrix WCAG 2.1 Contrast

F4DBE0
BAA3B5
816C86
443448
5A3E34
—
1.8
Fail
3.6
AA Large
8.8
AAA
7.4
AAA
1.8
Fail
—
2.0
Fail
4.9
AA
4.1
AA Large
3.6
AA Large
2.0
Fail
—
2.4
Fail
2.0
Fail
8.8
AAA
4.9
AA
2.4
Fail
—
1.2
Fail
7.4
AAA
4.1
AA Large
2.0
Fail
1.2
Fail
—
White BG
1.3Fail
2.3Fail
4.7AA
11.5AAA
9.7AAA
Black BG
16.1AAA
9.0AAA
4.4AA Large
1.8Fail
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E9DF
B0B0B1
787880
3D3D43
4E4E36

Deuteranopia

EBEDDF
B1B3B0
797B7E
3E3F42
505237

Tritanopia

F3DEDE
B9ADAC
807B7A
433F3F
593839

Achromatopsia

E3E3E3
ACACAC
757575
3B3B3B
454545

Shades & Tints Shades & Tints

#F4DBE0

Dark
Light

#BAA3B5

Dark
Light

#816C86

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4dbe0;
  --color-2: #baa3b5;
  --color-3: #816c86;
  --color-4: #443448;
  --color-5: #5a3e34;
}

SCSS

$color-1: #f4dbe0;
$color-2: #baa3b5;
$color-3: #816c86;
$color-4: #443448;
$color-5: #5a3e34;

TAILWIND

colors: {
  'brand-1': '#f4dbe0',
  'brand-2': '#baa3b5',
  'brand-3': '#816c86',
  'brand-4': '#443448',
  'brand-5': '#5a3e34',
}

RGB Array

[244, 219, 224], [186, 163, 181], [129, 108, 134], [68, 52, 72], [90, 62, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4DBE0, #BAA3B5, #816C86, #443448, #5A3E34 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f4dbe0; --color-2: #baa3b5; --color-3: #816c86; --color-4: #443448; --color-5: #5a3e34. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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