Sări la conținut
TextArray

Cum se convertesc culorile între HEX, RGB și HSL

Blog /

Designerii și dezvoltatorii web lucrează adesea cu culori în diferite formate în proiecte, sisteme de design și instrumente. Indiferent dacă comutați între o machetă de design în HSL, un fișier CSS folosind RGB sau un ghid de marcă în HEX, a ști cum să convertiți între aceste formate economisește rapid timp și previne greșelile.

Înțelegerea celor trei formate de culoare principale

Notația HEX (hexazecimală) reprezintă culorile ca coduri de șase caractere, cum ar fi #FF5733, unde perechile de caractere definesc intensitatea roșu, verde și albastru. RGB (roșu, verde, albastru) utilizează valori zecimale de la 0 la 255 pentru fiecare canal de culoare, de exemplu, rgb(255, 87, 51). HSL (nuanță, saturație, luminozitate) descrie culoarea folosind un unghi pentru nuanță (0-360°), un procent pentru saturație (0-100%) și un procent pentru luminozitate (0-100%), scris ca hsl(9, 100%, 60%).

De ce să convertiți între formate

Instrumente și contexte diferite favorizează formate diferite. Designerii lucrează adesea în HSL, deoarece este intuitiv pentru reglarea luminozității și a saturației. Dezvoltatorii web folosesc RGB sau HEX în foile de stil CSS. Producția de imprimare poate avea nevoie de un spațiu de culoare diferit. Conversia vă permite să mutați lucrările între instrumente fără a respecifica manual culorile.

Cum funcționează conversia

Conversia între formate implică relații matematice. HEX-to-RGB este simplu: împărțiți cele șase caractere în trei perechi și convertiți fiecare din hexazecimal (baza 16) în zecimal (baza 10). RGB-to-HSL este mai complex, găsind valorile maxime și minime ale canalului, apoi obținând nuanța, saturația și luminozitatea. Procesele inverse aplică matematica inversă pentru a reveni.

Conversia culorilor online

Calculul manual este predispus la erori pentru conversii repetate. Utilizare Convertor de culoare pentru a transforma instantaneu între HEX, RGB și HSL. Lipiți o culoare în orice format și vedeți echivalentele în toate celelalte, eliminând nevoia de a înțelege singur matematica.

Asigurați alegeri de culori accesibile

După ce ați convertit o culoare, verificați că respectă standardele de accesibilitate folosind Verificator de contrast pentru a confirma un contrast suficient cu textul dvs. Dacă aveți nevoie de inspirație pentru design, Generator aleator de culori produce palete proaspete pe care le puteți converti apoi în formatul preferat.

Confidențialitate: culorile rămân pe dispozitiv

Convertorul de culoare procesează fiecare conversie în browser-ul dvs. nu este trimisă date către un server. Paletele dvs. de culori, modelele în curs de desfășurare și specificațiile mărcii rămân private pe dispozitiv. Instrumentul funcționează offline după ce pagina se încarcă, astfel încât să puteți continua conversia culorilor fără acces la internet.