Când vine vorba de stropirea culorii pe ecran, există câteva modalități de a face acest lucru cu codarea. Hex, RGBA și HSLA sunt trei dintre cele mai utilizate sisteme de coduri de culoare.
Probabil că ați dat peste coduri hexagonale și RGB în trecut, dar HSL, deși este mai ușor de citit de om, este posibil să nu fi fost încă pe radar. Fiecare mod de scriere a culorilor are sens în situații diferite și tot ce aveți nevoie este o înțelegere de bază a fiecărui tip pentru a lua o decizie în cunoștință de cauză. Aici vom explica diferențele dintre RGB, HEX și HSL.
Ce este RGB (roșu, verde, albastru)
Este logic să începem cu valorile RGB, deoarece roșu, Verde, și Albastru sunt cele trei culori pe care ecranele le pot folosi pentru a produce aproape orice altă culoare. Face acest lucru folosind „amestecarea aditivă a culorilor”, dar nu trebuie să vă adânciți în știința acestui lucru pentru a înțelege RGB.
rgb(255, 0, 0) este roșu, deoarece R este maximizat. Dacă setați fie G, fie B, la 255, veți obține verde complet sau albastru complet. Setați-le pe toate la 255 dintr-o dată și veți obține alb (suma tuturor culorilor), în timp ce zero-le redă negru. Dacă adăugați o a patra valoare (canalul alfa, între 0 și 1) puteți obține, de asemenea, transparență: rgba(0, 0, 0, .5) se traduce printr-un negru pe jumătate transparent.
Este simplu, da, dar nu de fapt atât de intuitiv. Echilibrul RGB se poate schimba destul de mult chiar dacă schimbați doar nuanța unei culori, ceea ce face foarte dificil pentru oameni să facă ajustări manuale fără un fel de generator RGB (din care există, din fericire, mulți).
Ce sunt codurile hexadecimale de culoare
Hexele sunt doar un mod diferit de scriere a valorilor RGB. Ceva asemănător cu #6a79f7 (albastru de floarea-de-albastru) se hârteste direct la rgb(106, 121, 247). 6a este roșu, 79 este verde, și f7 este albastru.
În primul rând, trebuie să știți că în sistemul de culori hexagonale literele „af” reprezintă numerele de la zece la cincisprezece. În al doilea rând, este hexazecimal, adică totul este la baza 16. 21 este 2 * 10 + 1 în baza 10, dar în hexazecimal ar fi 2 * 16 + 1. Înmulțiți primul număr cu 16 și adăugați al doilea număr – este la fel de ușor! 6a = 6 * 16 + 10 sau 106. 79 = 7 * 16 + 9 sau 121.
În timp ce matematica este distractivă, în mod evident face codurile hexazecimale chiar mai dureroase pentru oameni decât RGB, deși sunt ușor de copiat-lipit și pot avea combinații memorabile de litere / numere.
Puteți adăuga, de asemenea, transparență codurilor hexagonale punând o valoare echivalentă cu un procent de 255 la început, astfel: #806a79f7. 80 în hexazecimal = 126, care este aproape de 50% din valoarea maximă de 255.
Ce este HSL (Hue, Saturation, Lightness)
HSL a fost conceput destul de mult pentru lizibilitatea umană și câștigă popularitate, în special ca alternativă RGB. Funcționează așa:
Nuanţă înseamnă culoare și folosește gradele roții de culori pentru a vă spune ce culoare aveți. Dacă știți roata de culoare și pozițiile acestor culori principale, ar trebui să puteți spune că 45 vor arăta portocaliu și 270 vor arăta purpuriu doar gândindu-vă o secundă.
- 0 = roșu
- 60 = galben
- 120 = verde
- 180 = cyan
- 240 = albastru
- 300 = magenta
Saturare este în esență cât de colorată este culoarea. 0% saturație înseamnă că culoarea va fi doar o nuanță de gri, în timp ce 100% înseamnă că va arăta o putere maximă. Dacă doriți să dezactivați culoarea sau să o faceți să apară puțin mai mult, puteți schimba această valoare.
Lejeritate vă spune cât de închisă sau strălucitoare este culoarea. 0% luminozitate înseamnă că culoarea dvs. va fi neagră, indiferent de setările de nuanță sau saturație, iar luminozitatea de 100% vă va face alb. După cum ați fi ghicit, 50% vă oferă cea mai precisă culoare.
Cu aceste informații, ar trebui să puteți spune instantaneu ce hsl(0, 100%, 50%) mijloace. E doar roșu! Vrei un roșu mai închis, mai bogat? Încerca 0, 70%, 40%. Poate vrei asta, dar în albastru? Schimbați doar 0 la 240 și îl aveți! De asemenea, are transparență – funcționează la fel ca RGB: doar adăugați o a patra valoare (între 0 și 1), astfel: hsla(240, 70%, 40%, .5).
HSV / HSB și HSI
Ce? Mai multe modele de culoare? Când se termină? Pentru majoritatea oamenilor care lucrează cu culori pe computere, s-a terminat deja. Hex, RGB și HSL sunt de departe cele mai comune metode de notare a culorilor. Dacă vă aflați într-un domeniu care implică o mulțime de imagini și culori, totuși, cum ar fi designul grafic sau învățarea automată a imaginilor, puteți rula peste oameni folosind unul dintre aceste modele de culoare mai ezoterice sau chiar unul dintre celelalte care nu sunt enumerate aici.
HSB înseamnă „Hue Saturation Brightness” și HSVs înseamnă Hue Saturation Value. Sunt de fapt doar nume diferite pentru același model, iar cea mai mare diferență de HSL constă în modul în care definesc saturația. HSI (Hue Saturation Intensity) are câteva diferențe minore față de HSB / HSV, dar nu este utilizat pe scară largă, deci șansele sunt că nu o veți vedea prea mult în sălbăticie.
Ce model de culoare ar trebui să folosesc?
În general, alegerea unui model de culoare este o decizie de proiectare destul de minoră, dar lucrurile bune se fac cu multe decizii mici. În general, codurile hex sunt ușor de copiat și sunt excelente în situații în care oamenii probabil nu vor fi implicați prea mult. RGB / RGBA este decent pentru lizibilitate și este cel mai bine folosit atunci când ar fi frumos dacă un om ar putea uneori să ajusteze transparența. Dacă un om va trebui să schimbe manual culoarea, mergeți cu HSL / HSLA. În afară de asta, este o chestiune de preferință, deși oamenii din echipa HSL tind să fie mai inteligenți și mai arătați.
Credite de imagine: HSL Culoare solidă Cilindru Saturație Gri, Culoare aditivă, Diagrama de culori XTerm, HSL și HSV, Munsell 1943
