Culoare de fundal. Nuanță și Saturație

Alegeți culori pentru interfața dvs. care obosesc ochii utilizatorului?

Dacă folosiți o culoare strălucitoare și saturată pentru fundal, le îngreunați viața utilizatorilor: le devine imediat dificil să vizualizeze pagina. Luminos, culori saturate a atrage cea mai mare atenție. Dar dacă există multă o culoare atât de strălucitoare, aceasta creează o încărcare crescută pe retină, trebuie să vă încordați prea mult ochii.

De exemplu, aruncați o privire la mostrele de culoare din imaginea de mai sus. Coloana din stânga este formată din culori cu luminozitate și saturație maximă. Coloana din dreapta este formată din culori la 80% luminozitate și 80% saturație. Toleranța pentru coloana din stânga va fi mai mică decât coloana din dreapta, deoarece culorile strălucitoare, saturate sunt foarte dure pentru ochii tăi.

Să vorbim de ce să folosim Culori vii pentru fundalul site-ului sau aplicației nu merită. Da, astăzi este o tendință nouă - de a oferi luminozitate la maximum. Dar nu este întotdeauna necesar să mergi de acord cu moda, mai ales dacă se limitează la nebunie sau interferează cu utilizarea produsului tău.

Să începem cu teorie.

Luminozitate vs. Saturare

Luminozitatea și saturația sunt proprietăți diferite culorile. Primul este cât de mult alb sau negru este amestecat culoarea dată, în timp ce al doilea se referă la cantitatea de gri.

Creșterea luminozității nu înseamnă că și saturația scade. Când scadeți saturația, transformați culoarea într-o nuanță de gri. Când creșteți luminozitatea, creșteți cantitatea de culoare, dar nu faceți culoarea gri ().

Folosiți culoare în interfața dvs. care stresează ochii utilizatorului?

Dacă utilizați o culoare strălucitoare și saturată pentru fundal, atunci reduceți timpul petrecut de utilizator pe pagina dvs. Culorile luminoase și saturate atrag multă atenție. Dar utilizarea unor astfel de culori în în număr mare pune o mare presiune asupra ochilor utilizatorului.

La ce coloană te poți uita cel mai lung?

Exemplu. Privește cu atenție culorile din imaginea de mai sus.

Coloana din stânga conține culori cu luminozitate și saturație maximă. Coloana din dreapta conține culori cu luminozitate și saturație egale cu 80%.

Atenția ta pentru coloana din stânga va fi mai mică decât cea din dreapta, deoarece culorile strălucitoare pun multă presiune asupra ochilor.

Luminozitate vs Saturație

Luminozitatea și Saturația sunt proprietăți diferite ale culorii. Prima proprietate înseamnă cât de mult alb sau negru este amestecat în culoare. A doua proprietate este cât de mult gri este în culoare.

Creșterea luminozității - nu reduceți saturația. Când reduceți saturația, amestecați culoarea cu o nuanță de gri. Când creșteți luminozitatea, faceți culoarea mai deschisă, dar nu gri.

Sus: Creșterea luminozității - mai mult alb. Partea de jos: mai puțină saturație - mai mult gri

Efectul culorii asupra atenției și excitării

Studiul Hue, Saturation and Luminance Effect a constatat că culorile cu saturație și luminozitate ridicate atrag cea mai mare atenție. Autorul acestui studiu a concluzionat că aceste proprietăți de culoare sunt mai importante pentru a atrage atenția decât nuanțele.

Alte două studii - „The Exciting Effect of Color Saturation” și „Color and Emotion” au arătat că culorile saturate sunt asociate cu cea mai mare excitare. Nuanța afectează, de asemenea, excitarea, dar saturația și luminozitatea au cel mai puternic efect.

Folosiți culori strălucitoare și saturate în butoane

Culorile luminoase și saturate atrag atenția utilizatorului, dar nu o țineți mult timp. Folosirea unor astfel de culori este ca și cum ai striga lângă utilizator. Le vei atrage atenția doar pentru o vreme.

