Couleur nommée · #F4BBFF
Brilliant Lavender
Brilliant Lavender correspond à #F4BBFF : rgb(244 187 255), hsl(290 100% 87%), oklch(0.865 0.11 320.9). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Purple mean? → · Brilliant Lavender color name →
#F4BBFF
oklch(0.865 0.11 320.9)
Conversions de couleur
- HEX
- #f4bbff
- RGB
- rgb(244 187 255)
- HSL
- hsl(290 100% 87%)
- HWB
- hwb(290 73% 0%)
- OKLCH
- oklch(0.865 0.11 320.9)
- OKLab
- oklab(0.865 0.085 -0.069)
- CIE Lab
- lab(82.81 29.55 -25.49)
- LCH
- lch(82.81 39.03 319.2)
- CMYK
- cmyk(4% 27% 0% 0%)
Teintes · Ombres · Tons
Teintes
- F5C2FF
- F7C9FF
- F8D0FF
- F9D7FF
- FADDFF
- FBE4FF
- FCEBFF
- FDF2FF
- FEF8FF
Ombres
- D4A2DE
- B58ABE
- 97739E
- 7A5C80
- 5E4663
- 443248
- 2B1F2E
- 140D16
- 030203
Tons
- E8B5F2
- DCAFE5
- D0A9D8
- C4A4CB
- B99EBE
- AD98B1
- A292A5
- 968C98
- 8B868C
Harmonies de couleurs
Complémentaire +180°
- F4BBFF
Brilliant Lavender
- ABE5A1
≈ Grape Green
Analogue -30° +30°
- F4BBFF
Brilliant Lavender
- D2CBFF
≈ Lavender Blue
- FFBCDA
≈ Cotton Candy
Triadique +120° +240°
- F4BBFF
Brilliant Lavender
- F8CB7C
≈ Afternoon
- 6EE8F0
≈ Poseidon Jr.
Complémentaire divisée +150° +210°
- F4BBFF
Brilliant Lavender
- D6DA83
≈ Lime Ice
- 81EAC9
≈ Bubble Algae
Tétradique +90° +180° +270°
- F4BBFF
Brilliant Lavender
- FFC4A2
≈ Tomorrow’s Coral
- ABE5A1
≈ Grape Green
- 9ADDFF
≈ Columbia Blue
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.56:1 · APCA Lc 26
Ag
AAASur noir
WCAG 13.39:1 · APCA Lc 77
Meilleure couleur de texte: #000000
WCAG 13.39:1 (AAA) · APCA Lc 77
Contrast pairs
Extraits de code
CSS
:root {
--brilliant-lavender: #f4bbff;
--brilliant-lavender-rgb: 244 187 255;
--brilliant-lavender-oklch: oklch(0.865 0.11 320.9);
}
.element {
color: var(--brilliant-lavender);
background-color: hsl(290 100% 87%);
border-color: oklch(0.865 0.11 320.9);
}Tailwind CSS v4
@theme {
--color-brilliant-lavender: #f4bbff;
--color-brilliant-lavender-50: #ffebff;
--color-brilliant-lavender-100: #fadcfe;
--color-brilliant-lavender-200: #ecc5f0;
--color-brilliant-lavender-300: #d3a5d8;
--color-brilliant-lavender-400: #bc89c6;
--color-brilliant-lavender-500: #a76cb2;
--color-brilliant-lavender-600: #8d5c97;
--color-brilliant-lavender-700: #714979;
--color-brilliant-lavender-800: #53355b;
--color-brilliant-lavender-900: #3a243f;
--color-brilliant-lavender-950: #241328;
}SCSS
$brilliant-lavender: #f4bbff;
$brilliant-lavender-rgb: 244, 187, 255;
$brilliant-lavender-light: mix(#fff, $brilliant-lavender, 20%);
$brilliant-lavender-dark: mix(#000, $brilliant-lavender, 20%);
.element {
color: $brilliant-lavender;
box-shadow: 0 0 0 2px rgba($brilliant-lavender, 0.35);
}