Color con nombre · #F4BBFF
Brilliant Lavender
Brilliant Lavender es #F4BBFF: rgb(244 187 255), hsl(290 100% 87%), oklch(0.865 0.11 320.9). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Purple mean? → · Brilliant Lavender color name →
#F4BBFF
oklch(0.865 0.11 320.9)
Conversiones de color
- 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%)
Tintes · Sombras · Tonos
Tintes
- F5C2FF
- F7C9FF
- F8D0FF
- F9D7FF
- FADDFF
- FBE4FF
- FCEBFF
- FDF2FF
- FEF8FF
Sombras
- D4A2DE
- B58ABE
- 97739E
- 7A5C80
- 5E4663
- 443248
- 2B1F2E
- 140D16
- 030203
Tonos
- E8B5F2
- DCAFE5
- D0A9D8
- C4A4CB
- B99EBE
- AD98B1
- A292A5
- 968C98
- 8B868C
Armonías de color
Complementario +180°
- F4BBFF
Brilliant Lavender
- ABE5A1
≈ Grape Green
Análogo -30° +30°
- F4BBFF
Brilliant Lavender
- D2CBFF
≈ Lavender Blue
- FFBCDA
≈ Cotton Candy
Triádico +120° +240°
- F4BBFF
Brilliant Lavender
- F8CB7C
≈ Afternoon
- 6EE8F0
≈ Poseidon Jr.
Complementario dividido +150° +210°
- F4BBFF
Brilliant Lavender
- D6DA83
≈ Lime Ice
- 81EAC9
≈ Bubble Algae
Tetrádico +90° +180° +270°
- F4BBFF
Brilliant Lavender
- FFC4A2
≈ Tomorrow’s Coral
- ABE5A1
≈ Grape Green
- 9ADDFF
≈ Columbia Blue
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.56:1 · APCA Lc 26
Ag
AAASobre negro
WCAG 13.39:1 · APCA Lc 77
Mejor color de texto: #000000
WCAG 13.39:1 (AAA) · APCA Lc 77
Contrast pairs
Fragmentos de código
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);
}