Colore con nome · #CAA0FF
Hydrangea Purple
Hydrangea Purple è #CAA0FF: rgb(202 160 255), hsl(267 100% 81%), oklch(0.779 0.138 303.7). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Hydrangea Purple color name →
#CAA0FF
oklch(0.779 0.138 303.7)
Conversioni di colore
- HEX
- #caa0ff
- RGB
- rgb(202 160 255)
- HSL
- hsl(267 100% 81%)
- HWB
- hwb(267 63% 0%)
- OKLCH
- oklch(0.779 0.138 303.7)
- OKLab
- oklab(0.779 0.077 -0.115)
- CIE Lab
- lab(72.5 29.66 -41.71)
- LCH
- lch(72.5 51.18 305.4)
- CMYK
- cmyk(21% 37% 0% 0%)
Tinte · Ombre · Toni
Tinte
- CFAAFF
- D4B3FF
- DABDFF
- DFC7FF
- E4D0FF
- E9D9FF
- EFE3FF
- F4ECFF
- FAF6FF
Ombre
- AF8BDE
- 9576BE
- 7C619E
- 644E80
- 4D3B63
- 372948
- 22192E
- 0F0916
- 020103
Toni
- C29DF2
- BB9AE5
- B397D8
- AC94CB
- A491BF
- 9D8EB2
- 958AA5
- 8E8799
- 87848C
Armonie di colore
Complementare +180°
- CAA0FF
Hydrangea Purple
- A5C65C
≈ Spring Lime
Analogo -30° +30°
- CAA0FF
Hydrangea Purple
- A0B2FF
≈ Wondrous Wisteria
- EC94DC
≈ Love Dust
Triadico +120° +240°
- CAA0FF
Hydrangea Purple
- F4A24F
≈ Troll Slayer Orange
- 00D3C1
≈ Turquoise Panic
Complementare divisa +150° +210°
- CAA0FF
Hydrangea Purple
- D5B53D
≈ Oldies but Goldies
- 67D18D
≈ Jube Green
Tetradico +90° +180° +270°
- CAA0FF
Hydrangea Purple
- FF977F
≈ Vivid Tangerine
- A5C65C
≈ Spring Lime
- 00CDEC
≈ Picnic Day Sky
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 2.10:1 · APCA Lc 41
Ag
AAASu nero
WCAG 9.98:1 · APCA Lc 61
Miglior colore del testo: #000000
WCAG 9.98:1 (AAA) · APCA Lc 61
Contrast pairs
Frammenti di codice
CSS
:root {
--hydrangea-purple: #caa0ff;
--hydrangea-purple-rgb: 202 160 255;
--hydrangea-purple-oklch: oklch(0.779 0.138 303.7);
}
.element {
color: var(--hydrangea-purple);
background-color: hsl(267 100% 81%);
border-color: oklch(0.779 0.138 303.7);
}Tailwind CSS v4
@theme {
--color-hydrangea-purple: #caa0ff;
--color-hydrangea-purple-50: #ffecff;
--color-hydrangea-purple-100: #f3ddff;
--color-hydrangea-purple-200: #e2c6ff;
--color-hydrangea-purple-300: #c9a5f0;
--color-hydrangea-purple-400: #b089e1;
--color-hydrangea-purple-500: #9a6cd0;
--color-hydrangea-purple-600: #825baf;
--color-hydrangea-purple-700: #68498d;
--color-hydrangea-purple-800: #4b356a;
--color-hydrangea-purple-900: #34244a;
--color-hydrangea-purple-950: #201331;
}SCSS
$hydrangea-purple: #caa0ff;
$hydrangea-purple-rgb: 202, 160, 255;
$hydrangea-purple-light: mix(#fff, $hydrangea-purple, 20%);
$hydrangea-purple-dark: mix(#000, $hydrangea-purple, 20%);
.element {
color: $hydrangea-purple;
box-shadow: 0 0 0 2px rgba($hydrangea-purple, 0.35);
}