Color con nombre · #CD9BC4
Clover Pink
Clover Pink es #CD9BC4: rgb(205 155 196), hsl(311 33% 71%), oklch(0.749 0.081 332.7). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Pink mean? → · Clover Pink color name →
#CD9BC4
oklch(0.749 0.081 332.7)
Conversiones de color
- HEX
- #cd9bc4
- RGB
- rgb(205 155 196)
- HSL
- hsl(311 33% 71%)
- HWB
- hwb(311 61% 20%)
- OKLCH
- oklch(0.749 0.081 332.7)
- OKLab
- oklab(0.749 0.072 -0.037)
- CIE Lab
- lab(69.77 24.18 -13.62)
- LCH
- lch(69.77 27.75 330.6)
- CMYK
- cmyk(0% 24% 4% 20%)
Tintes · Sombras · Tonos
Tintes
- D2A5CA
- D7AFD0
- DDB9D6
- E2C2DC
- E7CCE1
- ECD6E7
- F1E1ED
- F5EBF3
- FAF5F9
Sombras
- B286AA
- 987291
- 7E5E78
- 664B61
- 4E394A
- 382835
- 231821
- 0F090E
- 020102
Tonos
- C598BD
- BD96B6
- B693AF
- AE91A8
- A68EA2
- 9F8B9B
- 978894
- 8F868D
- 888387
Armonías de color
Complementario +180°
- CD9BC4
Clover Pink
- 86BD95
≈ Forest Frolic
Análogo -30° +30°
- CD9BC4
Clover Pink
- B8A2D8
≈ Purple Premiere
- DA98A9
≈ Blush Bomb
Triádico +120° +240°
- CD9BC4
Clover Pink
- BFAD72
≈ Goldie Oldie
- 6DBBCC
≈ Delusional Dragonfly
Complementario dividido +150° +210°
- CD9BC4
Clover Pink
- A4B67D
≈ Serpentine
- 70BFB2
≈ Fiesta Blue
Tetrádico +90° +180° +270°
- CD9BC4
Clover Pink
- D3A378
≈ Rhino Tusk
- 86BD95
≈ Forest Frolic
- 80B4DD
≈ Dun Morogh Blue
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.31:1 · APCA Lc 46
Ag
AAASobre negro
WCAG 9.08:1 · APCA Lc 57
Mejor color de texto: #000000
WCAG 9.08:1 (AAA) · APCA Lc 57
Contrast pairs
Fragmentos de código
CSS
:root {
--clover-pink: #cd9bc4;
--clover-pink-rgb: 205 155 196;
--clover-pink-oklch: oklch(0.749 0.081 332.7);
}
.element {
color: var(--clover-pink);
background-color: hsl(311 33% 71%);
border-color: oklch(0.749 0.081 332.7);
}Tailwind CSS v4
@theme {
--color-clover-pink: #cd9bc4;
--color-clover-pink-50: #ffedff;
--color-clover-pink-100: #fadef3;
--color-clover-pink-200: #ebc8e2;
--color-clover-pink-300: #d2a8c8;
--color-clover-pink-400: #bc8db3;
--color-clover-pink-500: #a6729d;
--color-clover-pink-600: #8d6185;
--color-clover-pink-700: #714d6b;
--color-clover-pink-800: #53384f;
--color-clover-pink-900: #3a2637;
--color-clover-pink-950: #241522;
}SCSS
$clover-pink: #cd9bc4;
$clover-pink-rgb: 205, 155, 196;
$clover-pink-light: mix(#fff, $clover-pink, 20%);
$clover-pink-dark: mix(#000, $clover-pink, 20%);
.element {
color: $clover-pink;
box-shadow: 0 0 0 2px rgba($clover-pink, 0.35);
}