Couleur nommée la plus proche · #B500DC
#B500DC
Couleur nommée la plus proche: Vibrant Purple
#B500DC (rgb(181 0 220), hsl(289 100% 43%), oklch(0.569 0.276 318)) est la plus proche de la couleur nommée Vibrant Purple. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#B500DC
oklch(0.569 0.276 318)
Conversions de couleur
- HEX
- #b500dc
- RGB
- rgb(181 0 220)
- HSL
- hsl(289 100% 43%)
- HWB
- hwb(289 0% 14%)
- OKLCH
- oklch(0.569 0.276 318)
- OKLab
- oklab(0.569 0.205 -0.185)
- CIE Lab
- lab(45.11 76.86 -65.84)
- LCH
- lch(45.11 101.2 319.4)
- CMYK
- cmyk(18% 100% 0% 14%)
Teintes · Ombres · Tons
Teintes
- BE3BE1
- C658E6
- CE70EA
- D686EE
- DD9BF2
- E5B0F5
- ECC4F8
- F2D8FB
- F9EBFD
Ombres
- 9D00BF
- 8600A3
- 6F0088
- 59006E
- 440054
- 30003C
- 1D0026
- 0C0011
- 020002
Tons
- B02AD3
- AC3DCB
- A74AC2
- A255B9
- 9D5EB0
- 9866A7
- 926E9E
- 8C7494
- 867A8A
Harmonies de couleurs
Complémentaire +180°
- B500DC
Vibrant Purple
- 388D00
≈ Christmas Green
Analogue -30° +30°
- B500DC
Vibrant Purple
- 7947FF
≈ Venetian Nights
- D1008F
≈ Snappy Violet
Triadique +120° +240°
- B500DC
Vibrant Purple
- 9D6D00
≈ Balor Brown
- 00888C
≈ Well Blue
Complémentaire divisée +150° +210°
- B500DC
Vibrant Purple
- 7F7C00
≈ Olive
- 008C6A
≈ Indonesian Jungle
Tétradique +90° +180° +270°
- B500DC
Vibrant Purple
- BD5300
≈ Obscure Orange
- 388D00
≈ Christmas Green
- 0083AA
≈ Advertising Blue
Contraste et accessibilité
Ag
AASur blanc
WCAG 5.25:1 · APCA Lc 74
Ag
FailSur noir
WCAG 3.99:1 · APCA Lc 28
Meilleure couleur de texte: #FFFFFF
WCAG 5.25:1 (AA) · APCA Lc 74
Contrast pairs
Extraits de code
CSS
:root {
--vibrant-purple: #b500dc;
--vibrant-purple-rgb: 181 0 220;
--vibrant-purple-oklch: oklch(0.569 0.276 318);
}
.element {
color: var(--vibrant-purple);
background-color: hsl(289 100% 43%);
border-color: oklch(0.569 0.276 318);
}Tailwind CSS v4
@theme {
--color-vibrant-purple: #b500dc;
--color-vibrant-purple-50: #ffdcff;
--color-vibrant-purple-100: #ffc9ff;
--color-vibrant-purple-200: #ffabff;
--color-vibrant-purple-300: #f380ff;
--color-vibrant-purple-400: #de55ff;
--color-vibrant-purple-500: #cc00f8;
--color-vibrant-purple-600: #ac0bd1;
--color-vibrant-purple-700: #8a0da8;
--color-vibrant-purple-800: #650880;
--color-vibrant-purple-900: #47075b;
--color-vibrant-purple-950: #2e003e;
}SCSS
$vibrant-purple: #b500dc;
$vibrant-purple-rgb: 181, 0, 220;
$vibrant-purple-light: mix(#fff, $vibrant-purple, 20%);
$vibrant-purple-dark: mix(#000, $vibrant-purple, 20%);
.element {
color: $vibrant-purple;
box-shadow: 0 0 0 2px rgba($vibrant-purple, 0.35);
}