#FA3E83 + #C44D91 + #8E5D9F + #586CAD + #227CBB · 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

#FA3E83

Rouge · DeepPink · Rose Pink

HEX

#FA3E83

RGB

rgb(250, 62, 131)

HSL

hsl(338, 95%, 61%)

HSB

hsb(338, 75%, 98%)

CMYK

cmyk(0%, 75%, 48%, 2%)

Oklch

oklch(66.3% 0.226 4.0)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#C44D91

Rose Purple · MediumVioletRed · Rose Pink

HEX

#C44D91

RGB

rgb(196, 77, 145)

HSL

hsl(326, 50%, 54%)

HSB

hsb(326, 61%, 77%)

CMYK

cmyk(0%, 61%, 26%, 23%)

Oklch

oklch(59.8% 0.168 348.0)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#8E5D9F

Dark Plum · SlateGray · Violet

HEX

#8E5D9F

RGB

rgb(142, 93, 159)

HSL

hsl(285, 26%, 49%)

HSB

hsb(285, 42%, 62%)

CMYK

cmyk(11%, 42%, 0%, 38%)

Oklch

oklch(55.7% 0.113 317.0)

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

#586CAD

Azure · SteelBlue · Navy Blue

HEX

#586CAD

RGB

rgb(88, 108, 173)

HSL

hsl(226, 34%, 51%)

HSB

hsb(226, 49%, 68%)

CMYK

cmyk(49%, 38%, 0%, 32%)

Oklch

oklch(54.5% 0.105 269.7)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#227CBB

Lake Blue · SteelBlue · Navy Blue

HEX

#227CBB

RGB

rgb(34, 124, 187)

HSL

hsl(205, 69%, 43%)

HSB

hsb(205, 82%, 73%)

CMYK

cmyk(82%, 34%, 0%, 27%)

Oklch

oklch(56.6% 0.127 244.7)

Traditional「Lake Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA3E83

3DFAB5

Analogous

FA3DE1

FA3E83

FA563D

Triadic

FA3E83

82FA3D

3D82FA

Split-Comp.

FA3E83

3DFA56

3DE1FA

Tetradic

FA3E83

E1FA3D

3DFAB5

563DFA

Contrast Matrix WCAG 2.1 Contrast

FA3E83	C44D91	8E5D9F	586CAD	227CBB
—	1.3 Fail	1.4 Fail	1.5 Fail	1.3 Fail
1.3 Fail	—	1.1 Fail	1.2 Fail	1.0 Fail
1.4 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
1.5 Fail	1.2 Fail	1.0 Fail	—	1.1 Fail
1.3 Fail	1.0 Fail	1.1 Fail	1.1 Fail	—

White BG

3.5AA Large

4.4AA Large

5.0AA

4.5AA Large

Black BG

6.1AA

4.8AA

4.2AA Large

4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A772

908F81

79788F

61619D

494AAC

Deuteranopia

B4C26E

97A07D

7C7F8B

605E9A

443DA8

Tritanopia

F16562

BE7471

8C8280

59918E

27A09D

Achromatopsia

7E7E7E

787878

737373

6D6D6D

686868

Shades & Tints Shades & Tints

#FA3E83

Dark

Light

#C44D91

Dark

Light

#8E5D9F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa3e83;
  --color-2: #c44d91;
  --color-3: #8e5d9f;
  --color-4: #586cad;
  --color-5: #227cbb;
}

SCSS

$color-1: #fa3e83;
$color-2: #c44d91;
$color-3: #8e5d9f;
$color-4: #586cad;
$color-5: #227cbb;

TAILWIND

colors: {
  'brand-1': '#fa3e83',
  'brand-2': '#c44d91',
  'brand-3': '#8e5d9f',
  'brand-4': '#586cad',
  'brand-5': '#227cbb',
}

RGB Array

[250, 62, 131], [196, 77, 145], [142, 93, 159], [88, 108, 173], [34, 124, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #FA3E83, #C44D91, #8E5D9F, #586CAD, #227CBB 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: #fa3e83; --color-2: #c44d91; --color-3: #8e5d9f; --color-4: #586cad; --color-5: #227cbb. 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