Share
Codurile de culoare HTML sunt o piesă comună și esențială a designului web modern. În timp ce cele mai multe site-uri din zilele noastre sunt proiectate în mare parte în parte cu imagini, culorile sunt deosebit de importante atunci când trebuie să veniți cu o valoare de culoare hexagonală în zbor în timp ce codificați. În acest ghid, vom învăța fundamentele din spatele codării culorilor, oferind în cele din urmă puterea de a veni cu culori fără a utiliza un picker de culoare.
După cum probabil știți, există două modalități comune de a defini o culoare în designul web:
Ambele sunt implementate cel mai adesea folosind CSS sau HTML, după cum puteți vedea mai jos:
Text aici Text aici
.foo culoare: rgb (111,222,111);
În primul exemplu de cod, fiecare text "Text aici" ar apărea ca o culoare gri deschis. Vom analiza de ce mai târziu; totuși, observați cum, chiar dacă metodele de culoare par a fi cu totul diferite, în realitate ele sunt exact aceeași culoare.
În al doilea exemplu, avem doar un cod CSS rapid. Este destul de simplu - orice cu o clasă de "foo" va avea o culoare a textului rgb (111,222,111). Pentru cei mai curiosi, ar fi o culoare verde-ish.
Până acum, majoritatea acestor lucruri ar trebui să aibă sens pentru tine. Să vedem acum exact cum mergem de la acele coduri relativ criptice în ceva mai concret.
În RGB, fiecare valoare dintre virgule poate fi un număr de la 0 la 255. De exemplu:
rgb (10,137,29)
Deoarece RGB reprezintă "Red Green Blue", aceasta înseamnă că există o valoare de 10 pentru roșu, 137 pentru verde și 29 pentru albastru. Inevitabil acestea sunt un fel de fracțiune ireductibilă. Prin urmare:
Cu cât este mai mare numărul, cu atât mai multă culoare va fi în rezultatul final.
Când este setat la zero, nu există nici o culoare particulară. La 255, opusul, desigur, se dovedește adevărat. Prin urmare:
Acest lucru este valabil deoarece sistemul de culori RGB se bazează pe culori prin ușoară. Acest lucru este mult diferit de modul în care creați în mod normal culori, de exemplu, cu vopsea sau creioane colorate. Dacă ați avut o combinație de rgb (255,255,255) folosind vopseaua, ați ieșit probabil cu ceva de genul brun murmur, dar cu siguranță nu alb!
Culoarea hexazecimală este, în general, mai dificil de explicat decât RGB. În principiu, ele sunt aceleași. Cu toate acestea, lucrările interioare hexazecimale sunt, fără îndoială, mai complicate.
Pentru a explica culoarea hexazecimal, va trebui mai întâi să ne întoarcem într-un sistem binar și în baza numărului de șaisprezece numere, pentru a înțelege ce ceva de genul acesta încearcă cu adevărat să "spună":
# 554BFF
Pentru aceia dintre voi care nu știu cum funcționează una dintre aceste lucruri sau ce dintre ele sunt, aici este un scurt ghid:
Dacă a fost puțin confuz, vă recomand să citiți din nou. Dacă în continuare nu are nici un sens, este perfect bine - următoarele exemple vă vor ajuta să vă îmbunătățiți înțelegerea.
Hexadecimal, așa cum sugerează și numele, oferă șaisprezece "valori" utile pentru ca un număr să poată prelua. Așa cum ați fi observat mai devreme, o "nibble" vă poate da orice număr de la 0 la 15: șaisprezece valori totale!
Presupunând că avem următoarele:
1111
Și știind că valorile binare ale fiecărui bit vor deveni după cum urmează:
8 4 2 1
Valoarea binară a lui 1111 va deveni:
8 + 4 + 2 + 1
care este…
15
De asemenea, dacă numărul binar a fost 0000, rezultatul final ar fi fost doar zero, deoarece 0 + 0 + 0 + 0 este egal cu 0.
binar: 0101
Valorile pentru fiecare bit sunt 8,4,2 și 1 (în ordine). Adăugați împreună valorile binare ale celor:
0 + 4 + 0 + 1
Egalitatea 5.
Sperăm că aceste exemple rapide sunt de ajutor. Vă încurajez să încercați pe ceilalți rapid de unul singur. Îți dau chiar și una:
Conversia de la binar la zecimal: 1010
Sugestie: Este între 9 și 11 ani.
Acest lucru poate părea că nu merge nicăieri în legătură cu dezvoltarea web, dar crede-mă, suntem aproape acolo.
În hexazecimal, există șaisprezece reprezentări diferite pentru o secvență binară: 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E și F. Acestea, la rândul lor , reprezintă numerele 0-15 (16 numere totale). Ambele reprezintă același număr binar. Dar repede - oprește-te și gândește - #FFFFFF dă alb, corect? Și nu puteți avea niciodată o literă mai mare decât F într-un cod de culoare HTML. Ține minte asta.
Iată o diagramă rapidă care găsește relația dintre binar, zecimal și hexazecimal:
Aceasta înseamnă că, dacă doriți să creați numărul 15, puteți scrie F în hexazecimal sau 1111 în binar. În plus, dacă doriți să faceți, să zicem, 10, ați scrie A în hexazecimal sau 1010 în binar.
Acum, suntem un pic mai aproape de a imagina exact cum funcționează hexazecimal. Rapid, să ne imaginăm un exemplu de cod HTML de culoare împărțit în trei părți:
# 006699 la -> # 00,66,99
Acum, acest lucru pare puțin familiar; dacă te gândești la ce mă gândesc, ai dreptate. Hexadecimal este organizat exact în același mod ca RGB: are o valoare pentru fiecare roșu, verde și albastru. Diferența de bază este:
Vom analiza acum modul în care puteți crea o valoare de până la 255, deoarece până acum am învățat doar cum să creăm numere de până la 15.
Binar: 0110 Valorile bitului: 128 64 32 16 Se adaugă împreună toate cele care sunt adevărate: 0 + 64 + 32 + 0 Randamente: 96
Am descoperit că prima șuvoadă din dreapta este egală cu șase. Și acum, am descoperit că cea de-a doua nibble din stânga este egală cu 96. Deci, ce faci cu acestea? Doar adăugați-le! 96 + 6 = 102. De aceea, valoarea hexazecimală a lui 66 este de 102 în sistemul zecimal normal.
Ceea ce înseamnă că, în hexazecimal, echivalentul RGB de 66 (în hex) este 102. În consecință, # 666666 este egal cu rgb (102, 102, 102).
Să facem încă un hex la conversia zecimală:
Hexadecimal: FF Binar: 1111 1111 Valori bit: 128 64 32 16 8 4 2 1 Adăugare: 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 Randament: 255
255 este valoarea maximă pentru orice culoare. Deci, dacă am avut #FFFFFF, pe care știm cu toții alb, ar fi rgb (255,255,255), care este de asemenea alb.
Pentru înțelegere, să facem o conversie finală. De data aceasta, vom converti o întreagă culoare hexazecimală în RGB. Culoarea noastră este # 6AB4FF.
6A ------ Binar: 0110 1010 Adăugați: 64 + 32 + 8 + 2 96 + 10 Randamente: 106 ------ B4 ------ Binar: 1011 0100 Adăugare: 128 + 32 + 16 + 4 176 + 4 Rezultate: 180 ------ FF ------ (Am făcut deja acest lucru, deci știm că este de 255)
Concluzie: # 6AB4FF este echivalent cu rgb (106,180,255).
Acum, poate vă întrebați cum ajungem de la aceste valori la o culoare reală pe care o putem imagina în capul nostru. Următoarea secțiune vă va ajuta să o acoperiți. Deci, acum că știm cât de hexazecimal și RGB sunt legate, și acum că știm cum funcționează hexazecimal, acum vom revizui cum poți să vii cu o culoare în zbor în codul tău propriu și te vei ajuta să faci orice culoare fără a fi nevoie să utilizați un picker de culoare.
Rapidă distracție: Deoarece există 8 biți în fiecare valoare roșie, verde și albastră, înseamnă că există 24 de biți în total într-o singură culoare RGB (8 * 3 = 24). Aici găsim termenul de culoare pe 24 de biți, denumit adesea drept "True Color".
Cu o culoare pe 24 de biți, suntem capabili să creăm până la 16.777.216 - peste șaisprezece milioane de culori. Aceasta este de obicei mai mult decât satisfăcătoare pentru orice proiect. Culoarea pe 32 de biți, cu toate acestea, a început să devină mai proeminentă, dar nu neapărat în domeniul designului web. Puteți citi mai multe despre profunzimea culorii la Wikipedia.org în acest articol. În plus, puteți vedea o imagine a tuturor ~ 16 milioane de culori într-o singură imagine aici (David Naylor Blog). Este destul de fascinant, într-adevăr! Dimensiunile imaginii de 4096x4096 au sens, deoarece 4096 este rădăcina pătrată de 16.777.216.
Pentru ca această cunoaștere să fie de folos pentru noi, va trebui să înveți cum să-ți faci propriile culori rapid și ușor. Vom începe cât mai simplu posibil și apoi vom trece în culori mai dificil de articulat.
Să presupunem că vrem să facem o culoare gri în zbor. Culorile în tonuri de gri sunt comune și tind să fie cele mai utile în multe cazuri. Până acum, știm următoarele: # 000000 este egal cu negrul,
și #FFFFFF este egal cu albul. Prin urmare, cele mai comune dintre culorile în tonuri de gri vor fi creșteri între cele două valori. Pentru a face o nuanță de gri, am stabilit în mod corespunzător valori între alb și negru.
În mod logic, o valoare mai apropiată de #FFFFFF va fi un ton mai deschis de gri, iar o valoare mai apropiată de # 000000 va fi mai întunecată. În acest sens, să facem o culoare destul de deschisă. Unele gândiri rapide ne dau următoarea rezoluție: #DDDDDD este confortabil suficient de departe departe de alb, așa că în mod clar va fi un dulce frumos pentru noi.
Mai târziu, vrem să facem un gri mai întunecat. Încă o dată, simplu. Doar faceți ceva de genul # 333333. După cum puteți vedea, valorile gri sunt foarte simplu. Dacă observați că aveți nevoie de o nuanță și mai specifică de gri, amintiți-vă că, ca regulă generală,
dacă fiecare valoare pentru roșu, verde și albastru este aceeași sau aproape similară, va apărea ca și gri. Un astfel de exemplu este culoarea "Gainsboro" care are un cod de culoare al #DCDCDC. Aceasta înseamnă că este doar una mai mică decât culoarea #DDDDDD în fiecare valoare roșie, verde și albastră. Probabil că nu veți putea diferenția între cele două, însă creșterea sau scăderea cu 1 vă va oferi o "precizie gri".
Cel de-al doilea cel mai simplu set de culori pe care le puteți crea sunt roșu, verde și albastru (evident). Să folosim roșu ca exemplu. Dacă vrem să creăm roșu pur RGB, vom da valoarea culorii
valoarea maximă a roșu, cu 0 verde și 0 albastru. Asta are sens? Pentru a face roșu în hexazecimal, am pus doar # FF0000. Acum avem roșu.
Crearea de verde și albastru respectă același principiu. Pentru a face verde pur: # 00FF00 (toate verzi, nimic altceva). Pentru a face pur albastru: # 0000FF (toate albastru, nimic altceva).
Destul de simplu; cu toate acestea, aceste culori sunt, în majoritatea cazurilor, absolut hideous atunci când sunt utilizate într-un design web. Prin urmare, pentru a pune aceste culori la folosire, va trebui să le aplicăm în mod corespunzător.
Din fericire, umbrirea este ușoară. Să folosim albastru pentru acest exemplu. Avem deja setat # 0000FF pentru noi. Pentru a schimba nuanța valorii noastre albastre, trebuie doar să schimbăm ultimele două caractere ale codului de culoare hexazecimal. Din moment ce FF este cel mai înalt albastru posibil, în acest moment nu putem decât să întunecăm. Ca atare, hai să facem asta:
Schimbarea # 0000FF la # 000055 (scăderea cantității de negru, deplasând astfel albastrul mai aproape de negru) va da un albastru mai întunecat.
După cum puteți vedea, umbrirea roșie, verde și albastră este departe de a fi dificilă - este o simplă chestiune de reducere a cantității unei anumite culori. Aceeași regulă se aplică și roșu și verde, nu doar negru, deci # 005500 este o nuanță mai închisă de verde, iar # 550000 este o nuanță mai închisă de roșu. (Desigur, puteți merge mai jos sau mai mare de 55, dacă doriți).
Presupun că probabil te gândești: deci despre galben, purpuriu și toate celelalte culori? Din fericire, este puțin mai complexă decât cele trei mari din RGB. Să începem cu galben.
Pentru a crea galben, va trebui mai întâi să gândim în termeni de spectru de culoare. Un mic mnemonic pe care oamenii îl folosesc este "Roy G. Biv", care înseamnă "roșu, portocaliu, galben, verde, albastru, indigo, violet. Acum logica este oarecum confuză, dar încercați să stați cu mine. Pentru a obține galben, folosim cele două culori principale de la roșu, verde și albastru pe ambele părți ale locului în care ar fi galben. În acest caz, ar fi roșu și verde, dacă am scris # FFFF00, am fi galbeni. Fantastic!
Există doar câteva combinații posibile folosind această metodă, așa că le vom trece repede. Între roșu și albastru pe o roată de culoare, codul va fi # FF00FF, iar noi vom deveni roz sau purpuriu așa cum se numește în mod tradițional. Apoi, între verde și albastru (# 00FFFF), avem cyan. Și acum, din păcate, sunt de fapt toate combinațiile simple pe care le putem face. Restul necesită un gând, pe care îl vom trece peste un minut. În primul rând, să ne dăm seama cum să umbrești aceste culori.
Pur și simplu, vom începe să umblăm cyan de data aceasta, care, după cum ne amintim, este # 00FFFF. Și ... Probabil ați ghicit-o, dar pentru a umbri galben, cyan sau roz, tot ce trebuie să faceți este să modificați orice valoare FF la una mai mică. În acest exemplu, umbrirea cianului până la un soi mult mai întunecat, am putea face ceva de genul # 005555. Unul dintre numele oficial de culoare HTML, DarkCyan, este # 008B8B, astfel încât unul să fie puțin mai ușor decât cel pe care tocmai l-am creat. Deci, acolo o avem: cum să umbrească galben, cyan și roz.
Pentru a face o culoare mai ușoară, este la fel de simplu ca făcând valorile scăzute (valorile 00, de obicei) mai mare și lăsând FF (sau alte culori principale) singur. De exemplu, dacă am avea verde și am vrut să o facem mai ușoară, am începe cu # 00FF00. Apoi, pentru ao ușura, vom crește pur și simplu valorile 00. #AAFFAA produce un verde frumos, de primăvară.
În plus, pentru a face # FF00FF (roz) mai ușoare, este același proces. Măriți valorile scăzute: # FFAAFF. Aceasta produce o culoare roz deschisă. Funcționează ca un farmec!
Până acum, am învățat cum să creăm cele mai simple culori, însă, în majoritatea aplicațiilor, aceste cunoștințe nu vor fi de folos pentru un proiect. Aici intră în joc această a doua parte.
Pentru a crea o culoare frumoasă, va trebui să lucrăm cu ceea ce știm deja și să gândim prin ceea ce încercăm să creăm într-o manieră logică. Să creăm un scenariu; vrem să facem o culoare subtilă portocalie care să se potrivească nevoilor noastre - ceva asemănător unei nuanțe mai puțin întunecate de sodă portocalie.
Vom începe cu ceea ce deja știm să facem, și este galben: # FFFF00. Trebuie să-l deplasăm puțin mai aproape de zona portocalie, așa că, pentru a face acest lucru, vom alinia o parte din verde "trage", așa cum îmi place să spun. În acest fel crește cantitatea de roșu. Am ales să o schimb în # FF5500. Acest exemplu rapid și simplu vă oferă o idee despre modul în care ar trebui să faceți o culoare. Ultimul lucru pe care aș dori să-l menționez este că s-ar putea să te întrebi de ce nu am început să adaug la cantitatea albastră, pe care am lăsat la o valoare de 00. Motivul este că, atunci când începi să adaugi albastru încet în trepte de 11, 22, 33 și așa mai departe, încă arată destul de portocaliu. Cu toate acestea, odată ce ați trecut cu 55 de ani, veți vedea câteva probleme. Mai ales dacă o mărim până la ceva de genul # FF5599. Ce se întâmplă este că se transformă într-o culoare foarte roz. De ce asta? Ei bine, gândiți-vă când am creat inițial roz. Codul a fost # FF00FF. Roșu este maxed out și albastru este maxed out. Deci, în culoarea noastră portocalie, când începeți să schimbați # FF5500 la # FF5599, valorile noastre roșii și verzi nu mai sunt valorile proeminente. În schimb, este roșu și albastru, care dau roz. În acest mod, valoarea 55 pentru verde ar fi pur și simplu să ne lumineze umbra noastră de roz, în loc să o deplasăm spre zona portocalie.
Notă pentru cititor: crearea de coduri de culoare complexe, este adevărat, este destul de nepractic. În momentul în care vă va duce să creați o culoare suficientă, ați fi putut obține cu ușurință câteva culori bune dintr-un picker de culoare. Pentru o culoare complexă, ar fi mai bine să nu încercați să-l creați singur. În schimb, lăsați-l la încercat și adevărat și salvați-vă timp prețios. Tu voi, totuși, doriți să vă folosiți abilitățile pentru a efectua o sarcină simplă, cum ar fi întunecarea sau luminarea unei culori repede în mișcare.
Deci, vedeți acest cod minunat de culoare, văzându-vă în față, dar nu aveți nici o idee ce culoare este cu adevărat. Grozav! Acest lucru este probabil acolo unde este distractiv. Cel mai bun mod de a vă învăța cum să faceți acest lucru este efectuarea unui test simplu. Odată am fost întrebat câteva întrebări despre un test într-unul din cursurile mele de Tehnologia Informației.
Sperăm că ați reușit să vă imaginați toate acestea! Mai ales primele două. Ar fi trebuit să știți că răspunsul la numărul 1 a fost negru sau B. Pentru a doua întrebare, răspunsul a fost, de asemenea, destul de simplu. Urmând schema de roșu, verde, albastru, știm că, din moment ce orice valoare, cu excepția verde, este setată la 00, culoarea va fi o nuanță de verde. În plus, deoarece valoarea pentru verde este FF (sau 255), știm că această culoare va fi verde pur. Astfel, răspunsul va fi A.
Se pare că singura culoare dificil de descifrat aici ar fi numărul trei, # FFCC66. Acest lucru este de înțeles. Deoarece valoarea albastră (care este de 66) este mult mai mică decât celelalte două numere, aceasta ar putea fi considerată relativ irelevantă. Astfel, puteți să o comparați cu culoarea galbenă, # FFFF00. Între cele două, arată cam oarecum asemănătoare. Cu această metodă, puteți să răspundeți la primele trei răspunsuri, deoarece nici unul dintre ele nu este aproape de galben. Prin urmare, răspunsul este D. Valoarea scăzută a culorii verde a culorii va umple ușor culoarea, iar creșterea albastrului va împinge culoarea într-un mod mult mai asemănător cu aurul.
Procesul de decodare a codurilor de culoare include în primul rând gândirea prin ea și compararea cu culorile pe care le cunoașteți deja!
Iată un ultim sfat rapid despre cum puteți accelera crearea unei culori utilizând sistemul hexazecimal. Folosind această metodă, puteți reduce unele coduri de culori de la șapte caractere până la patru (de exemplu, # _ _ _ _ _ _ la # _ _ _). Această metodă se numește stenogramă de culoare, iar ideea din spatele acesteia este că va lua valoarea fiecăruia dintre cele trei personaje principale și le va duplica invizibil. Ceea ce vreau sa spun este faptul ca daca ai avea codul de culoare # 123, ar fi echivalentul # 112233. Puteți face acest lucru pentru orice cod de culoare unde fiecare valoare hexazecimală pentru roșu, verde și albastru este exact același caracter. Unele stenograme mai comune sunt:
Sperăm că acest articol v-a ajutat să aflați cum funcționează codurile de culori. În multe programe, cum ar fi Photoshop, va fi cu siguranță cel mai ușor de utilizat colectorul de culori încorporat. Domeniul central în care această abilitate va fi utilă este atunci când căutați prin intermediul unui cod sursă CSS și doriți să aflați pur și simplu ce tip de culoare este fără a fi nevoie să recurgeți la altă resursă. Indiferent de ce metodă este mai rapidă, ca dezvoltatori web și designeri, acestea sunt lucrurile pe care ar trebui să le știm! Mulțumesc mult pentru citire. Acesta este un subiect ușor de înțeles, deci hai să vorbim mai mult în comentarii!
Accentsconagua