Cor nomeada · #BB2288
Loulou’s Purple
Loulou’s Purple é #BB2288: rgb(187 34 136), hsl(320 69% 43%), oklch(0.54 0.207 345.8). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Pink mean? → · Loulou’s Purple color name →
#BB2288
oklch(0.54 0.207 345.8)
Conversões de cor
- HEX
- #bb2288
- RGB
- rgb(187 34 136)
- HSL
- hsl(320 69% 43%)
- HWB
- hwb(320 13% 27%)
- OKLCH
- oklch(0.54 0.207 345.8)
- OKLab
- oklab(0.54 0.201 -0.051)
- CIE Lab
- lab(43.79 64.49 -18.25)
- LCH
- lch(43.79 67.02 344.2)
- CMYK
- cmyk(0% 82% 27% 27%)
Tons claros · Sombras · Tons
Tons claros
- C44194
- CD5A9F
- D670AB
- DD85B7
- E599C2
- EBAECE
- F1C2DA
- F6D6E7
- FBEBF3
Sombras
- A21C75
- 8A1663
- 731152
- 5C0B41
- 460731
- 320322
- 1F0113
- 0D0006
- 020001
Tons
- B73387
- B24087
- AD4B86
- A85485
- A35D85
- 9D6584
- 966C83
- 907382
- 887A81
Harmonias de cor
Complementar +180°
- BB2288
Loulou’s Purple
- 00835F
≈ Shadows of Time
Análoga -30° +30°
- BB2288
Loulou’s Purple
- 9B39BE
≈ Akebi Purple
- CB1444
≈ Comforting Cherry
Tríade +120° +240°
- BB2288
Loulou’s Purple
- 787200
≈ Sunlit Kelp Green
- 007A9C
≈ Sea Sight
Complementar dividida +150° +210°
- BB2288
Loulou’s Purple
- 3E8200
≈ Green People
- 007F80
≈ Teal
Tétrade +90° +180° +270°
- BB2288
Loulou’s Purple
- 946400
≈ Gamboge Brown
- 00835F
≈ Shadows of Time
- 006BD6
≈ Flickr Blue
Contraste e acessibilidade
Ag
AASobre branco
WCAG 5.67:1 · APCA Lc 77
Ag
FailSobre preto
WCAG 3.69:1 · APCA Lc 25
Melhor cor de texto: #FFFFFF
WCAG 5.67:1 (AA) · APCA Lc 77
Contrast pairs
Trechos de código
CSS
:root {
--loulou-s-purple: #bb2288;
--loulou-s-purple-rgb: 187 34 136;
--loulou-s-purple-oklch: oklch(0.54 0.207 345.8);
}
.element {
color: var(--loulou-s-purple);
background-color: hsl(320 69% 43%);
border-color: oklch(0.54 0.207 345.8);
}Tailwind CSS v4
@theme {
--color-loulou-s-purple: #bb2288;
--color-loulou-s-purple-50: #ffdeff;
--color-loulou-s-purple-100: #ffccf4;
--color-loulou-s-purple-200: #ffafe4;
--color-loulou-s-purple-300: #ff87ca;
--color-loulou-s-purple-400: #f062b8;
--color-loulou-s-purple-500: #de33a3;
--color-loulou-s-purple-600: #bb2e8a;
--color-loulou-s-purple-700: #97256e;
--color-loulou-s-purple-800: #6f1954;
--color-loulou-s-purple-900: #4f113a;
--color-loulou-s-purple-950: #340224;
}SCSS
$loulou-s-purple: #bb2288;
$loulou-s-purple-rgb: 187, 34, 136;
$loulou-s-purple-light: mix(#fff, $loulou-s-purple, 20%);
$loulou-s-purple-dark: mix(#000, $loulou-s-purple, 20%);
.element {
color: $loulou-s-purple;
box-shadow: 0 0 0 2px rgba($loulou-s-purple, 0.35);
}