Creazione di una combinazione di colori

Panoramica di base su come definire una combinazione di colori dinamica e configurabile

Adam Argyle

In questo post voglio condividere i miei pensieri su come gestire più combinazioni di colori. in CSS. Prova la demo.

Demo

Se preferisci i video, ecco una versione di questo post su YouTube:

Panoramica

Creeremo un sistema di colori accessibile con proprietà personalizzate e calc(), per creare una pagina web adattata alle preferenze dell'utente mantenendo la creazione minima. Partiamo da un colore di base del brand e creiamo un sistema varianti da esso: 2 colori del testo, 4 colori di superficie e un'ombra corrispondente.

Questa guida inizia con la definizione di tutti i colori per ogni combinazione di colori in primo piano. Non vengono utilizzati per cambiare pagina fino alla fine.

Il brand

Spesso, un colore del brand è già stato definito hex o rgb. Questa GUI Challenge ha il colore di base del brand #0af. Innanzitutto, per questo sistema di colori, il valore esadecimale deve essere convertita in hsl.

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

Per rendere possibile un concetto di scurimento o schiarimento del colore del brand, 20%, i 3 canali del valore colore hsl devono essere estratti nelle loro proprietà come questa:

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

I CSS possono eseguire calcoli sulle proprietà dei colori, ad esempio calc(var(--brand-lightness) - 20%) per ridurre il valore della luminosità del 20%. Questo è fondamentale per creare la combinazione di colori in quanto CSS può mantenere tutti i colori nella stessa famiglia di tonalità regolando livelli di saturazione e leggerezza hsl.

Tema chiaro

Ogni variante di colore verrà contrassegnata con il proprio schema corrispondente, in questo caso viene aggiunto con -light.

Brand

Partendo dal colore del brand, viene ricreato inserendo --brand-hue, --brand-saturation e --brand-lightness di proprietà personalizzate all'interno delle parentesi della funzione hsl (), senza calcoli:

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

Colori testo

Gli elementi essenziali di una combinazione di colori devono essere quelli del testo. Con un tema chiaro, il testo dovrebbe essere molto scuro. Nota come la luminosità dei seguenti colori è bassa, ben al di sotto del 50%.

* {
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light, poiché è molto scuro al 10% di leggerezza, mantiene la luminosità intensa al 100% in modo che il colore del brand possa ancora emergere nel blu marino scuro.

Nota: la maggior parte degli utenti non riuscirà a dirti che non è nero, ma in qualche modo noteranno che sembra armonioso. Il segreto è riservare il bianco e nero esclusivamente alle luci più luminose e alle ombre più scure.

--text2-light, non è così scuro come il primo colore, il che è buono quanto lo è un colore secondario ed è inoltre molto meno satura.

Colori superficie

I colori delle superfici sono gli sfondi, i bordi e le altre superfici decorative che che il testo si trova al suo interno o al suo interno. In un tema chiaro, questi sono i colori chiari, al contrario dei colori scuri del testo. Per creare colori chiari con hsl, utilizzeremo valori percentuali più alti nel terzo valore di luminosità. Ridurremo anche saturazione, in modo che i grigi chiari non risultino troppo colorati.

* {
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
}

Sono stati creati quattro colori per le superfici perché i colori decorativi tendono a richiedere più colori varianti, per momenti interattivi come :focus o :hover o per creare l'aspetto di strati di carta. In questi scenari, è opportuno effettuare la transizione --surface2-light al passaggio del mouse su --surface3-light, quindi un passaggio del mouse genera aumento del contrasto (dal 99% alla luminosità del 92%, rendendolo più scuro).

Ombre

Le ombre di una combinazione di colori vanno oltre, ma aggiungono una natura realistica l'effetto e lo aiutano a distinguersi dalle ombre non realistiche. Da fare questo, il colore dell'ombra utilizzerà la proprietà tonalità personalizzata, saturo di questa tonalità, ma ancora molto scura. Essenzialmente, la creazione di un leggermente blu.

* {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

--surface-shadow-light non è aggregato in una funzione hsl. Questo perché Il valore --shadow-strength verrà combinato per creare un po' di opacità e le esigenze CSS pezzi per eseguire i calcoli. Vai all'ombra selvaggia per saperne di più.

Colori della luce in un unico posto

Non c'è bisogno di cercare in giro per scoprire come sono fatti i colori della luce, sono in un unico posto nel CSS.

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
  --shadow-strength-light: .02;
}

Sandbox su CodePen

Tema scuro

La maggior parte dei brand non inizia con un tema scuro, ma è una variante del loro di solito un tema più chiaro. Gli utenti, invece, spesso scelgono un tema scuro per contesti diversi, come la notte. Questi fattori mi hanno indotto a mantenere due aspetti scuri per i temi scuri:

1. In genere gli utenti si trovano al buio quando utilizzano questo tema, quindi effettua il test in oscuro.
2. I colori devono desaturarsi in modo da non vibrare sullo schermo a causa del troppo intensa.

Brand

Il tema chiaro ha utilizzato i 3 valori dei canali colore hsl del brand senza alterazioni. il tema scuro no. La saturazione è dimezzata e la leggerezza è ridotta un 50% relativo.

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

Colori testo

Con un tema scuro, i colori del testo devono essere chiari. I seguenti colori hanno un'alta di leggerezza, avvicinandoli al bianco.

* {
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
}

Colori superficie

Con il tema scuro, i colori della superficie devono essere scuri. I seguenti colori hanno bassa luminosità e saturazione, con la prima superficie più scura (10%).

* {
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
}

Ombre

Con il tema scuro, le ombre possono essere molto difficili da vedere. Ha senso perché è difficile oscurare qualcosa di già abbastanza buio. È qui che entrano in gioco --shadow-strength-dark è molto utile perché ci consente di scurire ombre modificando una variabile.

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

Controlla anche il livello di saturazione in quell'ombra. Riesci a notare il colore quando esamini l'interfaccia? Prova a rimuovere la saturazione dal devtools, quale preferisci?

Tutti i colori scuri

* {
  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

Sandbox su CodePen

Attenuazione tema

Questa combinazione di colori è incentrata sull'orchestrazione di leggerezza e saturazione. Là dovrebbe essere presente una saturazione sufficiente per mantenere comunque una tonalità visibile, ma dovrebbe anche passare a malapena i punteggi di contrasto perché deve comunque essere attenuata e a basso contrasto.

Brand

* {
  --brand-dim: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 1.25)
    calc(var(--brand-lightness) / 1.25)
  );
}

