Piksele i kolory
Każde zdjęcie na ekranie to tabela malutkich kwadracików, a każdy kwadracik to trzy liczby: ile czerwonego, zielonego i niebieskiego światła. Zmieszaj kolory, zajrzyj w piksele i sprawdź, ile waży obrazek.
Mikser światła RGB
Trzy latarki świecą na ciemną ścianę. Tam, gdzie światła się nakładają, kolory się dodają.
Zajrzyj w ekran
Tak wygląda Twój kolor pod mikroskopem. Każdy piksel ekranu to trzy paski, czyli subpiksele: czerwony, zielony i niebieski. Świecą mocniej albo słabiej, a z daleka oko widzi jeden kolor.
Lupa pikseli
Najedź lub dotknij obrazka, żeby zobaczyć piksel. Przy dużym powiększeniu przeciągnij, żeby się przesunąć, a w pikselach pojawią się ich liczby.
Rozdzielczość i głębia koloru
Mniej pikseli to obrazek „kanciasty”. Mniej bitów na kolor to mniej odcieni i widoczne „schodki” w kolorach. Oba ustawienia zmniejszają rozmiar pliku.
Narysuj piksele
Tak widzi to komputer
Obrazek to tabela 12 × 12 = 144 liczb w zapisie HEX. Każda zajmuje 3 bajty, więc cały rysunek ma 432 bajty.
Gry z kolorami
Ustaw suwaki w mikserze u góry tak, żeby Twój kolor był jak najbliżej wzoru. Potem kliknij „Sprawdź”.
Który kolor ma takie liczby? Pomyśl, które światło świeci najmocniej.
Jak komputer zapisuje obrazy?
Co to jest piksel?
Piksel (od angielskiego picture element, element obrazu) to najmniejszy kwadracik, z którego składa się obraz cyfrowy. Ekran Full HD ma 1920 × 1080, czyli ponad 2 miliony pikseli. Każdy ma jeden kolor, a z daleka oko skleja je w gładki obraz.
Model RGB
Ekran nie miesza farb, tylko światło. Każdy piksel składa się z trzech subpikseli: czerwonego (Red), zielonego (Green) i niebieskiego (Blue). Jasność każdego zapisuje się liczbą od 0 do 255, czyli w jednym bajcie. Czerwony i zielony razem dają żółty, a wszystkie trzy na maksimum dają biały. To mieszanie addytywne, czyli dodawanie światła.
Zapis HEX
Programiści zapisują kolory w systemie szesnastkowym: dwie cyfry na każdy kanał. Kolor #FF8C00 to R = FF (255), G = 8C (140), B = 00 (0), czyli pomarańczowy. Ten zapis spotkasz w CSS, programach graficznych i grach.
Głębia koloru
Trzy bajty na piksel to 24 bity, czyli 256 × 256 × 256 = 16 777 216 kolorów. Ludzkie oko nie odróżni ich wszystkich. Starsze komputery miały mniej bitów: 8 bitów to 256 kolorów, a 1 bit to tylko czerń i biel.
Rozdzielczość i rozmiar pliku
Rozmiar obrazka bez kompresji liczy się prosto: szerokość × wysokość × 3 bajty. Zdjęcie 4000 × 3000 z telefonu to 36 milionów bajtów, czyli ok. 34 MB. W praktyce plik JPG waży kilka megabajtów, bo jest skompresowany: program zapisuje go sprytniej, gubiąc szczegóły, których oko i tak nie zauważy.
Farby a światło
Na kartce kolory mieszamy inaczej. Farby i tusz pochłaniają światło, więc im więcej ich zmieszasz, tym ciemniej. Drukarki używają modelu CMYK (cyjan, magenta, żółty i czarny), a ekrany modelu RGB.
Tabele kolorów i rozdzielczości
Podstawowe kolory w RGB i HEX
| Kolor | RGB | HEX |
|---|---|---|
| czarny | 0, 0, 0 | #000000 |
| biały | 255, 255, 255 | #FFFFFF |
| czerwony | 255, 0, 0 | #FF0000 |
| zielony | 0, 255, 0 | #00FF00 |
| niebieski | 0, 0, 255 | #0000FF |
| żółty | 255, 255, 0 | #FFFF00 |
| cyjan (turkus) | 0, 255, 255 | #00FFFF |
| magenta (purpura) | 255, 0, 255 | #FF00FF |
| szary | 128, 128, 128 | #808080 |
| pomarańczowy | 255, 140, 0 | #FF8C00 |
Rozdzielczości i rozmiar bez kompresji
| Rozdzielczość | Pikseli | Rozmiar (24 bity) |
|---|---|---|
| 640 × 480 | 307 200 | ok. 0,9 MB |
| 1280 × 720 (HD) | 921 600 | ok. 2,6 MB |
| 1920 × 1080 (Full HD) | 2 073 600 | ok. 5,9 MB |
| 3840 × 2160 (4K) | 8 294 400 | ok. 23,7 MB |
| 4000 × 3000 (12 Mpx) | 12 000 000 | ok. 34,3 MB |
Najczęstsze pytania o piksele i kolory
Co to jest piksel?
Piksel to najmniejszy element obrazu cyfrowego, mały kwadrat o jednym kolorze. Zdjęcia, ekrany i grafiki komputerowe składają się z tysięcy lub milionów pikseli ułożonych w prostokątną siatkę.
Co oznacza RGB?
RGB to skrót od Red, Green, Blue, czyli czerwony, zielony i niebieski. Każdy kolor na ekranie powstaje z tych trzech świateł o różnej jasności, zapisanej liczbami od 0 do 255.
Jak zamienić kolor RGB na HEX?
Każdą z trzech liczb zamień na system szesnastkowy i zapisz dwiema cyframi, a potem połącz je po kolei ze znakiem # na początku. Na przykład RGB(255, 140, 0) to FF, 8C i 00, czyli #FF8C00.
Ile kolorów może wyświetlić komputer?
Przy 24 bitach na piksel (po 8 bitów na kanał) komputer może zapisać 16 777 216 kolorów. Nowoczesne ekrany HDR używają 10 bitów na kanał, co daje ponad miliard kolorów.
Dlaczego czerwony i zielony dają żółty?
Bo na ekranie mieszamy światło, a nie farby. Gdy świecą jednocześnie czerwony i zielony subpiksel, oko odbiera to tak samo jak żółte światło. Przy farbach jest odwrotnie: mieszanie daje ciemniejsze kolory.
Jak obliczyć rozmiar zdjęcia?
Pomnóż szerokość przez wysokość w pikselach i przez liczbę bajtów na piksel (zwykle 3). Zdjęcie 1920 × 1080 bez kompresji zajmuje 1920 · 1080 · 3 = 6 220 800 bajtów, czyli ok. 5,9 MB. Pliki JPG i PNG są mniejsze dzięki kompresji.
Co to jest rozdzielczość?
Rozdzielczość to liczba pikseli w poziomie i w pionie, np. 1920 × 1080. Im większa, tym więcej szczegółów mieści obraz, ale tym więcej pamięci zajmuje plik.