Utente:Daimona Eaytoy/Palette
Nota 1: i nomi proposti sono, appunto, proposte (come il resto della pagina). Al momento di implementarli andrebbe aggiunto un prefisso locale, ad es. --itwiki-
.
Nota 2: il fatto di non includere il colore (blu, giallo, verde etc.) nel nome della variabile è intenzionale. Questo perché: 1) il contenuto deve essere scritto in modo che cambiando il colore rimanga tutto valido; 2) può sempre capitare che si decida di modificare la definizione di una variabile; 3) il colore non è garantito (ad esempio col tema scuro). Ciò non toglie che possano esserci modi migliori di distinguere i colori che non 1, 2, 3...
Nota 3: per gli sfondi generici, vengono proposte due varianti: una per i casi in cui è garantito che il contenuto sia testo semplice (no link, note etc.), e una per un utilizzo generico in cui non è possibile escludere a priori che il testo contenga dei link (oppure se è già noto che li conterrà). Per i primi, bisognerebbe trovare un modo per garantire l'effettiva assenza di link, e non è chiaro come farlo in maniera comoda.
Nota 4: gli sfondi semantici vanno utilizzati esclusivamente laddove il contenuto abbia la connotazione descritta dal token. Non vanno invece utilizzati per motivi puramente estetici.
Vedere anche en:Template:Table cell templates e en:Wikipedia:Manual of Style/Accessibility/Colors.
Per l'implementazione in CSS, vedere Utente:Daimona Eaytoy/Palette/CSS.
Token
[modifica | modifica wikitesto]Nome | Descrizione ed esempi | Vector et al | Minerva | Night mode | Commenti | Rapporti contrasto |
---|---|---|---|---|---|---|
Sfondi generici (tema scuro WIP) | ||||||
sfondo-base |
Colore di sfondo base per i template (analogamente al bianco che è lo sfondo predefinito per il testo della voce col tema chiaro). Esempio: sfondo delle celle coi valori negli infobox. |
#f8f9fa |
#f8f9fa |
#202122 |
Usa il token Codex background-color-interactive-subtle , equivalente allo status quo, con fallback identico. |
|
sfondo-intestazione |
Colore di sfondo per le intestazioni dei template. Esempio: sfondo delle celle coi nomi negli infobox (ma non col tema scuro). |
#f3f3f3 |
#eaecf0 |
#27292d |
Usa il token Codex background-color-interactive , equivalente allo status quo nelle skin responsive, ma fallback diverso dal valore della variabile per preservare lo status quo nelle altre skin. Valutare se uniformare vector alla versione mobile |
|
sfondo-testata-1 |
Colore di sfondo per le testate dei template, variante 1 (grigio). Esempio: testata dei navbox, o sezioni negli infobox. Colore di default per la testata degli infobox. |
#ededed |
#ededed |
#202122 |
| |
sfondo-testata-2 |
Colore di sfondo per le testate dei template, variante 2 (blu). Esempio: testata dei navbox, o sezioni negli infobox. |
#C5F3FD |
#C5F3FD |
#27292d |
| |
sfondo-testata-3 |
Colore di sfondo per le testate dei template, variante 3 (ciano). Esempio: testata dei navbox, o sezioni negli infobox. |
#7DFFFF |
#7DFFFF |
#27292d |
| |
sfondo-testata-4 |
Colore di sfondo per le testate dei template, variante 4 (verde). Esempio: testata dei navbox, o sezioni negli infobox. |
#AEFEB1 |
#AEFEB1 |
#27292d |
In alternativa: #ABFFAB |
|
sfondo-testata-5 |
Colore di sfondo per le testate dei template, variante 5 (giallo). Esempio: testata dei navbox, o sezioni negli infobox. |
#FFFF80 |
#FFFF80 |
#27292d |
In alternativa: #F3F300 |
|
sfondo-testata-6 |
Colore di sfondo per le testate dei template, variante 6 (arancione). Esempio: testata dei navbox, o sezioni negli infobox. |
#FFE8D0 |
#FFE8D0 |
#27292d |
| |
sfondo-testata-7 |
Colore di sfondo per le testate dei template, variante 7 (rosso). Esempio: testata dei navbox, o sezioni negli infobox. |
#FFE6E6 |
#FFE6E6 |
#27292d |
| |
sfondo-testata-8 |
Colore di sfondo per le testate dei template, variante 8 (lavanda). Esempio: testata dei navbox, o sezioni negli infobox. |
#EAEAFF |
#EAEAFF |
#27292d |
| |
sfondo-testata-testo-1 |
Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 1 (grigio). Esempio: testata dei navbox, o sezioni negli infobox. Colore di default per la testata degli infobox. |
#dedede |
#dedede |
#202122 |
| |
sfondo-testata-testo-2 |
Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 2 (blu). Esempio: testata dei navbox, o sezioni negli infobox. |
#9cf |
#9cf |
#202122 |
| |
sfondo-testata-testo-3 |
Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 3 (arancione). Esempio: testata dei navbox, o sezioni negli infobox. |
#ffc04c |
#ffc04c |
#202122 |
| |
sfondo-testata-testo-4 |
Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 4 (verde). Esempio: testata dei navbox, o sezioni negli infobox. |
#90ee90 |
#90ee90 |
#202122 |
| |
sfondo-testata-testo-5 |
Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 5 (rosso). Esempio: testata dei navbox, o sezioni negli infobox. |
#FF8888 |
#FF8888 |
#202122 |
| |
sfondo-testata-testo-6 |
Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 6 (rosa). Esempio: testata dei navbox, o sezioni negli infobox. |
#FFAACC |
#FFAACC |
#202122 |
| |
sfondo-testata-testo-7 |
Colore di sfondo per le testate dei template che contengono solo testo semplice, variante 7 (viola). Esempio: testata dei navbox, o sezioni negli infobox. |
#A2A2FF |
#A2A2FF |
#202122 |
| |
sfondo-testata-testo-invertito-1 |
Colore di sfondo per le testate dei template che contengono solo testo semplice, con colore del testo invertito (bianco), variante 1 (blu). Esempio: testata dei navbox, o sezioni negli infobox. |
Testo #000080 |
Testo #000080 |
#202122 |
In alternativa: Testo #3300CC |
✅ Contrasto: 16.01 |
sfondo-testata-testo-invertito-2 |
Colore di sfondo per le testate dei template che contengono solo testo semplice, con colore del testo invertito (bianco), variante 2 (rosso). Esempio: testata dei navbox, o sezioni negli infobox. |
Testo #B20045 |
Testo #B20045 |
#202122 |
In alternativa: Testo #c02050 |
✅ Contrasto: 7.05 |
sfondo-testata-testo-invertito-3 |
Colore di sfondo per le testate dei template che contengono solo testo semplice, con colore del testo invertito (bianco), variante 3 (verde). Esempio: testata dei navbox, o sezioni negli infobox. |
Testo #006400 |
Testo #006400 |
#202122 |
✅ Contrasto: 7.44 | |
sfondo-testata-testo-invertito-4 |
Colore di sfondo per le testate dei template che contengono solo testo semplice, con colore del testo invertito (bianco), variante 4 (marrone). Esempio: testata dei navbox, o sezioni negli infobox. |
Testo #8B4513 |
Testo #8B4513 |
#202122 |
✅ Contrasto: 7.1 | |
sfondo-alternanza-1 |
Colore di sfondo da usare per elementi sequenziali con due sfondi in alternanza, colore 1. Esempio: Tabelle complesse quando si passa col mouse sulle celle (ad esempio nelle pagine speciali come Special:AbuseFilter, o il Template:Row hover highlight su enwiki). Righe pari/dispari nei navbox. {{Incontro di club}}. |
#FFF |
#FFF |
#101418 |
Stile nativo per mw-datatable mediante token Codex. |
|
sfondo-alternanza-2 |
Colore di sfondo da usare per elementi sequenziali con due sfondi in alternanza, colore 2. Esempio: Tabelle complesse quando si passa col mouse sulle celle (ad esempio nelle pagine speciali come Special:AbuseFilter, o il Template:Row hover highlight su enwiki). Righe pari/dispari nei navbox. {{Incontro di club}}. |
#eaf3ff |
#eaf3ff |
#1c2940 |
Stile nativo per mw-datatable mediante token Codex. |
|
Sfondi semantici (molto WIP, soprattutto night mode; limitarsi allo stretto indispensabile) | ||||||
sfondo-semantico-oro |
Colore di sfondo per gli ori nelle competizioni. Esempio: {{MedaglieOro}}. |
gold |
| |||
sfondo-semantico-argento |
Colore di sfondo per gli argenti nelle competizioni. Esempio: {{MedaglieArgento}}. |
silver |
| |||
sfondo-semantico-bronzo |
Colore di sfondo per i bronzi nelle competizioni. Esempio: {{MedaglieBronzo}}. |
#CD7F32 |
| |||
sfondo-semantico-risultato-positivo |
Colore di sfondo per risultati positivi. Esempio: vittoria di una competizione. |
#CFC |
| |||
sfondo-semantico-risultato-neutro |
Colore di sfondo per risultati neutri. Esempio: pareggio in una gara. |
#FFC |
| |||
sfondo-semantico-risultato-negativo |
Colore di sfondo per risultati negativi. Esempio: sconfitta in una gara. |
#FFE3E3 |
| |||
sfondo-semantico-sconosciuto |
Colore di sfondo per informazioni sconosciute o non disponibili. Esempio: ??? |
#EEE |
| |||
Bordi | ||||||
bordo-base |
Stile del bordo di base per i template. Esempio: bordo degli infobox. |
#c8ccd1 |
#eaecf0 |
#404244 |
Usa il token Codex border-color-muted per il colore, equivalente allo status quo nelle skin responsive, ma fallback diverso dal valore della variabile per preservare lo status quo nelle altre skin. Valutare se uniformare vector alla versione mobile. |
Esempi
Esempi presi da un campione di voci in vetrina.
{{Cassetto
Testo nero
[modifica | modifica wikitesto]- #F0EEFF (occhielli portali)
- #DDEEFF (Sportivo/Sport)
- #C5F3FD (infobox film)
- #AAD0FF (calciatore in rosa)
- #9cf (navbox)
- #ABCDEF (sportivo)
- #ccf (navbox)
- #ddccff (fumetto e animazione 1)
- #C3D0DF (approfondimento)
- #FFD700 (infobox)
- #ffc04c (fumetto e animazione 2)
- #ADA (infobox)
- lightgreen (gioco)
- #ffc0cb (navbox)
Testo vario
[modifica | modifica wikitesto]- #69a0f3 + white (fumetto e animazione 3)
- navy + white (malattia)
- #117a0d + white (navbox)
- #B20045 + white (monarca)
- #B20000 + #FFA257 (Magistrato romano)
- #ffeaea + #444444 (chiarimento)
- rgba(179, 36, 36, 0.21) + white (chiarimento dark mode)
Selettori
[modifica | modifica wikitesto]per ragazzi |
---|
giallo |
rosa |
erotico |
orrore |
thriller |
fantascienza |
fantasy |
umoristico |
storico |
avventura |
biografia |
default |
{{Hall of Fame/selettore colori}}
Sport (qualsiasi) | #A5E7C4 |
---|---|
Cinema | #F6F04F |
Musica | #ACE5F3 |
Televisione | #FFC1A3 |
Arti varie | #D5E1E5 |
Persone | #F4C3C8 |
{{Divisione amministrativa/Colore}}
1 | |
---|---|
2 | |
3 | |
4 | |
5 | |
Altro |
{{Personaggio/selettore colori}}
anime e manga |
---|
animazione |
cinema |
fumetti |
giochi |
Internet |
letteratura |
mitologia e epica |
teatro |
televisione |
videogiochi |
predefinito o non specificato |
Studio, "Studio, live" | verde |
---|---|
Live | salmone |
Raccolta, Compilation, Mixtape | ambra |
Remix, Cover | violetto |
Colonna sonora | lavanda |
Singolo, EP, EP live, Demo | celeste-blu |
Video, Video live, Video compilation, Video compilation live | frumento |
{{Artista musicale/selettore colori}}
Nessuna indicazione | #DDDDDD |
---|---|
Gruppo | #ABCDEF |
Cantautore | #F0CF30 |
Cantautrice | #F0CF30 |
Cantante | #F0CF30 |
Cantante lirico | #F0CF30 |
Orchestra | #9DFAAA |
Strumentista | #EFEF78 |
Deejay | #FFAACC |
Sound system | #FFAACC |
Beatmaker | #FFAACC |
{{Strada/selettore colori}} ne ha un sacco. Vedere anche {{Santo/Selettore colori}}.
Esperimenti
- ✅ Testo vector: 11.5
- ✅ Link old vector: 6.08
- ❌ Link vector22: 3.83
- ✅ Link rosso old vector: 4.85
- ❌ Link rosso vector22: 3.39
- ✅ Testo minerva: 11.5
- ❌ Link minerva: 3.83
- ❌ Link rosso minerva: 3.39
- ✅ Testo dark mode: 19.92
- ✅ Link dark mode: 6.57
- ✅ Link rosso dark mode: 6.01
- ✅ Testo vector: 15.26
- ✅ Link old vector: 8.07
- ✅ Link vector22: 5.08
- ✅ Link rosso old vector: 6.43
- ✅ Link rosso vector22: 4.5
- ✅ Testo minerva: 15.26
- ✅ Link minerva: 5.08
- ✅ Link rosso minerva: 4.5
- ✅ Testo dark mode: 19.92
- ✅ Link dark mode: 6.57
- ✅ Link rosso dark mode: 6.01
- ✅ Testo vector: 13.28
- ✅ Link old vector: 7.02
- ❌ Link vector22: 4.42
- ✅ Link rosso old vector: 5.6
- ❌ Link rosso vector22: 3.92
- ✅ Testo minerva: 13.28
- ❌ Link minerva: 4.42
- ❌ Link rosso minerva: 3.92
- ✅ Testo dark mode: 19.92
- ✅ Link dark mode: 6.57
- ✅ Link rosso dark mode: 6.01
- ✅ Testo vector: 13.53
- ✅ Link old vector: 7.15
- ✅ Link vector22: 4.5
- ✅ Link rosso old vector: 5.7
- ❌ Link rosso vector22: 3.99
- ✅ Testo minerva: 13.53
- ✅ Link minerva: 4.5
- ❌ Link rosso minerva: 3.99
- ✅ Testo dark mode: 19.92
- ✅ Link dark mode: 6.57
- ✅ Link rosso dark mode: 6.01