Colore con nome · #F08497
Xoxo
Xoxo è #F08497: rgb(240 132 151), hsl(349 78% 73%), oklch(0.736 0.133 9.7). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Red mean? → · Xoxo color name →
#F08497
oklch(0.736 0.133 9.7)
Conversioni di colore
- HEX
- #f08497
- RGB
- rgb(240 132 151)
- HSL
- hsl(349 78% 73%)
- HWB
- hwb(349 52% 6%)
- OKLCH
- oklch(0.736 0.133 9.7)
- OKLab
- oklab(0.736 0.131 0.022)
- CIE Lab
- lab(67.88 43.64 9.3)
- LCH
- lch(67.88 44.62 12)
- CMYK
- cmyk(0% 45% 37% 6%)
Tinte · Ombre · Toni
Tinte
- F391A1
- F69DAB
- F8AAB5
- FAB6BF
- FCC2CA
- FDCED4
- FEDBDF
- FFE7E9
- FFF3F4
Ombre
- D17283
- B2606F
- 954F5C
- 783F49
- 5D2F37
- 432026
- 2A1217
- 140608
- 030101
Toni
- E58495
- DA8592
- CF8490
- C4848E
- B9848C
- AE8389
- A38387
- 988285
- 8C8182
Armonie di colore
Complementare +180°
- F08497
Xoxo
- 00C3BB
≈ Swimmers Pool
Analogo -30° +30°
Triadico +120° +240°
- F08497
Xoxo
- 8EBA5B
≈ Happy Tune
- 63AFFA
≈ Tiān Lán Sky
Complementare divisa +150° +210°
- F08497
Xoxo
- 4FC38C
≈ Enamelled Dragon
- 07BCE3
≈ Maldives
Tetradico +90° +180° +270°
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 2.48:1 · APCA Lc 48
Ag
AAASu nero
WCAG 8.45:1 · APCA Lc 54
Miglior colore del testo: #000000
WCAG 8.45:1 (AAA) · APCA Lc 54
Contrast pairs
Frammenti di codice
CSS
:root {
--xoxo: #f08497;
--xoxo-rgb: 240 132 151;
--xoxo-oklch: oklch(0.736 0.133 9.7);
}
.element {
color: var(--xoxo);
background-color: hsl(349 78% 73%);
border-color: oklch(0.736 0.133 9.7);
}Tailwind CSS v4
@theme {
--color-xoxo: #f08497;
--color-xoxo-50: #ffe6eb;
--color-xoxo-100: #ffd6dc;
--color-xoxo-200: #ffbdc5;
--color-xoxo-300: #f39ba6;
--color-xoxo-400: #e07b8d;
--color-xoxo-500: #cd5b72;
--color-xoxo-600: #ae4e61;
--color-xoxo-700: #8b3e4d;
--color-xoxo-800: #682c3a;
--color-xoxo-900: #491e28;
--color-xoxo-950: #2f0d16;
}SCSS
$xoxo: #f08497;
$xoxo-rgb: 240, 132, 151;
$xoxo-light: mix(#fff, $xoxo, 20%);
$xoxo-dark: mix(#000, $xoxo, 20%);
.element {
color: $xoxo;
box-shadow: 0 0 0 2px rgba($xoxo, 0.35);
}