CodeKitHubCe este acest instrument?
Un mixer de culori interpolează liniar canalele roșu, verde și albastru ale două culori la o proporție aleasă, exact calculul folosit intern de un gradient. La 0% rezultatul este Culoarea A, la 100% este Culoarea B, iar la 50% este media aritmetică a fiecărui canal RGB.
Acest lucru diferă de amestecarea vopselei fizice (care este substractivă și depinde de pigmenți) și nu este același lucru cu media în spațiul HSL — interpolarea liniară RGB este ceea ce folosesc gradientele CSS, instrumentele de design și majoritatea utilitarelor de tipul „culoare între două culori”, astfel încât rezultatul se potrivește cu ceea ce ai vedea într-un gradient de browser între aceleași două culori.
De ce să-l folosești?
- Găsește o culoare de hover sau stare activă cu aspect natural, situată între culoarea de bază și un accent — în loc să ghicești o ajustare la întâmplare.
- Vezi codul HEX exact la orice proporție, nu doar estimezi dintr-o captură de ecran a unui gradient.
- Scala în 11 pași îți oferă o paletă completă de la o culoare la alta dintr-un singur clic, utilă pentru vizualizarea datelor sau un gradient cu mai multe opriri.
- Dă clic pe orice pas pentru a-i copia instant codul HEX.
- Gratuit, instant și complet local — fără încărcare, fără cont.
Cum se folosește
- Alege Culoarea A și Culoarea B folosind selectoarele de culoare sau tastând un cod HEX.
- Trage cursorul de proporție pentru a stabili cât din Culoarea B se amestecă.
- Citește valorile HEX și RGB rezultate deasupra mostrei de culoare.
- Dă clic pe orice mostră din scala de 11 pași de mai jos pentru a-i copia codul HEX.
Exemplu
Intrare
Culoarea A #3B82F6 (albastru), Culoarea B #F59E0B (chihlimbar), proporție 50%Rezultat
#9B9E7D — rgb(155, 158, 125)La exact 50%, fiecare canal RGB este media aritmetică a canalelor celor două culori de intrare.
Întrebări frecvente
De ce nu se potrivește acest rezultat cu ce aș obține amestecând vopsea reală?
Amestecarea vopselei este substractivă (pigmenții absorb lumina) și depinde de pigmenții specifici folosiți — amestecarea vopselei albastre cu galbenă dă, de exemplu, verde. Acest instrument amestecă lumina (canalele RGB) în mod aditiv/liniar, la fel cum fac ecranele, gradientele CSS și majoritatea instrumentelor digitale de design. Cele două sisteme produc rezultate cu adevărat diferite prin construcție, nu dintr-o eroare.
Este la fel ca un linear-gradient CSS între cele două culori?
Da — un linear-gradient(colorA, colorB) CSS interpolează canalele RGB la fel ca acest instrument, astfel încât culoarea pe care ai vedea-o la mijlocul acelui gradient se potrivește cu rezultatul de 50% de aici.
De ce arată uneori culoarea amestecată tulbure sau cenușie?
Amestecarea a două nuanțe saturate, dar foarte diferite (precum albastru și portocaliu, aproape complementare) în spațiul RGB produce adesea un punct de mijloc gri-maroniu, cu saturație scăzută — aceasta este o proprietate reală a interpolării RGB, nu o eroare. Dacă vrei un amestec mai viu, încearcă culori mai apropiate pe cercul cromatic, sau amestecă în spațiul HSL ajustând nuanța și păstrând saturația ridicată (lucru pe care acest mixer RGB simplu nu îl face).
Pot amesteca mai mult de două culori deodată?
Nu într-un singur pas — instrumentul amestecă exact două culori. Ca să combini trei, amestecă primele două la proporția dorită, copiază rezultatul și inserează-l ca noua Culoare A față de a treia culoare. Procedând etapizat, ai și control asupra ponderii, lucru pe care o simplă medie a trei culori nu ți l-ar oferi.
Ar trebui să folosesc acest instrument sau Generatorul de nuanțe de culoare?
Dacă ai nevoie de o culoare situată între două culori diferite — de exemplu, o nuanță de tranziție între albastrul brandului tău și un accent chihlimbariu — folosește acest mixer. Dacă ai nevoie de variante mai deschise și mai închise ale unei singure culori (stări de hover, fundaluri, o scală de tip Tailwind 50-900), folosește în schimb Generatorul de nuanțe de culoare: acesta păstrează fixe nuanța și saturația și variază doar luminozitatea, astfel încât fiecare rezultat rămâne clar în aceeași familie de culori.
Ce formate de culoare pot introduce în câmpurile de input?
Câmpurile text acceptă coduri HEX pe 6 cifre, cu sau fără # la început (de ex. 3B82F6 sau #3B82F6). Hex-ul scurtat pe 3 cifre, notația rgb() și numele de culori CSS nu sunt interpretate acolo — dar poți alege vizual orice culoare cu selectorul nativ de culoare de lângă fiecare câmp, iar câmpul HEX se actualizează corespunzător.