← Back to Editor

#2F1A29 · #F5E1E2 · #CFD0DF · #AB91A7 · #70707D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2F1A29

Rose Purple · DarkSlateGray · Dark Purple

HEX
#2F1A29
RGB
rgb(47, 26, 41)
HSL
hsl(317, 29%, 14%)
HSB
hsb(317, 45%, 18%)
CMYK
cmyk(0%, 45%, 13%, 82%)
Oklch
oklch(25.2% 0.042 338.1)

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

#F5E1E2

Peach Pink · Linen · Cherry Blossom

HEX
#F5E1E2
RGB
rgb(245, 225, 226)
HSL
hsl(357, 50%, 92%)
HSB
hsb(357, 8%, 96%)
CMYK
cmyk(0%, 8%, 8%, 4%)
Oklch
oklch(92.6% 0.022 14.1)

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

#CFD0DF

Azure · LightGray · Sky Blue

HEX
#CFD0DF
RGB
rgb(207, 208, 223)
HSL
hsl(236, 20%, 84%)
HSB
hsb(236, 7%, 87%)
CMYK
cmyk(7%, 7%, 0%, 13%)
Oklch
oklch(86.1% 0.021 282.9)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#AB91A7

Mauve · DarkGray · Lilac Purple

HEX
#AB91A7
RGB
rgb(171, 145, 167)
HSL
hsl(309, 13%, 62%)
HSB
hsb(309, 15%, 67%)
CMYK
cmyk(0%, 15%, 2%, 33%)
Oklch
oklch(68.7% 0.044 331.2)

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

#70707D

Ink Gray · DimGray · Warm Gray

HEX
#70707D
RGB
rgb(112, 112, 125)
HSL
hsl(240, 5%, 46%)
HSB
hsb(240, 10%, 49%)
CMYK
cmyk(10%, 10%, 0%, 51%)
Oklch
oklch(55.0% 0.020 285.7)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F1A29
192E1F

Analogous

2A192E
2F1A29
2E191E

Triadic

2F1A29
282E19
19282E

Split-Comp.

2F1A29
1E2E19
192E2A

Tetradic

2F1A29
2E2A19
192E1F
191E2E

Contrast Matrix WCAG 2.1 Contrast

2F1A29
F5E1E2
CFD0DF
AB91A7
70707D
—
12.9
AAA
10.6
AAA
5.6
AA
3.3
AA Large
12.9
AAA
—
1.2
Fail
2.3
Fail
3.9
AA Large
10.6
AAA
1.2
Fail
—
1.9
Fail
3.2
AA Large
5.6
AA
2.3
Fail
1.9
Fail
—
1.7
Fail
3.3
AA Large
3.9
AA Large
3.2
AA Large
1.7
Fail
—
White BG
16.1AAA
1.3Fail
1.5Fail
2.9Fail
4.9AA
Black BG
1.3Fail
16.8AAA
13.7AAA
7.3AAA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

262625
ECECE2
CFCFDB
A0A0A2
70707A

Deuteranopia

272925
EEEFE2
CFCFDB
A1A3A0
707079

Tritanopia

2E2322
F4E2E2
CFD9D8
AA9D9D
707777

Achromatopsia

222222
E7E7E7
D1D1D1
9B9B9B
717171

Shades & Tints Shades & Tints

#2F1A29

Dark
Light

#F5E1E2

Dark
Light

#CFD0DF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f1a29;
  --color-2: #f5e1e2;
  --color-3: #cfd0df;
  --color-4: #ab91a7;
  --color-5: #70707d;
}

SCSS

$color-1: #2f1a29;
$color-2: #f5e1e2;
$color-3: #cfd0df;
$color-4: #ab91a7;
$color-5: #70707d;

TAILWIND

colors: {
  'brand-1': '#2f1a29',
  'brand-2': '#f5e1e2',
  'brand-3': '#cfd0df',
  'brand-4': '#ab91a7',
  'brand-5': '#70707d',
}

RGB Array

[47, 26, 41], [245, 225, 226], [207, 208, 223], [171, 145, 167], [112, 112, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F1A29, #F5E1E2, #CFD0DF, #AB91A7, #70707D 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: #2f1a29; --color-2: #f5e1e2; --color-3: #cfd0df; --color-4: #ab91a7; --color-5: #70707d. 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