Color Mixer
Amestecați două culori într-un spațiu de culoare ales, în orice proporție, așa cum face CSS color-mix(). Introduceți două culori în orice format CSS, stabiliți proporția celei de-a doua culori între 0 și 100 la sută și alegeți OKLab, OKLCH, Lab, LCH, sRGB, linear sRGB, Display P3, HSL, HWB sau XYZ. Rezultatul include HEX, RGB, HSL și OKLCH, plus o expresie color-mix() gata de folosit în foaia de stil.
Întrebări frecvente
Cum funcționează cantitatea?
Cantitatea reprezintă proporția culorii 2 în amestec. 0% returnează culoarea 1, 100% returnează culoarea 2, iar la 50% rezultatul este la jumătatea distanței dintre ele în spațiul ales. Corespunde formulei color-mix(in space, color1 (100 - p)%, color2 p%).
Ce spațiu de culoare ar trebui să aleg?
OKLab, opțiunea implicită, este uniform din punct de vedere perceptual și evită tonurile intermediare tulburi sau întunecate. sRGB amestecă canalele codificate gamma, la fel ca browserele mai vechi și Sass, ceea ce face ca amestecurile de culori saturate să fie mai întunecate și mai șterse. Lab este vechiul spațiu perceptual CIE și se comportă similar cu OKLab, dar albastrurile sunt mai puțin uniforme.
Ce fac spațiile bazate pe nuanță?
OKLCH, LCH, HSL și HWB interpolează nuanța pe arcul mai scurt al roții culorilor, opțiunea implicită CSS, astfel că rezultatul intermediar își păstrează saturația și poate fi mai viu decât oricare dintre culorile de intrare. Dacă una dintre culori este un gri neutru fără nuanță, se folosește nuanța celeilalte culori.
La ce folosesc linear sRGB și XYZ?
Ambele amestecă intensitățile luminii în mod liniar, ca fasciculele de lumină care se suprapun, așa că rezultatul intermediar pare mai luminos decât în sRGB. Sunt utile pentru efecte bazate pe fenomene fizice și pentru a reproduce aspectul pixelilor estompați sau amestecați.
Cum este tratată transparența?
La fel ca CSS color-mix(), instrumentul amestecă folosind alfa premultiplicată, astfel încât o culoare transparentă să nu împingă rezultatul spre negru. Valoarea alfa este interpolată în aceeași proporție și apare în codurile hexazecimale cu 8 cifre și după bară în funcțiile CSS.
Ce formate de intrare pot folosi?
Coduri Hex cu sau fără #, CSS denumiri de culori, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() spații de culoare precum display-p3 și cmyk(), în orice combinație. Fiecare culoare poate avea până la 100 caractere.
Ce se întâmplă când rezultatul este în afara sRGB?
Amestecarea în Display P3, OKLCH sau LCH poate produce culori pe care sRGB nu le poate afișa. HEX, RGB și HSL sunt apoi mapate în sRGB cu algoritmul CSS Color 4, iar rezultatul este însoțit de o notă; valoarea OKLCH păstrează culoarea nemapată.
Cum folosesc expresia color-mix()?
Lipiți-o în orice proprietate CSS care acceptă o culoare. Expresia identifică valorile de intrare după codul hexazecimal sau după oklch() pentru culorile cu gamă largă, astfel încât browserul să recalculeze același amestec. color-mix() funcționează în toate versiunile actuale de Chrome, Edge, Firefox și Safari.
Cât de precis este rezultatul?
Cantitatea este un procent întreg, iar amestecul se calculează la precizie maximă cu biblioteca culori. Canalele RGB sunt rotunjite la numere întregi, procentele HSL la două zecimale, iar luminozitatea și croma OKLCH la patru, așa că browserele pot diferi cu o unitate la ultima cifră.
Cum obțin mai mulți pași între două culori?
Rulați instrumentul de amestecare cu cantități diferite, cum ar fi 25%, 50% și 75%. Pentru o scară completă către alb, negru sau gri, instrumentele Color Tint, Shade și Tone Generators produc fiecare pas într-un singur tabel.