← Back to Editor

#631137 · #9B2F46 · #A84343 · #CC9A5F · #DDAF61

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#631137

Dark Violet · Maroon · Raspberry

HEX
#631137
RGB
rgb(99, 17, 55)
HSL
hsl(332, 71%, 23%)
HSB
hsb(332, 83%, 39%)
CMYK
cmyk(0%, 83%, 44%, 61%)
Oklch
oklch(33.7% 0.119 358.0)

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

#9B2F46

Crimson · Brown · Wine Red

HEX
#9B2F46
RGB
rgb(155, 47, 70)
HSL
hsl(347, 53%, 40%)
HSB
hsb(347, 70%, 61%)
CMYK
cmyk(0%, 70%, 55%, 39%)
Oklch
oklch(47.4% 0.143 12.0)

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

#A84343

Crimson · Sienna · Passion Red

HEX
#A84343
RGB
rgb(168, 67, 67)
HSL
hsl(0, 43%, 46%)
HSB
hsb(0, 60%, 66%)
CMYK
cmyk(0%, 60%, 60%, 34%)
Oklch
oklch(51.9% 0.134 22.9)

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

#CC9A5F

Ginger · DarkSalmon · Warm Sun

HEX
#CC9A5F
RGB
rgb(204, 154, 95)
HSL
hsl(32, 52%, 59%)
HSB
hsb(32, 53%, 80%)
CMYK
cmyk(0%, 25%, 53%, 20%)
Oklch
oklch(72.1% 0.097 69.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#DDAF61

Ginger · SandyBrown · Warm Sun

HEX
#DDAF61
RGB
rgb(221, 175, 97)
HSL
hsl(38, 65%, 62%)
HSB
hsb(38, 56%, 87%)
CMYK
cmyk(0%, 21%, 56%, 13%)
Oklch
oklch(78.0% 0.110 79.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

631137
11643D

Analogous

641162
631137
641411

Triadic

631137
386411
113864

Split-Comp.

631137
116414
116264

Tetradic

631137
626411
11643D
141164

Contrast Matrix WCAG 2.1 Contrast

631137
9B2F46
A84343
CC9A5F
DDAF61
—
1.7
Fail
2.1
Fail
5.0
AA
6.2
AA
1.7
Fail
—
1.2
Fail
2.9
Fail
3.6
AA Large
2.1
Fail
1.2
Fail
—
2.4
Fail
2.9
Fail
5.0
AA
2.9
Fail
2.4
Fail
—
1.2
Fail
6.2
AA
3.6
AA Large
2.9
Fail
1.2
Fail
—
White BG
12.6AAA
7.3AAA
5.9AA
2.5Fail
2.0Fail
Black BG
1.7Fail
2.9Fail
3.5AA Large
8.4AAA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F2E
6C6B40
7C7B43
B6B66D
C9C974

Deuteranopia

444A2C
737B3F
828A43
B9BD71
CCCF78

Tritanopia

5F2725
963C3B
A34343
C9797B
DB8386

Achromatopsia

2E2E2E
525252
616161
A2A2A2
B4B4B4

Shades & Tints Shades & Tints

#631137

Dark
Light

#9B2F46

Dark
Light

#A84343

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #631137;
  --color-2: #9b2f46;
  --color-3: #a84343;
  --color-4: #cc9a5f;
  --color-5: #ddaf61;
}

SCSS

$color-1: #631137;
$color-2: #9b2f46;
$color-3: #a84343;
$color-4: #cc9a5f;
$color-5: #ddaf61;

TAILWIND

colors: {
  'brand-1': '#631137',
  'brand-2': '#9b2f46',
  'brand-3': '#a84343',
  'brand-4': '#cc9a5f',
  'brand-5': '#ddaf61',
}

RGB Array

[99, 17, 55], [155, 47, 70], [168, 67, 67], [204, 154, 95], [221, 175, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #631137, #9B2F46, #A84343, #CC9A5F, #DDAF61 is ideal for: corporate websites, product showcases, portfolios. 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: #631137; --color-2: #9b2f46; --color-3: #a84343; --color-4: #cc9a5f; --color-5: #ddaf61. 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. 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