← Back to Editor

#F5F0F3 · #DBD0D7 · #C4A443 · #B06D95 · #C9601E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F5F0F3

Mauve · SeaShell · Cherry Blossom

HEX
#F5F0F3
RGB
rgb(245, 240, 243)
HSL
hsl(324, 20%, 95%)
HSB
hsb(324, 2%, 96%)
CMYK
cmyk(0%, 2%, 1%, 4%)
Oklch
oklch(96.0% 0.007 340.4)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#DBD0D7

Mauve · LightGray · Cherry Blossom

HEX
#DBD0D7
RGB
rgb(219, 208, 215)
HSL
hsl(322, 13%, 84%)
HSB
hsb(322, 5%, 86%)
CMYK
cmyk(0%, 5%, 2%, 14%)
Oklch
oklch(86.8% 0.015 339.0)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#C4A443

Ginger · GoldenRod · Sunflower

HEX
#C4A443
RGB
rgb(196, 164, 67)
HSL
hsl(45, 52%, 52%)
HSB
hsb(45, 66%, 77%)
CMYK
cmyk(0%, 16%, 66%, 23%)
Oklch
oklch(72.9% 0.121 90.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#B06D95

Rose Purple · Gray · Rose Pink

HEX
#B06D95
RGB
rgb(176, 109, 149)
HSL
hsl(324, 30%, 56%)
HSB
hsb(324, 38%, 69%)
CMYK
cmyk(0%, 38%, 15%, 31%)
Oklch
oklch(62.0% 0.100 343.8)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#C9601E

Tangerine · Chocolate · Amber Brown

HEX
#C9601E
RGB
rgb(201, 96, 30)
HSL
hsl(23, 74%, 45%)
HSB
hsb(23, 85%, 79%)
CMYK
cmyk(0%, 52%, 85%, 21%)
Oklch
oklch(60.7% 0.153 47.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F0F3
F0F5F2

Analogous

F4F0F5
F5F0F3
F5F0F0

Triadic

F5F0F3
F3F5F0
F0F3F5

Split-Comp.

F5F0F3
F0F5F0
F0F5F4

Tetradic

F5F0F3
F5F4F0
F0F5F2
F0F0F5

Contrast Matrix WCAG 2.1 Contrast

F5F0F3
DBD0D7
C4A443
B06D95
C9601E
—
1.3
Fail
2.1
Fail
3.4
AA Large
3.6
AA Large
1.3
Fail
—
1.6
Fail
2.6
Fail
2.7
Fail
2.1
Fail
1.6
Fail
—
1.6
Fail
1.7
Fail
3.4
AA Large
2.6
Fail
1.6
Fail
—
1.1
Fail
3.6
AA Large
2.7
Fail
1.7
Fail
1.1
Fail
—
White BG
1.1Fail
1.5Fail
2.4Fail
3.8AA Large
4.1AA Large
Black BG
18.6AAA
14.0AAA
8.7AAA
5.5AA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3F2
D6D6D5
B6B65A
93928B
9C9B2E

Deuteranopia

F3F4F2
D7D8D5
B8BA60
979C89
A2AA32

Tritanopia

F5F2F2
DAD4D4
C26D71
AD8482
C43B3D

Achromatopsia

F2F2F2
D4D4D4
A3A3A3
868686
787878

Shades & Tints Shades & Tints

#F5F0F3

Dark
Light

#DBD0D7

Dark
Light

#C4A443

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f0f3;
  --color-2: #dbd0d7;
  --color-3: #c4a443;
  --color-4: #b06d95;
  --color-5: #c9601e;
}

SCSS

$color-1: #f5f0f3;
$color-2: #dbd0d7;
$color-3: #c4a443;
$color-4: #b06d95;
$color-5: #c9601e;

TAILWIND

colors: {
  'brand-1': '#f5f0f3',
  'brand-2': '#dbd0d7',
  'brand-3': '#c4a443',
  'brand-4': '#b06d95',
  'brand-5': '#c9601e',
}

RGB Array

[245, 240, 243], [219, 208, 215], [196, 164, 67], [176, 109, 149], [201, 96, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5F0F3, #DBD0D7, #C4A443, #B06D95, #C9601E is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f5f0f3; --color-2: #dbd0d7; --color-3: #c4a443; --color-4: #b06d95; --color-5: #c9601e. 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. 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. 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