Creazione paletta PA ufficiale

Mykhaylo · 11 Ottobre 2017, 2:01pm

Ciao a tutti,
vorrei chiedere un dettaglio riguardo alla documentazione, ovvero:
https://design-italia.readthedocs.io/it/stable/doc/user-interface/stile.html#colori

Qui viene specificata la procedura per ottenere una paletta di colori coerente modificando luminosità e saturazione, però con tale procedura non si riesce ad ottenere la paletta ufficiale, ovvero il blu #0066CC e le sue derivazioni descritte nella documentazione.

I colori sono stati scelti manualmente oppure esiste un’altro metodo per ricavare quelle gradazioni?
Ho bisogno di parametrizzare i miei fogli di stile e allo stesso tempo renderli compatibili per le PA.

Grazie mille

gunzip · 11 Ottobre 2017, 3:43pm

ciao @Mykhaylo,

Qui trovi un CSS che genera la palette automaticamente partendo da un colore principale e applicando diverse combinazioni di luminosità (l) e saturazione (s):

github.com

italia/design-web-toolkit/blob/master/src/utils/colors/index.css

/** @define utilities */

/*
 *	1. To be overridden by themes
 */

:root {
  --Color-primary: #111; /* [1] */

  --Color-black: #000;
  --Color-white: #fff;
  --Color-grey-10: #f5f5f0;
  --Color-grey-15: #f6f9fc;
  --Color-grey-20: #eee;
  --Color-grey-30: #ddd;
  --Color-grey-40: #a5abb0;
  --Color-grey-50: #5a6772;
  --Color-grey-60: #444e57;
  --Color-grey-80: #30373d;
  --Color-grey-90: #1c2024;

This file has been truncated. show original

esempio:

--Color-5: color(var(--Color-primary) l(+50%) s(-50%));

questa è la palette generata:
https://italia.github.io/design-web-toolkit/components/detail/colors.html

i valori non seguono pedissequamente le indicazioni delle LG che sono per lo più indicative (nonché in fase di revisione / perfezionamento).

LuigiMarzano · 29 Gennaio 2018, 12:59pm

Ciao a tutti,

Mi trovo in difficoltà nella scelta della palette per un sito istituzionale di un Comune, questo ha nei colori istituzionali del suo logo l’azzurro dedicato alle amministrazioni centrali.
Evitando la copia esatta del colore mi chiedevo quanto si fosse rigidi, scegliendo un colore molto simile, potrebbe essere un problema?.

Se si volesse invece scegliere un colore completamente diverso mi viene molto difficile scegliere dei colori armoniosi che superino anche il controllo del tool per l’accessibilità (come ad esempio quello riportato):