#BB33BB + #BB66BB + #BB99BB + #BBCCBB + #BBFFBB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BB33BB

Rose Purple · DarkOrchid · Violet

HEX

#BB33BB

RGB

rgb(187, 51, 187)

HSL

hsl(300, 57%, 47%)

HSB

hsb(300, 73%, 73%)

CMYK

cmyk(0%, 73%, 0%, 27%)

Oklch

oklch(57.8% 0.225 328.0)

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

#BB66BB

Rose Purple · MediumOrchid · Violet

HEX

#BB66BB

RGB

rgb(187, 102, 187)

HSL

hsl(300, 38%, 57%)

HSB

hsb(300, 45%, 73%)

CMYK

cmyk(0%, 45%, 0%, 27%)

Oklch

oklch(63.8% 0.153 327.2)

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

#BB99BB

Mauve · DarkGray · Lilac Purple

HEX

#BB99BB

RGB

rgb(187, 153, 187)

HSL

hsl(300, 20%, 67%)

HSB

hsb(300, 18%, 73%)

CMYK

cmyk(0%, 18%, 0%, 27%)

Oklch

oklch(72.5% 0.062 326.2)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#BBCCBB

Celadon · Silver · Apple Green

HEX

#BBCCBB

RGB

rgb(187, 204, 187)

HSL

hsl(120, 14%, 77%)

HSB

hsb(120, 8%, 80%)

CMYK

cmyk(8%, 0%, 8%, 20%)

Oklch

oklch(82.7% 0.030 145.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#BBFFBB

Emerald · LightGray · Mint Green

HEX

#BBFFBB

RGB

rgb(187, 255, 187)

HSL

hsl(120, 100%, 87%)

HSB

hsb(120, 27%, 100%)

CMYK

cmyk(27%, 0%, 27%, 0%)

Oklch

oklch(93.8% 0.113 144.6)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB33BB

34BC34

Analogous

7834BC

BB33BB

BC3478

Triadic

BB33BB

BCBC34

34BCBC

Split-Comp.

BB33BB

78BC34

34BC78

Tetradic

BB33BB

BC7834

34BC34

3478BC

Contrast Matrix WCAG 2.1 Contrast

BB33BB	BB66BB	BB99BB	BBCCBB	BBFFBB
—	1.3 Fail	1.9 Fail	2.9 Fail	4.2 AA Large
1.3 Fail	—	1.5 Fail	2.2 Fail	3.2 AA Large
1.9 Fail	1.5 Fail	—	1.5 Fail	2.2 Fail
2.9 Fail	2.2 Fail	1.5 Fail	—	1.5 Fail
4.2 AA Large	3.2 AA Large	2.2 Fail	1.5 Fail	—

White BG

4.9AA

3.7AA Large

2.5Fail

1.7Fail

1.2Fail

Black BG

4.3AA Large

5.7AA

8.4AAA

12.5AAA

18.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

807F9A

9695A6

ACACB3

C2C3BF

D8D9CB

Deuteranopia

889292

9BA2A2

AEB1B1

C1C0C0

D5CFCF

Tritanopia

B4807A

B79693

B9ACAB

BCC2C3

BED8DB

Achromatopsia

6B6B6B

898989

A7A7A7

C5C5C5

E3E3E3

Shades & Tints Shades & Tints

#BB33BB

Dark

Light

#BB66BB

Dark

Light

#BB99BB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb33bb;
  --color-2: #bb66bb;
  --color-3: #bb99bb;
  --color-4: #bbccbb;
  --color-5: #bbffbb;
}

SCSS

$color-1: #bb33bb;
$color-2: #bb66bb;
$color-3: #bb99bb;
$color-4: #bbccbb;
$color-5: #bbffbb;

TAILWIND

colors: {
  'brand-1': '#bb33bb',
  'brand-2': '#bb66bb',
  'brand-3': '#bb99bb',
  'brand-4': '#bbccbb',
  'brand-5': '#bbffbb',
}

RGB Array

[187, 51, 187], [187, 102, 187], [187, 153, 187], [187, 204, 187], [187, 255, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BB33BB, #BB66BB, #BB99BB, #BBCCBB, #BBFFBB is ideal for: health products, baby brands, fresh-style blogs. 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: #bb33bb; --color-2: #bb66bb; --color-3: #bb99bb; --color-4: #bbccbb; --color-5: #bbffbb. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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