← Back to Editor

#2C2125 · #FF372D · #CE312C · #7A4D50 · #4B5767

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#2C2125

Dark Violet · DarkSlateGray · Raspberry

HEX
#2C2125
RGB
rgb(44, 33, 37)
HSL
hsl(338, 14%, 15%)
HSB
hsb(338, 25%, 17%)
CMYK
cmyk(0%, 25%, 16%, 83%)
Oklch
oklch(26.2% 0.018 354.7)

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

#FF372D

Vermilion · OrangeRed · Passion Red

HEX
#FF372D
RGB
rgb(255, 55, 45)
HSL
hsl(3, 100%, 59%)
HSB
hsb(3, 82%, 100%)
CMYK
cmyk(0%, 78%, 82%, 0%)
Oklch
oklch(65.1% 0.235 28.6)

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

#CE312C

Vermilion · FireBrick · Passion Red

HEX
#CE312C
RGB
rgb(206, 49, 44)
HSL
hsl(2, 65%, 49%)
HSB
hsb(2, 79%, 81%)
CMYK
cmyk(0%, 76%, 79%, 19%)
Oklch
oklch(56.0% 0.194 27.5)

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

#7A4D50

Crimson · DimGray · Wine Red

HEX
#7A4D50
RGB
rgb(122, 77, 80)
HSL
hsl(356, 23%, 39%)
HSB
hsb(356, 37%, 48%)
CMYK
cmyk(0%, 37%, 34%, 52%)
Oklch
oklch(47.2% 0.061 15.3)

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

#4B5767

Indigo · DimGray · Prussian Blue

HEX
#4B5767
RGB
rgb(75, 87, 103)
HSL
hsl(214, 16%, 35%)
HSB
hsb(214, 27%, 40%)
CMYK
cmyk(27%, 16%, 0%, 60%)
Oklch
oklch(45.3% 0.030 255.7)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C2125
212C28

Analogous

2C212A
2C2125
2C2221

Triadic

2C2125
252C21
21252C

Split-Comp.

2C2125
212C22
212A2C

Tetradic

2C2125
2A2C21
212C28
22212C

Contrast Matrix WCAG 2.1 Contrast

2C2125
FF372D
CE312C
7A4D50
4B5767
—
4.3
AA Large
3.0
AA Large
2.2
Fail
2.1
Fail
4.3
AA Large
—
1.4
Fail
1.9
Fail
2.0
Fail
3.0
AA Large
1.4
Fail
—
1.4
Fail
1.4
Fail
2.2
Fail
1.9
Fail
1.4
Fail
—
1.1
Fail
2.1
Fail
2.0
Fail
1.4
Fail
1.1
Fail
—
White BG
15.5AAA
3.6AA Large
5.1AA
7.0AA
7.3AAA
Black BG
1.4Fail
5.8AA
4.1AA Large
3.0AA Large
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

272724
A8A72F
8A892D
67664F
505063

Deuteranopia

282924
B4C330
939F2E
696C4F
504F62

Tritanopia

2B2323
F53132
C62E2E
784F4F
4C605F

Achromatopsia

252525
727272
5F5F5F
5B5B5B
555555

Shades & Tints Shades & Tints

#2C2125

Dark
Light

#FF372D

Dark
Light

#CE312C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c2125;
  --color-2: #ff372d;
  --color-3: #ce312c;
  --color-4: #7a4d50;
  --color-5: #4b5767;
}

SCSS

$color-1: #2c2125;
$color-2: #ff372d;
$color-3: #ce312c;
$color-4: #7a4d50;
$color-5: #4b5767;

TAILWIND

colors: {
  'brand-1': '#2c2125',
  'brand-2': '#ff372d',
  'brand-3': '#ce312c',
  'brand-4': '#7a4d50',
  'brand-5': '#4b5767',
}

RGB Array

[44, 33, 37], [255, 55, 45], [206, 49, 44], [122, 77, 80], [75, 87, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #2C2125, #FF372D, #CE312C, #7A4D50, #4B5767 is ideal for: tech websites, dark mode UIs, game UIs, 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: #2c2125; --color-2: #ff372d; --color-3: #ce312c; --color-4: #7a4d50; --color-5: #4b5767. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 pastel-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