← Back to Editor

#F0C7C1 · #CCA2AB · #B1869F · #8D6176 · #663F58

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

#F0C7C1

Peach Pink · Pink · Cherry Blossom

HEX
#F0C7C1
RGB
rgb(240, 199, 193)
HSL
hsl(8, 61%, 85%)
HSB
hsb(8, 20%, 94%)
CMYK
cmyk(0%, 17%, 20%, 6%)
Oklch
oklch(86.3% 0.048 27.8)

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

#CCA2AB

Peach Pink · DarkGray · Coral Red

HEX
#CCA2AB
RGB
rgb(204, 162, 171)
HSL
hsl(347, 29%, 72%)
HSB
hsb(347, 21%, 80%)
CMYK
cmyk(0%, 21%, 16%, 20%)
Oklch
oklch(75.3% 0.051 4.0)

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

#B1869F

Mauve · DarkGray · Rose Pink

HEX
#B1869F
RGB
rgb(177, 134, 159)
HSL
hsl(325, 22%, 61%)
HSB
hsb(325, 24%, 69%)
CMYK
cmyk(0%, 24%, 10%, 31%)
Oklch
oklch(66.9% 0.062 343.2)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#8D6176

Dark Violet · Gray · Camellia

HEX
#8D6176
RGB
rgb(141, 97, 118)
HSL
hsl(331, 18%, 47%)
HSB
hsb(331, 31%, 55%)
CMYK
cmyk(0%, 31%, 16%, 45%)
Oklch
oklch(54.6% 0.064 349.3)

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

#663F58

Rose Purple · DimGray · Camellia

HEX
#663F58
RGB
rgb(102, 63, 88)
HSL
hsl(322, 24%, 32%)
HSB
hsb(322, 38%, 40%)
CMYK
cmyk(0%, 38%, 14%, 60%)
Oklch
oklch(42.2% 0.065 341.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0C7C1
C1EAF0

Analogous

F0C1D3
F0C7C1
F0DFC1

Triadic

F0C7C1
C1F0C8
C8C1F0

Split-Comp.

F0C7C1
C1F0DF
C1D3F0

Tetradic

F0C7C1
D3F0C1
C1EAF0
DFC1F0

Contrast Matrix WCAG 2.1 Contrast

F0C7C1
CCA2AB
B1869F
8D6176
663F58
—
1.5
Fail
2.0
Fail
3.3
AA Large
5.6
AA
1.5
Fail
—
1.4
Fail
2.3
Fail
3.9
AA Large
2.0
Fail
1.4
Fail
—
1.7
Fail
2.8
Fail
3.3
AA Large
2.3
Fail
1.7
Fail
—
1.7
Fail
5.6
AA
3.9
AA Large
2.8
Fail
1.7
Fail
—
White BG
1.5Fail
2.3Fail
3.1AA Large
5.1AA
8.7AAA
Black BG
13.6AAA
9.3AAA
6.8AA
4.1AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEC2
BAB9A9
9E9E99
7A7A71
555552

Deuteranopia

E1E4C3
BCBFA8
A1A498
7D8070
575A51

Tritanopia

EEC4C4
CAA7A7
AF9493
8B6D6C
644D4C

Achromatopsia

D3D3D3
B0B0B0
969696
717171
4E4E4E

Shades & Tints Shades & Tints

#F0C7C1

Dark
Light

#CCA2AB

Dark
Light

#B1869F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0c7c1;
  --color-2: #cca2ab;
  --color-3: #b1869f;
  --color-4: #8d6176;
  --color-5: #663f58;
}

SCSS

$color-1: #f0c7c1;
$color-2: #cca2ab;
$color-3: #b1869f;
$color-4: #8d6176;
$color-5: #663f58;

TAILWIND

colors: {
  'brand-1': '#f0c7c1',
  'brand-2': '#cca2ab',
  'brand-3': '#b1869f',
  'brand-4': '#8d6176',
  'brand-5': '#663f58',
}

RGB Array

[240, 199, 193], [204, 162, 171], [177, 134, 159], [141, 97, 118], [102, 63, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0C7C1, #CCA2AB, #B1869F, #8D6176, #663F58 is ideal for: 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: #f0c7c1; --color-2: #cca2ab; --color-3: #b1869f; --color-4: #8d6176; --color-5: #663f58. 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. 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