Prin urmare, ar trebui să utilizați aceste culori numai pe elementele de interfață care necesită o acțiune din partea utilizatorului, cum ar fi butoanele. Aceste culori vor atrage atenția utilizatorului asupra comenzilor și le vor face mai ușor de găsit la momentul potrivit.

Stânga: fundalul este luminos și saturat. Prin urmare, toată atenția la fundal, și nu la buton. Dreapta: butonul folosește o culoare strălucitoare și saturată. Acesta atrage atenția utilizatorului

Utilizați o culoare închisă și mai puțin saturată pentru fundal

Mai bine să faci culoare de fundal mai întunecat și mai puțin saturat. Când culoarea este întunecată, conținutul de alb este redus. În timp ce scăderea saturației crește cantitatea de gri.

Fundalul rezultat nu va distrage atenția utilizatorului de textul sau conținutul paginii. Acest lucru permite utilizatorului să citească pagina cu ușurință și fără distragere.

Stânga: neplăcut pentru ochi. Fundalul este luminos și saturat. Luminozitate și saturație maximă în imaginea din stânga. Dreapta: plăcut ochiului. Fundalul este întunecat și mai puțin saturat. Luminozitatea și saturația mai scăzute

Găsirea culorii de fundal potrivite

Există mulți factori de luminozitate și saturație pe care îi puteți utiliza pentru culoarea de fundal. Crearea unei grile de mostre de culoare vă va ajuta să găsiți cea mai bună culoare pentru fundalul dvs.

Mai întâi selectați nuanța principală și setați-o la luminozitate și saturație maxime. Valoarea nuanței este stocată și servește ca punct de referință pentru reglarea luminozității și a saturației.

Duplicați nuanța de bază a culorii (swatch) pentru a crea patru noi mostre de culoare cu saturație și luminozitate reduse.

Reduceți nivelul de luminozitate al celor două mostre de culoare create. Și reduceți saturația celorlalte două mostre. Când reglați culoarea, utilizați trepte de zece.

Plasați mostrele de culoare saturate la stânga nuanței originale cu luminozitatea și saturația setate la 100%. În dreapta, plasați mostre de culoare cu luminozitate minimă și maximă.

Acum creați un al doilea rând de mostre de culoare. Reduceți luminozitatea și saturația față de primul rând de culori. Când scădeți valorile, utilizați aceeași valoare pentru fiecare set de mostre de culoare.

Drept urmare, niciuna dintre culorile celui de-al doilea rând nu are 100% saturație și luminozitate. Prin urmare, aceste culori sunt cele mai potrivite pentru utilizare în muncă.

Puteți încerca să creați un alt rând de mostre de culoare dacă nu sunteți mulțumit de rezultat. Pentru a face acest lucru, creați un al treilea nivel de mostre de culoare și reduceți valorile de luminozitate și saturație pentru fiecare dintre ele.

Acum aveți un total de opt culori optime cu diferite rapoarte de luminozitate și saturație.

Exemple de culori bune și rele de folosit în fundalul site-ului

Următoarele sunt exemple de pagini care sunt plăcute și neplăcute pentru ochi. Observați cât timp puteți privi fiecare dintre paginile din exemple.

