#B22F97 + #6759A6 + #36A2C6 + #81BBBC + #DFBFA6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B22F97

Rose Purple · MediumVioletRed · Violet

HEX

#B22F97

RGB

rgb(178, 47, 151)

HSL

hsl(312, 58%, 44%)

HSB

hsb(312, 74%, 70%)

CMYK

cmyk(0%, 74%, 15%, 30%)

Oklch

oklch(54.2% 0.199 337.6)

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

#6759A6

Deep Indigo · SlateBlue · Navy Blue

HEX

#6759A6

RGB

rgb(103, 89, 166)

HSL

hsl(251, 30%, 50%)

HSB

hsb(251, 46%, 65%)

CMYK

cmyk(38%, 46%, 0%, 35%)

Oklch

oklch(51.4% 0.119 289.9)

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

#36A2C6

Lake Blue · LightSeaGreen · Mint Ice

HEX

#36A2C6

RGB

rgb(54, 162, 198)

HSL

hsl(195, 57%, 49%)

HSB

hsb(195, 73%, 78%)

CMYK

cmyk(73%, 18%, 0%, 22%)

Oklch

oklch(66.7% 0.109 224.5)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#81BBBC

Sky Blue · MediumAquaMarine · Lake Green

HEX

#81BBBC

RGB

rgb(129, 187, 188)

HSL

hsl(181, 31%, 62%)

HSB

hsb(181, 31%, 74%)

CMYK

cmyk(31%, 1%, 0%, 26%)

Oklch

oklch(75.3% 0.060 197.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#DFBFA6

Apricot · Tan · Peach Orange

HEX

#DFBFA6

RGB

rgb(223, 191, 166)

HSL

hsl(26, 47%, 76%)

HSB

hsb(26, 26%, 87%)

CMYK

cmyk(0%, 14%, 26%, 13%)

Oklch

oklch(82.6% 0.050 60.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B22F97

2FB149

Analogous

8A2FB1

B22F97

B12F56

Triadic

B22F97

97B12F

2F97B1

Split-Comp.

B22F97

56B12F

2FB18A

Tetradic

B22F97

B18A2F

2FB149

2F56B1

Contrast Matrix WCAG 2.1 Contrast

B22F97	6759A6	36A2C6	81BBBC	DFBFA6
—	1.1 Fail	1.9 Fail	2.6 Fail	3.2 AA Large
1.1 Fail	—	2.0 Fail	2.7 Fail	3.4 AA Large
1.9 Fail	2.0 Fail	—	1.4 Fail	1.7 Fail
2.6 Fail	2.7 Fail	1.4 Fail	—	1.2 Fail
3.2 AA Large	3.4 AA Large	1.7 Fail	1.2 Fail	—

White BG

5.6AA

5.9AA

2.9Fail

2.1Fail

1.7Fail

Black BG

3.7AA Large

3.6AA Large

7.1AAA

9.8AAA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

79787E

616193

6566BD

9A9BBC

D1D1AC

Deuteranopia

818B78

62638F

5F56BB

9792BC

D3D5AE

Tritanopia

AB6A66

668581

3BB6B5

84BCBC

DDB1B2

Achromatopsia

626262

666666

868686

AAAAAA

C6C6C6

Shades & Tints Shades & Tints

#B22F97

Dark

Light

#6759A6

Dark

Light

#36A2C6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b22f97;
  --color-2: #6759a6;
  --color-3: #36a2c6;
  --color-4: #81bbbc;
  --color-5: #dfbfa6;
}

SCSS

$color-1: #b22f97;
$color-2: #6759a6;
$color-3: #36a2c6;
$color-4: #81bbbc;
$color-5: #dfbfa6;

TAILWIND

colors: {
  'brand-1': '#b22f97',
  'brand-2': '#6759a6',
  'brand-3': '#36a2c6',
  'brand-4': '#81bbbc',
  'brand-5': '#dfbfa6',
}

RGB Array

[178, 47, 151], [103, 89, 166], [54, 162, 198], [129, 187, 188], [223, 191, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B22F97, #6759A6, #36A2C6, #81BBBC, #DFBFA6 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: #b22f97; --color-2: #6759a6; --color-3: #36a2c6; --color-4: #81bbbc; --color-5: #dfbfa6. 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