W projektowaniu cyfrowym nazwa koloru jest wygodną etykietą, ale nie zastępuje precyzyjnego kodu. Do implementacji w HTML i CSS najlepiej stosować zapis HEX lub RGB, ponieważ nazwy kolorów HTML obejmują ograniczoną listę i nie opisują wszystkich potrzebnych odcieni.
Dlaczego nazwy kolorów to za mało?
Nazwa, taka jak „czerwony”, „koralowy” czy „granatowy”, ułatwia rozmowę z klientem i porządkowanie projektu. Nie wskazuje jednak dokładnej wartości barwy. Kod HEX zapisuje ją jednoznacznie, na przykład #FF6347 oznacza kolor Tomato, czyli pomidorowy.
Sprawdź także: Paleta kolorów farb – jak wybrać idealny odcień do wnętrza?
W modelu RGB każda barwa jest opisana trzema kanałami: czerwonym, zielonym i niebieskim. Wartości mieszczą się w zakresie od 0 do 255. Zapis HEX przedstawia te same informacje za pomocą sześciu znaków szesnastkowych. W praktyce przyjęło się używać go w arkuszach CSS, projektach interfejsów i grafikach przeznaczonych do internetu.
16 podstawowych kolorów HTML
Standardowa paleta nazwanych kolorów HTML/CSS obejmuje 16 podstawowych pozycji. Tych nazw można używać zamiast kodów, ale w rozbudowanych projektach zapis HEX pozostaje czytelniejszy dla dokumentacji i łatwiejszy do kontroli.
Przeczytaj również: Paleta kolorów – jak dobrać idealne zestawienie barw?
| Nazwa HTML | HEX | RGB |
|---|---|---|
| black | #000000 | 0, 0, 0 |
| silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 |
| white | #FFFFFF | 255, 255, 255 |
| maroon | #800000 | 128, 0, 0 |
| red | #FF0000 | 255, 0, 0 |
| purple | #800080 | 128, 0, 128 |
| fuchsia | #FF00FF | 255, 0, 255 |
| green | #008000 | 0, 128, 0 |
| lime | #00FF00 | 0, 255, 0 |
| olive | #808000 | 128, 128, 0 |
| yellow | #FFFF00 | 255, 255, 0 |
| navy | #000080 | 0, 0, 128 |
| blue | #0000FF | 0, 0, 255 |
| teal | #008080 | 0, 128, 128 |
| aqua | #00FFFF | 0, 255, 255 |
Popularne nazwy kolorów i ich kody
Żółcie i pomarańcze
| Nazwa angielska | Nazwa polska | HEX | RGB |
|---|---|---|---|
| Gold | Złoty | #FFD700 | 255, 215, 0 |
| Light Yellow | Jasny żółty | #FFFFE0 | 255, 255, 224 |
| Khaki | Khaki | #F0E68C | 240, 230, 140 |
| Coral | Koralowy | #FF7F50 | 255, 127, 80 |
| Tomato | Pomidorowy | #FF6347 | 255, 99, 71 |
| Orange | Pomarańczowy | #FFA500 | 255, 165, 0 |
Czerwienie i róże
| Nazwa angielska | Nazwa polska | HEX | RGB |
|---|---|---|---|
| Salmon | Łososiowy | #FA8072 | 250, 128, 114 |
| Crimson | Karmazynowy | #DC143C | 220, 20, 60 |
| Firebrick | Ognista cegła | #B22222 | 178, 34, 34 |
| Pink | Różowy | #FFC0CB | 255, 192, 203 |
| Hot Pink | Gorący róż | #FF69B4 | 255, 105, 180 |
| Deep Pink | Głęboki róż | #FF1493 | 255, 20, 147 |
Fiolety
| Nazwa angielska | Nazwa polska | HEX | RGB |
|---|---|---|---|
| Lavender | Lawendowy | #E6E6FA | 230, 230, 250 |
| Violet | Fioletowy | #EE82EE | 238, 130, 238 |
| Orchid | Orchidea | #DA70D6 | 218, 112, 214 |
| Fuchsia | Fuksja | #FF00FF | 255, 0, 255 |
| Medium Purple | Średni fioletowy | #9370DB | 147, 112, 219 |
| Indigo | Indygo | #4B0082 | 75, 0, 130 |
Niebieskie i turkusowe
| Nazwa angielska | Nazwa polska | HEX | RGB |
|---|---|---|---|
| Light Blue | Jasny niebieski | #ADD8E6 | 173, 216, 230 |
| Sky Blue | Błękit nieba | #87CEEB | 135, 206, 235 |
| Turquoise | Turkusowy | #40E0D0 | 64, 224, 208 |
| Steel Blue | Stalowo niebieski | #4682B4 | 70, 130, 180 |
| Royal Blue | Królewski niebieski | #4169E1 | 65, 105, 225 |
| Midnight Blue | Ciemnoniebieski | #191970 | 25, 25, 112 |
Zielenie, brązy i neutralne barwy
| Nazwa angielska | Nazwa polska | HEX | RGB |
|---|---|---|---|
| Lime Green | Limonkowy | #32CD32 | 50, 205, 50 |
| Forest Green | Leśna zieleń | #228B22 | 34, 139, 34 |
| Olive | Oliwkowy | #808000 | 128, 128, 0 |
| Chocolate | Czekoladowy | #D2691E | 210, 105, 30 |
| Saddle Brown | Brązowe siodło | #8B4513 | 139, 69, 19 |
| Beige | Beżowy | #F5F5DC | 245, 245, 220 |
| Dark Gray | Ciemny szary | #A9A9A9 | 169, 169, 169 |
| White Smoke | Biały dym | #F5F5F5 | 245, 245, 245 |
Szarości i przezroczystość w kodzie
Szarość powstaje wtedy, gdy czerwony, zielony i niebieski kanał mają tę samą wartość. W zapisie HEX oznacza to powtarzanie tej samej pary znaków. Im wyższa wartość, tym jaśniejszy odcień:
- #000000 oznacza czerń.
- #333333 oznacza ciemną szarość.
- #808080 oznacza średnią szarość.
- #CCCCCC oznacza jasną szarość.
- #FFFFFF oznacza biel.
RGB opisuje kolor za pomocą trzech kanałów. RGBA dodaje czwarty kanał, alfa, który określa przezroczystość. Wartość alfa wynosząca 1 oznacza pełną widoczność, a 0 pełną przezroczystość. W CSS można użyć na przykład zapisu rgba(255, 0, 0, 0.5), aby uzyskać półprzezroczystą czerwień.
Narzędzia do tworzenia palet
Tabele pomagają znaleźć konkretny kod, ale do budowania spójnych zestawów barw lepiej wykorzystać generatory palet:
- Adobe Color pozwala tworzyć zestawienia na podstawie reguł harmonii kolorystycznej.
- Coolors generuje gotowe palety i pokazuje wartości HEX oraz RGB.
- Canva Color Palettes pomaga dobierać kolory na podstawie obrazu lub gotowych zestawień.
- Narzędzia systemowe przeglądarki pozwalają sprawdzać i modyfikować wartości kolorów bezpośrednio podczas pracy nad stroną.
Najbezpieczniej traktować nazwy jako pomoc w komunikacji, a kod HEX jako właściwy zapis roboczy. Dzięki temu kolor wskazany w projekcie można jednoznacznie odtworzyć w HTML, CSS i narzędziach graficznych.
