Colore con nome · #E6474A
X Marks the Spot
X Marks the Spot è #E6474A: rgb(230 71 74), hsl(359 76% 59%), oklch(0.626 0.196 23.8). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Red mean? → · X Marks the Spot color name →
#E6474A
oklch(0.626 0.196 23.8)
Conversioni di colore
- HEX
- #e6474a
- RGB
- rgb(230 71 74)
- HSL
- hsl(359 76% 59%)
- HWB
- hwb(359 28% 10%)
- OKLCH
- oklch(0.626 0.196 23.8)
- OKLab
- oklab(0.626 0.179 0.079)
- CIE Lab
- lab(54.59 62.01 35.52)
- LCH
- lch(54.59 71.46 29.8)
- CMYK
- cmyk(0% 69% 68% 10%)
Tinte · Ombre · Toni
Tinte
- EB5E5C
- F0726E
- F48580
- F89791
- FBA9A3
- FDBAB5
- FFCCC7
- FFDDDA
- FFEEEC
Ombre
- C83D3F
- AB3235
- 8E282A
- 731F20
- 591617
- 400D0E
- 280606
- 130202
- 030000
Toni
- DD5150
- D45956
- CB605C
- C16662
- B86C67
- AD716C
- A37571
- 987976
- 8C7D7B
Armonie di colore
Complementare +180°
- E6474A
X Marks the Spot
- 009AA5
≈ Turkish Boy
Analogo -30° +30°
- E6474A
X Marks the Spot
- DB4790
≈ Prunus Avium
- CE6800
≈ Curry Powder
Triadico +120° +240°
- E6474A
X Marks the Spot
- 18A428
≈ Dry Highlighter Green
- 487FFC
≈ C64 NTSC
Complementare divisa +150° +210°
- E6474A
X Marks the Spot
- 009F82
≈ Reptilian Green
- 0093CA
≈ Germander Speedwell
Tetradico +90° +180° +270°
- E6474A
X Marks the Spot
- 889000
≈ Old Asparagus
- 009AA5
≈ Turkish Boy
- 9168F0
≈ Purple Anemone
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 3.91:1 · APCA Lc 65
Ag
AASu nero
WCAG 5.36:1 · APCA Lc 36
Miglior colore del testo: #000000
WCAG 5.36:1 (AA) · APCA Lc 36
Contrast pairs
Frammenti di codice
CSS
:root {
--x-marks-the-spot: #e6474a;
--x-marks-the-spot-rgb: 230 71 74;
--x-marks-the-spot-oklch: oklch(0.626 0.196 23.8);
}
.element {
color: var(--x-marks-the-spot);
background-color: hsl(359 76% 59%);
border-color: oklch(0.626 0.196 23.8);
}Tailwind CSS v4
@theme {
--color-x-marks-the-spot: #e6474a;
--color-x-marks-the-spot-50: #ffe0d8;
--color-x-marks-the-spot-100: #ffcfc6;
--color-x-marks-the-spot-200: #ffb3a8;
--color-x-marks-the-spot-300: #ff8c82;
--color-x-marks-the-spot-400: #fd6564;
--color-x-marks-the-spot-500: #ec3741;
--color-x-marks-the-spot-600: #c73238;
--color-x-marks-the-spot-700: #a0282c;
--color-x-marks-the-spot-800: #781a22;
--color-x-marks-the-spot-900: #551216;
--color-x-marks-the-spot-950: #380308;
}SCSS
$x-marks-the-spot: #e6474a;
$x-marks-the-spot-rgb: 230, 71, 74;
$x-marks-the-spot-light: mix(#fff, $x-marks-the-spot, 20%);
$x-marks-the-spot-dark: mix(#000, $x-marks-the-spot, 20%);
.element {
color: $x-marks-the-spot;
box-shadow: 0 0 0 2px rgba($x-marks-the-spot, 0.35);
}