Cecità al verde
Cecità al rosso
Cecità al blu
148 Colori CSS Nominati
Clicca su qualsiasi colore per caricarlo nel selettore. Cerca per nome o valore hex.
| Campione | Nome | Hex | RGB |
|---|
Tutti i 148 colori CSS nominati standard secondo la specifica CSS Color Level 4.
Come funzionano i codici colore
Codici Hex
Un codice colore hex come #FF5733 codifica il colore come tre numeri esadecimali a 2 cifre: rosso (FF = 255), verde (57 = 87), blu (33 = 51). Il range hex va da #000000 (nero) a #FFFFFF (bianco). La forma abbreviata come #F60 si espande in #FF6600.
RGB
RGB specifica l'intensità delle luci Rossa, Verde e Blu, ognuna da 0 a 255. rgb(255, 0, 0) è rosso puro; rgb(0, 0, 255) è blu puro. Puoi anche specificare l'alfa: rgba(255, 87, 51, 0.5) è semitrasparente al 50%.
HSL
HSL (Tonalità, Saturazione, Luminosità) è più intuitivo: la tonalità è l'angolo del colore (0°=rosso, 120°=verde, 240°=blu), la saturazione è l'intensità del colore (0%=grigio, 100%=vivido) e la luminosità è la brillantezza (0%=nero, 50%=normale, 100%=bianco). Ottimo per variazioni di colore programmatiche.
CMYK
Usato nella grafica di stampa: Ciano, Magenta, Giallo e Chiave (Nero). La conversione da RGB è approssimativa — i flussi di stampa professionali usano profili ICC per maggiore precisione. I valori mostrati sono indicativi; verifica sempre con il tuo tipografo.
Esempio pratico
Il colore CSS tomato è #FF6347. Analisi: R=255 (FF), G=99 (63), B=71 (47). In HSL: tonalità≈9°, saturazione=100%, luminosità=64%. Contrasto WCAG vs bianco: ~3,0:1 (fallimento AA per testo normale). Vs nero: ~7,0:1 (successo AAA). Usa quindi il testo tomato su sfondi scuri per la migliore leggibilità.
Domande frequenti
Che cos'è un codice colore esadecimale?
Un codice colore hex è un numero esadecimale a 6 cifre (come #FF5733) che rappresenta un colore mescolando luci rossa, verde e blu. Le prime due cifre sono il rosso, le due successive il verde, le ultime due il blu — ognuna da 00 (assente) a FF (pieno). I codici a 3 cifre (#F60) sono una forma abbreviata valida in cui ogni cifra viene raddoppiata.
Qual è la differenza tra RGB e HSL?
RGB mescola valori di luce rossa, verde e blu (0–255 ciascuno), corrispondendo al funzionamento degli schermi. HSL descrive la Tonalità (angolo del colore 0–360°), la Saturazione (vivacità 0–100%) e la Luminosità (brillantezza 0–100%), corrispondendo alla percezione umana del colore. HSL rende facile creare varianti più chiare/scure regolando solo il valore L.
Quale rapporto di contrasto WCAG è necessario?
WCAG 2.1 AA richiede 4,5:1 per il testo normale e 3:1 per il testo grande (18pt o 14pt grassetto). AAA richiede rispettivamente 7:1 e 4,5:1. Questi rapporti si applicano al testo rispetto al suo sfondo. Gli elementi grafici decorativi e i componenti UI inattivi sono esenti. Usa il verificatore di contrasto sopra per validare le tue combinazioni di colori.
Che cosa sono i colori complementari, analoghi e triadici?
I colori complementari si trovano opposti sulla ruota dei colori (a 180°) e creano un forte contrasto. I colori analoghi sono adiacenti (±30°) e creano palette armoniose e coese. I colori triadici sono equidistanti a 120° e offrono un equilibrio vibrante. Tutti e tre i tipi di armonia sono mostrati nella sezione «Armonie di colori» sopra.
Il contagocce funziona su tutti i browser?
L'EyeDropper API è attualmente supportata in Chrome 95+, Edge 95+ e Opera 81+. Non è disponibile in Firefox o Safari. Il pulsante pipette viene nascosto automaticamente sui browser non supportati — il selettore colore principale e tutti i formati di codice funzionano in tutti i browser moderni.
Che cosa sono i colori CSS nominati?
CSS definisce 148 colori nominati — da aliceblue a yellowgreen — che puoi usare direttamente in CSS senza valori hex o rgb. Fanno parte della specifica CSS Color Level 4 e includono colori web classici (red, blue) oltre a molti nomi descrittivi (cornflowerblue, mediumaquamarine). La tabella completa è consultabile sopra.