Miscelatore colori

Mescola due colori con un cursore di proporzione e vedi il risultato

Che cos'è e come funziona?

Un mixer di colori combina due o più colori e mostra il colore misto risultante. A differenza di un selettore di colori, un mixer simula il risultato della combinazione di pigmenti o luce, aiutando designer, artisti e sviluppatori a prevedere quale miscela apparirà.

Questo strumento supporta la miscelazione RGB (standard per schermi), l'interpolazione HSL (produce gradienti perceptivamente più morbidi) e la miscelazione RYB opzionale (il modello tradizionale del pittore).

Casi d'uso

• Variazioni del colore del brand: mescola il tuo colore primario con il bianco (tinta) o il nero (ombra) in varie proporzioni per generare una palette completa.
• Punto medio del gradiente: mescola i colori di inizio e fine per trovare il colore ideale del punto medio di un gradiente CSS.
• Colori di stato UI: mescola il colore base di un pulsante con una sovrapposizione scura per prevedere il colore dello stato hover.

Domande frequenti

Perché mescolare rosso e blu dà risultati diversi sullo schermo rispetto alla pittura?

Gli schermi usano RGB additivo: rosso + blu = magenta. I pigmenti usano la miscelazione sottrattiva, dando un viola-marrone più scuro. Il modello RYB è un'approssimazione semplificata.

Qual è la differenza tra tinta, ombra e tono?

Tinta = colore + bianco (più chiaro). Ombra = colore + nero (più scuro). Tono = colore + grigio (attenuato).

Come funziona matematicamente la miscelazione RGB 50/50?

Ogni canale RGB viene mediato indipendentemente: mix(rosso1, rosso2) = (rosso1 + rosso2) / 2.

È possibile la miscelazione nativa dei colori in CSS?

CSS color-mix() è supportato in tutti i principali browser dal 2023: color-mix(in srgb, red 50%, blue 50%).

Colore

Generatore palette colori · Generatore sfumatura CSS · Verificatore contrasto · Cercatore nome colore