CSS color-mix()

Adam Argyle

Il CSS color-mix() consente di combinare i colori in uno degli spazi colore supportati direttamente dal CSS.

Supporto dei browser

• 111
• 111
• 113
• 16,2

Origine

Prima del giorno color-mix(), per scurire, schiarire o desaturare un colore, gli sviluppatori utilizzavano o i preprocessori CSS calc() a colori canali.

Prima con SCSS

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass ha prodotto ottimi risultati devono rispettare le specifiche CSS per il colore. Tuttavia, non c'è stato un modo reale per mescolare i colori in CSS. Per avvicinarti devi fare il calcolo delle i valori dei colori. Ecco un esempio ridotto di come CSS può simulare la combinazione oggi:

Prima con HSL

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() porta la possibilità di combinare i colori con CSS. Gli sviluppatori possono scegliere lo spazio colore da combinare e quanto dovrebbe essere dominante ogni colore nel mix.

Dopo

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

È quello che vogliamo. Flessibilità, potenza e API con funzionalità complete. sui tuoi

Combinazione di colori in CSS

Il CSS esiste in un mondo con più spazi colore e gamma di colori e, per questo motivo, non è facoltativo specificare lo spazio colore per la combinazione. Inoltre, diversi gli spazi colore possono cambiare drasticamente i risultati di una combinazione, quindi conoscerne gli effetti di uno spazio colore ti aiuterà a ottenere i risultati necessari.

Per un'introduzione interattiva, prova questo strumento color-mix(): - Esplorare gli effetti di ogni spazio colore. - Esplora gli effetti dell'interpolazione delle tonalità quando si mescola un colore cilindrico spazio (lch, oklch, hsl e hwb). - Modificare i colori da combinare facendo clic su una delle due caselle dei colori superiori. - Utilizza il dispositivo di scorrimento per modificare il rapporto di miscelazione. - Codice CSS color-mix() generato disponibile in basso.

Combinazione dei vari spazi colore

Lo spazio colore predefinito per la combinazione (e i gradienti) è oklab. Offre per ottenere risultati coerenti. Puoi anche specificare spazi colore alternativi per personalizzare in base alle tue esigenze.

Prendi, ad esempio, black e white. Lo spazio colore in cui si mescolano non crea una grossa differenza, vero? Sbagliato.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);

Prova la demo

Ha un grande effetto!

Considera blue e white per un altro esempio. Ho scelto questa app in particolare perché ma la forma di uno spazio colore può influire sui risultati. In questo caso è che la maggior parte degli spazi colore passa al viola durante il passaggio dal bianco al blu. it mostra anche come oklab sia uno spazio colore così affidabile per il mix, che più in linea con le aspettative della maggior parte delle persone di mescolare bianco e blu (no viola).

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

Prova la demo

Conoscere gli effetti di uno spazio colore con color-mix() è un'ottima conoscenza per creando i gradienti . La sintassi del colore 4 consente inoltre ai gradienti di specificare lo spazio colore, dove una gradiente mostra la combinazione su un'area dello spazio.

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

Prova la demo

Se ti stai chiedendo quale sia lo spazio colore "migliore", non ce n'è uno. Ecco perché ci sono così tante opzioni. Inoltre, i nuovi spazi colore non ha inventato una delle due (vedi oklch e oklab), se una era "la migliore". Ciascun colore spazio può avere un momento unico di risplendere ed essere la scelta giusta.

Ad esempio, per ottenere un mix vibrante, utilizza hsl o hwb. Nel seguente In demo, si mescolano due colori vivaci (magenta e lime) e hsl e hwb entrambi producono un risultato vivace, mentre s web e oklab producono colori insaturi.

Prova la demo

Se vuoi essere coerente e sottile, usa oklab. Nella demo seguente, che combina blu e nero, hsl e hwb producono colori eccessivamente vivaci e con variazioni di tonalità, mentre s/# e oklab producono un blu più scuro.

Prova la demo

Trascorri cinque minuti nel color-mix() parco giochi, testando colori diversi spazi e spazi e inizierai a farti un'idea dei vantaggi di ogni spazio. Inoltre ci aspettiamo che vengano fornite ulteriori indicazioni sugli spazi colore man mano che il potenziale nelle nostre interfacce utente.

Regolazione del metodo di interpolazione tonalità

Se si sceglie di mescolare uno spazio colore cilindrico, essenzialmente qualsiasi colore spazio con un canale di tonalità h che accetta un angolo, puoi specificare se l'interpolazione viene eseguita su shorter, longer, decreasing e increasing. Questo è trattati in dettaglio in questa Guida ai colori HD per saperne di più.

Nota: se lo spazio colore è cilindrico, nel parco giochi color-mix() verrà aggiunto un ulteriore menu a discesa per la selezione. Puoi giocare lì per vedere gli effetti del mix.