Stânga - verde rău (Panic sau Prismic). Dreapta - verde bun (

Specificații privind corectarea clarității conturului unei imagini color

1. Nuanta de culoareși Saturație

2. Ascutire

3. Corecție automată

Nuanță și Saturație

După corectarea culorii, distorsiunea din imagine ar trebui eliminată sau cel puțin redusă semnificativ. Cu toate acestea, saturația culorilor poate fi insuficientă. În acest caz, ar trebui să utilizați metoda de corecție a saturației.

Această metodă este implementată în editorii grafici ca o corecție a imaginii în modelul de culoare HSL.

Acest model de culoare pentru computer este în esență similar cu HSB (HSV). Dar principalii săi parametri sunt: ​​tonul, luminozitatea și saturația. Dacă ne imaginăm modelul de culoare HSL ca o figură, atunci acesta va fi un con hexagonal dublu (reflectat). Baza sa, ca și cea a HSB, este culorile de bază, iar vârfurile: culoare alba, ajustat prin saturație, și negru, caracterizat prin luminozitate. Astfel, modelul de culoare HSL este unul dintre cele mai multe exemple clare concepte intuitive de nuanță, saturație și luminozitate.

Creșterea saturației culorii în imagine sau în zona sa selectată se realizează prin creșterea valorii parametrului S al formulei de culoare a pixelilor.

Interfață de corectare a imaginii în modelul de culoare HSL prin exemplu

Reglarea saturației folosind programul exemplu Adobe Photoshop CS6

Când creșteți saturația culorilor, trebuie să aveți grijă să nu depășiți gama de culori a dispozitivului pe care se presupune că va fi afișată imaginea.

Saturație normală a culorii

Din gama de culori

Pentru a corecta luminozitatea și saturația, nu este necesar să convertiți imaginea la modelul de culoare HSL, dar poate fi util să efectuați vârful.

Locația meniului Sharpening

Ca urmare a acțiunii de filtrare, apare o mascare neclară; programul face o copie a imaginii, găsește zone din copie cu modificări semnificative de culoare și ton ( tranziție bruscă, contrast puternic) și le ascutește marginile, ceea ce duce la o creștere a clarității contururilor (contrastul „pe margini”) și nu afectează zonele de odihnă („netede”). Pe baza acestei imagini clare, se creează o mască neclară, care este suprapusă unei imagini originale ușor neclare.

Interfață de ascuțire

Când se simulează o creștere a clarității conturului, zonele de pixeli cu luminozitate redusă și crescută sunt construite de-a lungul contururilor. Făcând acest lucru cu pixeli dintr-o imagine plină color poate introduce distorsiuni de culoare, rezultând benzi colorate străine de-a lungul marginilor. ÎN grafica pe computer astfel de artefacte se numesc halo de culoare sau halou de culoare .

Culoarea de fundal este suficientă element important orice pagină web. În primul rând, stabilește starea de spirit corectă și starea generală de spirit a site-ului, iar în al doilea rând, facilitează percepția textului.

Culoarea de fundal a unei pagini web este setată folosind atributul bgcolor al etichetei .

Exemplul 1: Schimbarea culorii de fundal

Culoarea poate fi specificată în valoare hexazecimală sau după numele acesteia.

Deși puteți specifica orice culoare pentru fundal, majoritatea site-urilor folosesc fundal albși litere negre, ca variantă cea mai consacrată.

imagine de fundal

Ca fundal, puteți utiliza orice imagine potrivită pentru aceasta. Fundalul nu trebuie să distragă atenția de la text, în timp ce acesta ar trebui să fie bine combinat cu culorile pagini web și să fie de dimensiuni mici pentru a se încărca rapid. Dacă, după cele de mai sus, doriți totuși să adăugați o imagine de fundal în pagină, ar trebui să utilizați atributul de fundal al etichetei .

Exemplul 2: Adăugarea unei imagini de fundal

Dacă imaginea dimensiune mai mică ecranul monitorului, acesta va fi reprodus orizontal și vertical.

Deoarece imaginea de fundal se încarcă mai lent decât culoarea de fundal, se poate întâmpla ca textul să nu poată fi citit pentru o perioadă până când imaginile sunt încărcate. Același lucru se poate întâmpla cu imaginile dezactivate în browser. Prin urmare, se recomandă să setați întotdeauna culoarea de fundal împreună cu imaginea de fundal (exemplul 3).

Exemplul 3: Utilizarea unei imagini de fundal și a unei culori de fundal

fundal fix

În mod implicit, atunci când utilizați bara de defilare, imaginea de fundal se mută odată cu conținutul paginii web. Internet Explorer vă permite să remediați fundalul folosind atributul bgproperties="fixed" al etichetei .

Exemplul 4 - Setarea unui fundal fix

Prin specificarea atributului bgproperties, așa cum se arată în Exemplul 4, imaginea de fundal de pe pagina web va rămâne staționară, iar textul, grafica și alte elemente se vor muta cu bara de defilare.