Colori testo

* {
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
}

Colori superficie

* {
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
}

Ombre

* {
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

Sfoca tutti i colori

* {
  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

Sandbox su CodePen

Colori accessibili

Nota come la luminosità minima nel set di colori del testo scuro è pari al 65% e la maggiore luminosità nelle superfici scure è del 25%. 40% di leggerezza respiro tra di loro. Con il tema chiaro, la respirazione è del 55% nelle il tema chiaro. Mantenimento delle differenze di luminosità tra i colori del testo e della superficie circa il 40-50% può aiutare a mantenere elevati i rapporti di contrasto di colore, pur essendo un leva sottile per regolare nel caso in cui i punteggi siano scarsi.

Lo chiamo "bump bump til ya pass", ovvero l'interazione di un urto leggerezza finché uno strumento non indica che sto superando.

premi Maiusc + Freccia giù per ridurre la luminosità e aumentare il contrasto fino al passaggio

Ciascuno dei temi creati in questa sfida supera i punteggi di contrasto. La combinazione di colori attenuata presenta il contrasto più basso, ma soddisfa comunque i requisiti minimi. Per aiutare gli altri membri del team a utilizzare colori a contrasto efficaci, è una buona idea creare un nome di classe che accoppia il colore della superficie a un colore del testo accessibile.

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}

Screenshot della superficie attenuata e degli abbinamenti di testo con VisBug

Ombra radunata

I temi utilizzano una classe di utilità chiamata .rad-shadow. Questa ombra è stata generata in questo strumento Ombre fluide, che apprezzo molto molto. Ho preso lo snippet generato e l'ho personalizzato con i miei colori e opacità. Il motivo è che ho creato un'ombra che potessi regolare all'interno di ogni combinazione di colori.

A questo scopo, ho creato due variabili per ogni combinazione di colori: il colore e l'intensità dell'ombra. Il colore è indicato per saturazione e oscurità regolazioni, mentre l'intensità serve a un modo semplice per far risaltare l'ombra di intensità quando è una combinazione di colori scuri. Il risultato finale era qualcosa del genere.

:root {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

.rad-shadow {
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
}

Se dovessi andare oltre con le ombre nella mia combinazione di colori, farei l'ombra con gli angoli una costante del token di progettazione, poiché la direzione della luce dovrebbe essere la stessa tra tutte le ombre del design.

Utilizzo delle combinazioni di colori

Una volta che i colori sono stati predefiniti, è il momento di trasformarli in indipendenti dagli schemi. In qualità di CSS, autore all'interno di questo progetto di combinazione di colori, raramente è necessario accedere a un il valore di una combinazione di colori specifica. Voglio fare in modo che rimanga facilmente all'interno del tema.

A questo scopo, l'uso della combinazione di colori deve avvenire esclusivamente attraverso e le proprietà personalizzate generiche, che definiremo a breve. In questo modo che utilizzano le variabili di progettazione non devono mai preoccuparsi di quale combinazione di colori attualmente impostati, devono solo usare i colori della superficie e del testo. Invece di color: var(--text1-light) usa color: var(--text1). Adattamento e cambio di rotta colori vengono creati a un livello molto più elevato nel CSS.

Scopriamo gli stili connettivi del tema chiaro nel seguente blocco di codice: collegare una proprietà personalizzata generica con il colore specifico del tema chiaro. Ora tutti utilizzi di var(--brand) utilizzeranno il colore del brand chiaro.

Tema chiaro (automatico)

:root {
  color-scheme: light;
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

Il sito ora utilizza il tema chiaro. È un momento di successo e molto divertente. Vediamo qualche altro momento, dal momento che usiamo i colori predefiniti i contesti della combinazione di colori.

Tema scuro (automatico)

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

Tema chiaro

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

Tema scuro

[color-scheme="dark"] {
  color-scheme: dark;

  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

Attenuazione tema

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

A questo punto, gli autori sono liberi di utilizzare le combinazioni di colori generiche fornite come e non doversi più preoccupare dei temi.

Conclusione

Ora che sai come ci ho fatto, come lo faresti?! 🙂

Diversificaamo i nostri approcci e impariamo tutti i modi per creare sul web. Crea un codepen o ospita la tua demo, inviaci un tweet e lo aggiungerò al Remix della community di seguito.

Origine

• Fonte delle sfide GUI su GitHub
• Comando iniziale del Codepen per la combinazione di colori

Remix della community - @chris-kruining ha aggiunto un dispositivo di scorrimento della tonalità, modalità di contrasto e colori di stato per no-preference, more e less: demo.