Vediamo lo stesso esempio di mix da blu a bianco, ma questa volta è solo spazi cilindrici con diversi metodi di interpolazione di tonalità.

Prova la demo

Ecco un altro Codepen che ho creato per visualizzare l'interpolazione delle tonalità, ma in particolare per i gradienti. Credo che questo vi aiuterà a capire lo spazio colore produce il risultato mix quando viene specificata l'interpolazione tonalità, fai uno studio!

Avviso: fornire un metodo di interpolazione tonalità per una superficie non cilindrica lo spazio dei colori è un errore di sintassi in color-mix().

Combinazione con sintassi di diversi colori

Finora abbiamo misto principalmente colori con nomi CSS, come blue e white. Colore CSS è pronto per mescolare i colori provenienti da due diversi spazi colore. Questo è un altro motivo per cui è fondamentale specificare lo spazio colore per il mix, dato che lo spazio comune per quando i due colori non si trovano nello stesso spazio.

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

Nell'esempio precedente, hsl e display-p3 vengono convertiti in oklch e infine mescolare. Bello e flessibile.

Regolazione dei rapporti di miscelazione

Non è molto probabile che ogni volta che mescoli tu voglia parti uguali di ogni colore, come ha mostrato la maggior parte degli esempi finora. Buone notizie, c'è una sintassi per articolare in che misura ogni colore deve essere visto nel mix risultante.

Per iniziare questo argomento, ecco un esempio di mix che sono tutti equivalenti (e dalle specifiche):

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

Questi esempi chiariscono bene le custodie perimetrali. La prima serie esempi mostrano come il 50% non sia obbligatorio, ma può essere specificato facoltativamente. L'ultima l'esempio mostra un caso interessante di quando i rapporti superano il 100% se aggiunti insieme, vengono fissati allo stesso modo al 100% totale.

Nota inoltre che se solo un colore specifica un rapporto, si presume che l'altro sia il resto al 100%. Ecco alcuni esempi aggiuntivi per illustrare meglio questo concetto comportamento degli utenti.

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

I seguenti esempi illustrano due regole: 1. Quando i rapporti superano il 100%, vengono bloccati e distribuiti equamente. 1. Quando viene fornito un solo rapporto, l'altro colore viene impostato su 100 meno quel rapporto.

L'ultima regola è leggermente meno ovvia; cosa succede se vengono fornite le percentuali per entrambi i colori e la loro somma non raggiunge il 100%?

color-mix(in lch, purple 20%, plum 20%)

Questa combinazione di color-mix() genera trasparenza e trasparenza del 40%. Se la somma dei rapporti non è pari al 100%, la combinazione risultante non sarà opaca. Nessuno dei colori sarà completamente miscelato.

Nidificare color-mix()

Come tutti i CSS, la nidificazione viene gestita correttamente e come previsto; le funzioni interne risolvere prima i problemi e restituire i relativi valori al contesto padre.

color-mix(in lch, purple 40%, color-mix(plum, white))

Nidifica tutto ciò che ti serve per ottenere il risultato che cerchi.

Creare una combinazione di colori chiari e scuri

Creiamo combinazioni di colori con color-mix().

Una combinazione di colori di base

Nel seguente CSS, viene creato un tema chiaro e uno scuro in base a un valore esadecimale del brand. colore. Il tema chiaro crea due colori del testo blu scuro e un bianco molto chiaro colore della superficie di sfondo. Quindi, in una query multimediale con preferenze scura, alle proprietà vengono assegnati nuovi colori, quindi lo sfondo è scuro e i colori del testo sono leggeri.

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

Tutto questo si ottiene mescolando bianco o nero in un colore di brand.

Combinazione di colori intermedia

che consente di fare un passo in più rispetto all'aggiunta di temi chiari e scuri. Nella la demo seguente, le modifiche al gruppo di pulsanti di opzione aggiornano un attributo nell'HTML tag [color-scheme="auto"], che consente ai selettori di applicare in modo condizionale un tema a colori.

Questa demo intermedia mostra anche una tecnica a tema cromatico in cui tutte le i colori del tema sono elencati in :root. In questo modo è facile vederli tutti insieme e regolare, se necessario. Più avanti nel foglio di stile, puoi utilizzare le variabili così come sono definito. In questo modo eviterai di dover cercare nel foglio di stile le manipolazioni del colore sono tutti contenuti nel blocco iniziale :root.

Casi d'uso più interessanti

Ana Tudor ha un'ottima demo con alcuni casi d'uso per lo studio:

Debug di color-mix() con DevTools

Chrome DevTools offre un ottimo supporto per color-mix(). Riconosce e evidenzia la sintassi, crea un'anteprima del mix proprio accanto allo stile in il riquadro Stili e consente di scegliere colori alternativi.

In DevTools il risultato sarà simile a questo:

Buon mix!