#373A6B + #2A4F80 + #774E78 + #B55757 + #AB8B3F · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#373A6B

Indigo · DarkSlateGray · Prussian Blue

HEX

#373A6B

RGB

rgb(55, 58, 107)

HSL

hsl(237, 32%, 32%)

HSB

hsb(237, 49%, 42%)

CMYK

cmyk(49%, 46%, 0%, 58%)

Oklch

oklch(37.1% 0.083 278.9)

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

#2A4F80

Indigo · DarkSlateBlue · Prussian Blue

HEX

#2A4F80

RGB

rgb(42, 79, 128)

HSL

hsl(214, 51%, 33%)

HSB

hsb(214, 67%, 50%)

CMYK

cmyk(67%, 38%, 0%, 50%)

Oklch

oklch(42.5% 0.092 256.1)

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

#774E78

Dark Plum · DimGray · Eggplant

HEX

#774E78

RGB

rgb(119, 78, 120)

HSL

hsl(299, 21%, 39%)

HSB

hsb(299, 35%, 47%)

CMYK

cmyk(1%, 35%, 0%, 53%)

Oklch

oklch(48.5% 0.082 325.9)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#B55757

Crimson · Sienna · Passion Red

HEX

#B55757

RGB

rgb(181, 87, 87)

HSL

hsl(0, 39%, 53%)

HSB

hsb(0, 52%, 71%)

CMYK

cmyk(0%, 52%, 52%, 29%)

Oklch

oklch(57.2% 0.122 21.7)

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

#AB8B3F

Ochre · DarkGoldenRod · Honey Gold

HEX

#AB8B3F

RGB

rgb(171, 139, 63)

HSL

hsl(42, 46%, 46%)

HSB

hsb(42, 63%, 67%)

CMYK

cmyk(0%, 19%, 63%, 33%)

Oklch

oklch(65.1% 0.102 86.3)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

373A6B

6C6937

Analogous

37546C

373A6B

4F376C

Triadic

373A6B

6C373A

3A6C37

Split-Comp.

373A6B

6C4F37

546C37

Tetradic

373A6B

6C3754

6C6937

376C4F

Contrast Matrix WCAG 2.1 Contrast

373A6B	2A4F80	774E78	B55757	AB8B3F
—	1.3 Fail	1.6 Fail	2.3 Fail	3.3 AA Large
1.3 Fail	—	1.2 Fail	1.8 Fail	2.6 Fail
1.6 Fail	1.2 Fail	—	1.4 Fail	2.1 Fail
2.3 Fail	1.8 Fail	1.4 Fail	—	1.5 Fail
3.3 AA Large	2.6 Fail	2.1 Fail	1.5 Fail	—

White BG

10.6AAA

8.3AAA

6.7AA

4.7AA

3.2AA Large

Black BG

2.0Fail

2.5Fail

3.1AA Large

4.5AA Large

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

38385F

3A3A74

65656E

8C8B57

9D9D51

Deuteranopia

38385C

383571

686B6B

929957

9FA156

Tritanopia

375654

2C6B69

756664

B05757

A96063

Achromatopsia

3F3F3F

4A4A4A

5F5F5F

737373

8C8C8C

Shades & Tints Shades & Tints

#373A6B

Dark

Light

#2A4F80

Dark

Light

#774E78

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #373a6b;
  --color-2: #2a4f80;
  --color-3: #774e78;
  --color-4: #b55757;
  --color-5: #ab8b3f;
}

SCSS

$color-1: #373a6b;
$color-2: #2a4f80;
$color-3: #774e78;
$color-4: #b55757;
$color-5: #ab8b3f;

TAILWIND

colors: {
  'brand-1': '#373a6b',
  'brand-2': '#2a4f80',
  'brand-3': '#774e78',
  'brand-4': '#b55757',
  'brand-5': '#ab8b3f',
}

RGB Array

[55, 58, 107], [42, 79, 128], [119, 78, 120], [181, 87, 87], [171, 139, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #373A6B, #2A4F80, #774E78, #B55757, #AB8B3F 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: #373a6b; --color-2: #2a4f80; --color-3: #774e78; --color-4: #b55757; --color-5: #ab8b3f. 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