← Back to Editor

#3C1F2B · #B7767B · #F4D3CE · #F2F2F0 · #C1C1B7

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

#3C1F2B

Dark Violet · DarkSlateGray · Raspberry

HEX
#3C1F2B
RGB
rgb(60, 31, 43)
HSL
hsl(335, 32%, 18%)
HSB
hsb(335, 48%, 24%)
CMYK
cmyk(0%, 48%, 28%, 76%)
Oklch
oklch(28.3% 0.048 354.3)

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

#B7767B

Crimson · Gray · Passion Red

HEX
#B7767B
RGB
rgb(183, 118, 123)
HSL
hsl(355, 31%, 59%)
HSB
hsb(355, 36%, 72%)
CMYK
cmyk(0%, 36%, 33%, 28%)
Oklch
oklch(63.5% 0.082 14.6)

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

#F4D3CE

Peach Pink · Pink · Cherry Blossom

HEX
#F4D3CE
RGB
rgb(244, 211, 206)
HSL
hsl(8, 63%, 88%)
HSB
hsb(8, 16%, 96%)
CMYK
cmyk(0%, 14%, 16%, 4%)
Oklch
oklch(89.3% 0.038 28.1)

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

#F2F2F0

Plain White · Linen · Cloud White

HEX
#F2F2F0
RGB
rgb(242, 242, 240)
HSL
hsl(60, 7%, 95%)
HSB
hsb(60, 1%, 95%)
CMYK
cmyk(0%, 0%, 1%, 5%)
Oklch
oklch(96.1% 0.003 106.4)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

#C1C1B7

Silver Gray · Silver · Pearl Gray

HEX
#C1C1B7
RGB
rgb(193, 193, 183)
HSL
hsl(60, 7%, 74%)
HSB
hsb(60, 5%, 76%)
CMYK
cmyk(0%, 0%, 5%, 24%)
Oklch
oklch(80.8% 0.014 106.7)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C1F2B
1F3D30

Analogous

3D1F3A
3C1F2B
3D221F

Triadic

3C1F2B
2B3D1F
1F2B3D

Split-Comp.

3C1F2B
1F3D22
1F3A3D

Tetradic

3C1F2B
3A3D1F
1F3D30
221F3D

Contrast Matrix WCAG 2.1 Contrast

3C1F2B
B7767B
F4D3CE
F2F2F0
C1C1B7
—
4.1
AA Large
10.6
AAA
13.2
AAA
8.1
AAA
4.1
AA Large
—
2.6
Fail
3.2
AA Large
2.0
Fail
10.6
AAA
2.6
Fail
—
1.2
Fail
1.3
Fail
13.2
AAA
3.2
AA Large
1.2
Fail
—
1.6
Fail
8.1
AAA
2.0
Fail
1.3
Fail
1.6
Fail
—
White BG
14.8AAA
3.6AA Large
1.4Fail
1.1Fail
1.8Fail
Black BG
1.4Fail
5.9AA
15.1AAA
18.7AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F28
9B9A7A
E6E5CF
F2F2F0
C1C1B9

Deuteranopia

313327
9FA47A
E8EAD0
F2F2F1
C1C1BA

Tritanopia

3B2625
B47979
F2D0D0
F2F1F1
C1BBBC

Achromatopsia

292929
8A8A8A
DCDCDC
F2F2F2
C0C0C0

Shades & Tints Shades & Tints

#3C1F2B

Dark
Light

#B7767B

Dark
Light

#F4D3CE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c1f2b;
  --color-2: #b7767b;
  --color-3: #f4d3ce;
  --color-4: #f2f2f0;
  --color-5: #c1c1b7;
}

SCSS

$color-1: #3c1f2b;
$color-2: #b7767b;
$color-3: #f4d3ce;
$color-4: #f2f2f0;
$color-5: #c1c1b7;

TAILWIND

colors: {
  'brand-1': '#3c1f2b',
  'brand-2': '#b7767b',
  'brand-3': '#f4d3ce',
  'brand-4': '#f2f2f0',
  'brand-5': '#c1c1b7',
}

RGB Array

[60, 31, 43], [183, 118, 123], [244, 211, 206], [242, 242, 240], [193, 193, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C1F2B, #B7767B, #F4D3CE, #F2F2F0, #C1C1B7 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #3c1f2b; --color-2: #b7767b; --color-3: #f4d3ce; --color-4: #f2f2f0; --color-5: #c1c1b7. 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 beauty, lifestyle, arts 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