← Back to Editor

#542437 · #C02942 · #CDB380 · #036564 · #033649

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

#542437

Dark Violet · DarkSlateGray · Raspberry

HEX
#542437
RGB
rgb(84, 36, 55)
HSL
hsl(336, 40%, 24%)
HSB
hsb(336, 57%, 33%)
CMYK
cmyk(0%, 57%, 35%, 67%)
Oklch
oklch(33.4% 0.075 357.0)

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

#C02942

Vermilion · Crimson · Passion Red

HEX
#C02942
RGB
rgb(192, 41, 66)
HSL
hsl(350, 65%, 46%)
HSB
hsb(350, 79%, 75%)
CMYK
cmyk(0%, 79%, 66%, 25%)
Oklch
oklch(53.2% 0.185 17.8)

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

#CDB380

Ginger · Tan · Sunflower

HEX
#CDB380
RGB
rgb(205, 179, 128)
HSL
hsl(40, 44%, 65%)
HSB
hsb(40, 38%, 80%)
CMYK
cmyk(0%, 13%, 38%, 20%)
Oklch
oklch(77.7% 0.074 83.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#036564

Mineral Blue · Teal · Peacock Green

HEX
#036564
RGB
rgb(3, 101, 100)
HSL
hsl(179, 94%, 20%)
HSB
hsb(179, 97%, 40%)
CMYK
cmyk(97%, 0%, 1%, 60%)
Oklch
oklch(45.9% 0.078 193.6)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#033649

Lake Blue · DarkSlateGray · Peacock Green

HEX
#033649
RGB
rgb(3, 54, 73)
HSL
hsl(196, 92%, 15%)
HSB
hsb(196, 96%, 29%)
CMYK
cmyk(96%, 26%, 0%, 71%)
Oklch
oklch(31.2% 0.060 229.6)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

542437
255642

Analogous

562551
542437
562A25

Triadic

542437
385625
253856

Split-Comp.

542437
25562A
255156

Tetradic

542437
515625
255642
2A2556

Contrast Matrix WCAG 2.1 Contrast

542437
C02942
CDB380
036564
033649
—
2.2
Fail
6.1
AA
1.8
Fail
1.0
Fail
2.2
Fail
—
2.8
Fail
1.2
Fail
2.2
Fail
6.1
AA
2.8
Fail
—
3.4
AA Large
6.4
AA
1.8
Fail
1.2
Fail
3.4
AA Large
—
1.9
Fail
1.0
Fail
2.2
Fail
6.4
AA
1.9
Fail
—
White BG
12.5AAA
5.8AA
2.0Fail
6.9AA
12.9AAA
Black BG
1.7Fail
3.6AA Large
10.4AAA
3.0AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F32
7F7D3C
C2C28C
2D2E64
191A44

Deuteranopia

424631
87933A
C3C58F
282064
161243

Tritanopia

522F2E
B83736
CC9698
086464
064140

Achromatopsia

353535
595959
B5B5B5
484848
292929

Shades & Tints Shades & Tints

#542437

Dark
Light

#C02942

Dark
Light

#CDB380

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #542437;
  --color-2: #c02942;
  --color-3: #cdb380;
  --color-4: #036564;
  --color-5: #033649;
}

SCSS

$color-1: #542437;
$color-2: #c02942;
$color-3: #cdb380;
$color-4: #036564;
$color-5: #033649;

TAILWIND

colors: {
  'brand-1': '#542437',
  'brand-2': '#c02942',
  'brand-3': '#cdb380',
  'brand-4': '#036564',
  'brand-5': '#033649',
}

RGB Array

[84, 36, 55], [192, 41, 66], [205, 179, 128], [3, 101, 100], [3, 54, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #542437, #C02942, #CDB380, #036564, #033649 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #542437; --color-2: #c02942; --color-3: #cdb380; --color-4: #036564; --color-5: #033649. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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