#573B3A + #BB2C26 + #93262C + #6F272B + #2A232A · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#573B3A

Crimson · DarkOliveGreen · Wine Red

HEX

#573B3A

RGB

rgb(87, 59, 58)

HSL

hsl(2, 20%, 28%)

HSB

hsb(2, 33%, 34%)

CMYK

cmyk(0%, 32%, 33%, 66%)

Oklch

oklch(38.4% 0.040 21.4)

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

#BB2C26

Vermilion · FireBrick · Passion Red

HEX

#BB2C26

RGB

rgb(187, 44, 38)

HSL

hsl(2, 66%, 44%)

HSB

hsb(2, 80%, 73%)

CMYK

cmyk(0%, 76%, 80%, 27%)

Oklch

oklch(52.2% 0.181 27.9)

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

#93262C

Crimson · Brown · Wine Red

HEX

#93262C

RGB

rgb(147, 38, 44)

HSL

hsl(357, 59%, 36%)

HSB

hsb(357, 74%, 58%)

CMYK

cmyk(0%, 74%, 70%, 42%)

Oklch

oklch(44.4% 0.144 22.5)

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

#6F272B

Crimson · Brown · Wine Red

HEX

#6F272B

RGB

rgb(111, 39, 43)

HSL

hsl(357, 48%, 29%)

HSB

hsb(357, 65%, 44%)

CMYK

cmyk(0%, 65%, 61%, 56%)

Oklch

oklch(38.1% 0.102 20.1)

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

#2A232A

Rose Purple · DarkSlateGray · Dark Stone

HEX

#2A232A

RGB

rgb(42, 35, 42)

HSL

hsl(300, 9%, 15%)

HSB

hsb(300, 17%, 16%)

CMYK

cmyk(0%, 17%, 0%, 84%)

Oklch

oklch(26.7% 0.016 326.0)

Traditional「Rose Purple」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

573B3A

395556

Analogous

563946

573B3A

564839

Triadic

573B3A

39563A

3A3956

Split-Comp.

573B3A

395648

394656

Tetradic

573B3A

465639

395556

483956

Contrast Matrix WCAG 2.1 Contrast

573B3A	BB2C26	93262C	6F272B	2A232A
—	1.7 Fail	1.2 Fail	1.0 Fail	1.5 Fail
1.7 Fail	—	1.4 Fail	1.7 Fail	2.6 Fail
1.2 Fail	1.4 Fail	—	1.3 Fail	1.9 Fail
1.0 Fail	1.7 Fail	1.3 Fail	—	1.5 Fail
1.5 Fail	2.6 Fail	1.9 Fail	1.5 Fail	—

White BG

10.0AAA

6.0AA

8.2AAA

10.5AAA

15.3AAA

Black BG

2.1Fail

3.5AA Large

2.6Fail

2.0Fail

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B3A

7D7C27

64632B

504F2A

272728

Deuteranopia

4D4F3A

859028

6A722A

54592A

272828

Tritanopia

563A3A

B42929

8E2929

6B2929

2A2727

Achromatopsia

434343

565656

474747

3D3D3D

262626

Shades & Tints Shades & Tints

#573B3A

Dark

Light

#BB2C26

Dark

Light

#93262C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #573b3a;
  --color-2: #bb2c26;
  --color-3: #93262c;
  --color-4: #6f272b;
  --color-5: #2a232a;
}

SCSS

$color-1: #573b3a;
$color-2: #bb2c26;
$color-3: #93262c;
$color-4: #6f272b;
$color-5: #2a232a;

TAILWIND

colors: {
  'brand-1': '#573b3a',
  'brand-2': '#bb2c26',
  'brand-3': '#93262c',
  'brand-4': '#6f272b',
  'brand-5': '#2a232a',
}

RGB Array

[87, 59, 58], [187, 44, 38], [147, 38, 44], [111, 39, 43], [42, 35, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #573B3A, #BB2C26, #93262C, #6F272B, #2A232A is ideal for: tech websites, dark mode UIs, game UIs. 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: #573b3a; --color-2: #bb2c26; --color-3: #93262c; --color-4: #6f272b; --color-5: #2a232a. 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. 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