Benoemde kleur · #BB02FE
Spectacular Purple
Spectacular Purple is #BB02FE: rgb(187 2 254), hsl(284 99% 50%), oklch(0.603 0.301 312). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Purple mean? → · Spectacular Purple color name →
#BB02FE
oklch(0.603 0.301 312)
Kleurconversies
- HEX
- #bb02fe
- RGB
- rgb(187 2 254)
- HSL
- hsl(284 99% 50%)
- HWB
- hwb(284 1% 0%)
- OKLCH
- oklch(0.603 0.301 312)
- OKLab
- oklab(0.603 0.202 -0.224)
- CIE Lab
- lab(48.4 82.04 -79.62)
- LCH
- lch(48.4 114.32 315.9)
- CMYK
- cmyk(26% 99% 0% 0%)
Tinten · Schaduwen · Tonen
Tinten
- C240FF
- CA5EFF
- D176FF
- D88CFF
- DFA0FF
- E5B4FF
- ECC7FF
- F2DAFF
- F9EDFF
Schaduwen
- A201DD
- 8A01BD
- 73019E
- 5C0080
- 460063
- 320047
- 1F002D
- 0D0016
- 020003
Tonen
- B52EF2
- B041E6
- AA4FD9
- A45ACD
- 9F62C1
- 996AB4
- 9370A8
- 8D769B
- 867B8E
Kleurharmonieën
Complementair +180°
- BB02FE
Spectacular Purple
- 599400
≈ Vida Loca
Analoog -30° +30°
- BB02FE
Spectacular Purple
- 7363FF
≈ Blue Genie
- DD00AB
≈ Aphroditean Fuchsia
Triadisch +120° +240°
- BB02FE
Spectacular Purple
- B07200
≈ Philippine Gold
- 009491
≈ Paradise Landscape
Gesplitst complementair +150° +210°
- BB02FE
Spectacular Purple
- 918300
≈ Thicket Green
- 009968
≈ Green Cyan
Tetradisch +90° +180° +270°
- BB02FE
Spectacular Purple
- D65000
≈ Deep Orange
- 599400
≈ Vida Loca
- 008FB1
≈ Algiers Blue
Contrast en toegankelijkheid
Ag
AAOp wit
WCAG 4.61:1 · APCA Lc 69
Ag
AAOp zwart
WCAG 4.55:1 · APCA Lc 32
Beste tekstkleur: #FFFFFF
WCAG 4.61:1 (AA) · APCA Lc 69
Contrast pairs
Codefragmenten
CSS
:root {
--spectacular-purple: #bb02fe;
--spectacular-purple-rgb: 187 2 254;
--spectacular-purple-oklch: oklch(0.603 0.301 312);
}
.element {
color: var(--spectacular-purple);
background-color: hsl(284 99% 50%);
border-color: oklch(0.603 0.301 312);
}Tailwind CSS v4
@theme {
--color-spectacular-purple: #bb02fe;
--color-spectacular-purple-50: #ffdbff;
--color-spectacular-purple-100: #ffc9ff;
--color-spectacular-purple-200: #ffa9ff;
--color-spectacular-purple-300: #ee7dff;
--color-spectacular-purple-400: #d84eff;
--color-spectacular-purple-500: #c600ff;
--color-spectacular-purple-600: #a700e5;
--color-spectacular-purple-700: #8600b8;
--color-spectacular-purple-800: #62008d;
--color-spectacular-purple-900: #440164;
--color-spectacular-purple-950: #2c0045;
}SCSS
$spectacular-purple: #bb02fe;
$spectacular-purple-rgb: 187, 2, 254;
$spectacular-purple-light: mix(#fff, $spectacular-purple, 20%);
$spectacular-purple-dark: mix(#000, $spectacular-purple, 20%);
.element {
color: $spectacular-purple;
box-shadow: 0 0 0 2px rgba($spectacular-purple, 0.35);
}