#5F51A7 + #526A9B + #997C8E + #D48E8F + #F0BF99 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5F51A7

Deep Indigo · SlateBlue · Navy Blue

HEX

#5F51A7

RGB

rgb(95, 81, 167)

HSL

hsl(250, 35%, 49%)

HSB

hsb(250, 51%, 65%)

CMYK

cmyk(43%, 51%, 0%, 35%)

Oklch

oklch(49.2% 0.133 288.0)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#526A9B

Indigo · SteelBlue · Navy Blue

HEX

#526A9B

RGB

rgb(82, 106, 155)

HSL

hsl(220, 31%, 46%)

HSB

hsb(220, 47%, 61%)

CMYK

cmyk(47%, 32%, 0%, 39%)

Oklch

oklch(52.7% 0.083 263.8)

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

#997C8E

Rose Purple · Gray · Rose Pink

HEX

#997C8E

RGB

rgb(153, 124, 142)

HSL

hsl(323, 12%, 54%)

HSB

hsb(323, 19%, 60%)

CMYK

cmyk(0%, 19%, 7%, 40%)

Oklch

oklch(61.9% 0.044 340.8)

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

#D48E8F

Peach Pink · DarkSalmon · Coral Red

HEX

#D48E8F

RGB

rgb(212, 142, 143)

HSL

hsl(359, 45%, 69%)

HSB

hsb(359, 33%, 83%)

CMYK

cmyk(0%, 33%, 33%, 17%)

Oklch

oklch(71.7% 0.086 18.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F0BF99

Apricot · BurlyWood · Peach Orange

HEX

#F0BF99

RGB

rgb(240, 191, 153)

HSL

hsl(26, 74%, 77%)

HSB

hsb(26, 36%, 94%)

CMYK

cmyk(0%, 20%, 36%, 6%)

Oklch

oklch(83.9% 0.076 59.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F51A7

9AA951

Analogous

516EA9

5F51A7

8C51A9

Triadic

5F51A7

A96051

51A960

Split-Comp.

5F51A7

A98C51

6EA951

Tetradic

5F51A7

A9516E

9AA951

51A98C

Contrast Matrix WCAG 2.1 Contrast

5F51A7	526A9B	997C8E	D48E8F	F0BF99
—	1.2 Fail	1.7 Fail	2.5 Fail	3.9 AA Large
1.2 Fail	—	1.4 Fail	2.1 Fail	3.2 AA Large
1.7 Fail	1.4 Fail	—	1.4 Fail	2.2 Fail
2.5 Fail	2.1 Fail	1.4 Fail	—	1.6 Fail
3.9 AA Large	3.2 AA Large	2.2 Fail	1.6 Fail	—

White BG

6.5AA

5.4AA

3.7AA Large

2.6Fail

1.7Fail

Black BG

3.2AA Large

3.9AA Large

5.6AA

8.1AAA

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

595992

5C5D8F

8C8C8A

B6B58F

DBDAA2

Deuteranopia

5A5B8D

5B598C

8E9089

BABF8F

DEE1A4

Tritanopia

5E827E

538684

988685

D08F8F

EEA9AB

Achromatopsia

5F5F5F

686868

878787

A3A3A3

C9C9C9

Shades & Tints Shades & Tints

#5F51A7

Dark

Light

#526A9B

Dark

Light

#997C8E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f51a7;
  --color-2: #526a9b;
  --color-3: #997c8e;
  --color-4: #d48e8f;
  --color-5: #f0bf99;
}

SCSS

$color-1: #5f51a7;
$color-2: #526a9b;
$color-3: #997c8e;
$color-4: #d48e8f;
$color-5: #f0bf99;

TAILWIND

colors: {
  'brand-1': '#5f51a7',
  'brand-2': '#526a9b',
  'brand-3': '#997c8e',
  'brand-4': '#d48e8f',
  'brand-5': '#f0bf99',
}

RGB Array

[95, 81, 167], [82, 106, 155], [153, 124, 142], [212, 142, 143], [240, 191, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F51A7, #526A9B, #997C8E, #D48E8F, #F0BF99 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: #5f51a7; --color-2: #526a9b; --color-3: #997c8e; --color-4: #d48e8f; --color-5: #f0bf99. 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 general-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