Kody kolorów Twittera. Samouczek HTML
Jak wiadomo, kolor może wpływać na stan człowieka: zarówno psychiczny, jak i fizyczny. Każdego dnia, przeglądając strony internetowe, oczy oceniają miliony kolorów i odcieni. Projektant stron internetowych zaznajomiony z psychologią koloru może manipulować nastrojem odwiedzającego, aby osiągnąć określone cele.
Wynika to z faktu, że niektóre odcienie uspokajają, a niektóre wręcz przeciwnie, podniecają. Następnie porozmawiamy o tym, jak kolor jest syntetyzowany i wyświetlany za pomocą technologii komputerowej.
RGB to model kolorów reprezentujący metodę uzyskiwania wszystkich kolorów i ich odcieni poprzez zmieszanie w różnych proporcjach trzech głównych składników, którymi są:
- Kolor czerwony ( Czerwony);
- zielony kolor ( Zielony);
- Kolor niebieski ( Niebieski).
Stąd wzięła się skrócona nazwa RGB. Te kolory zostały wybrane jako główne nie bez powodu: powodem jest fizjologia siatkówki ludzkiego oka i sposób, w jaki je postrzega:
Model RGB pozostaje dziś najpopularniejszy i służy do reprodukcji kolorów na ekranach telewizorów i monitorach komputerów. Ponieważ producenci nadają swoim produktom różne cechy, w 1996 roku stworzono ujednolicony system syntezy kolorów oparty na RGB o nazwie sRGB, nad którym Microsoft i HP współpracowały.
Numeryczna reprezentacja koloru
Jak wspomniano wcześniej, kolory RGB powstają w wyniku zmieszania kolorów podstawowych. Do opisu intensywności każdego z nich przyjęto schemat, w którym kolor jest reprezentowany przez zakres 0-255 (8 bitów), co w zapisie szesnastkowym odpowiada 00-FF.
Oznacza to, że kolory podstawowe będą wyglądać następująco:
- Czerwony – RGB (255,0,0);
- Zielony – RGB (0,255,0);
- Niebieski – RGB (0,0,255);
Jeśli intensywność koloru przyjmuje wartości mniejsze niż 255, wówczas uzyskuje się różne odcienie czerwieni, zieleni i błękitu. Poniżej znajduje się tabela ich gradacji, a także wartości szesnastkowe każdego z odcieni:
Tabele kolorów RGB
Naturalnie, oprócz gradacji kolorów podstawowych, istnieją odcienie mieszane, a ich liczba jest dość duża. Dlatego stworzono tabelę kolorów RGB, która prezentuje wszystkie istniejące odcienie, a także ich nazwy i reprezentacje numeryczne ( w postaci dziesiętnej i szesnastkowej).
Możesz zobaczyć to tutaj. Ta tabela znacznie ułatwia życie projektantom stron internetowych, ponieważ w ciągu kilku sekund można znaleźć wymagany odcień i poznać jego reprezentację numeryczną.
Bezpieczna paleta kolorów RGB
Jednak w pewnym momencie pojawił się problem z wyświetlaniem kolorów w różnych przeglądarkach i aby go rozwiązać, skompilowano tzw. „bezpieczną” paletę kolorów RGB, którą uzyskano na podstawie obliczeń matematycznych.
Gdy przeglądarka nie będzie w stanie poprawnie wyświetlić koloru, spróbuje uzyskać coś zbliżonego do tego, czego potrzebuje, mieszając sąsiednie kolory, a najprawdopodobniej wynik będzie całkowicie nie do przyjęcia:
Używając kodów kolorów RGB z tej palety, twórca stron internetowych może być spokojny o wyświetlanie kolorów na stronach swojej witryny internetowej podczas przeglądania ich za pomocą różnych przeglądarek, platform i monitorów. Chociaż w tej chwili tabela bezpiecznych kolorów traci na znaczeniu ( postęp technologiczny wciąż nie stoi w miejscu), stosując go można, jak to się mówi, spać spokojnie.
Kolor złoty w modelu RGB
Słowo „złoto” zostało po raz pierwszy użyte na początku XIV wieku na określenie koloru pierwiastka chemicznego zwanego Aurum – złoto. W modelu RGB kolor złoty jest reprezentowany przez następujące wartości liczbowe:
- RGB (255, 215, 0) – system dziesiętny;
- HEX #FFD700 – system szesnastkowy.
Kolor beżowy w modelu RGB
Kolor beżowy zajmuje w historii dość znaczące miejsce, choć nie jest najbardziej wyraziste. Wiele zabytków kultury, zwłaszcza starożytne rzeźby, wykonano ze steatytu i steatytu, które mają beżowy odcień. W modelu RGB kolor beżowy ma następującą reprezentację numeryczną.
W HTML kolor można określić na trzy sposoby:
Ustawianie koloru w HTML według jego nazwy
Niektóre kolory można określić na podstawie nazwy, używając nazwy koloru w języku angielskim jako wartości. Najczęstsze słowa kluczowe: czarny, biały, czerwony, zielony, niebieski itp.:
Kolor tekstu – czerwony
Najpopularniejsze kolory standardu World Wide Web Consortium (W3C):
| Kolor | Nazwa | Kolor | Nazwa | Kolor | Nazwa | Kolor | Nazwa |
|---|---|---|---|---|---|---|---|
| Czarny | Szary | Srebro | Biały | ||||
| Żółty | Limonka | wodny | Fuksja | ||||
| Czerwony | Zielony | Niebieski | Fioletowy | ||||
| Kasztanowaty | Oliwa | Marynarka wojenna | Cyraneczka |
Przykład użycia różnych nazw kolorów:
Przykład: określenie koloru poprzez jego nazwę
- Spróbuj sam "
Nagłówek na czerwonym tle
Nagłówek na pomarańczowym tle
Nagłówek na tle limonki
Biały tekst na niebieskim tle
Nagłówek na czerwonym tle
Nagłówek na pomarańczowym tle
Nagłówek na tle limonki
Biały tekst na niebieskim tle
Określanie koloru za pomocą RGB
Podczas wyświetlania różnych kolorów na monitorze podstawą jest paleta RGB. Dowolny kolor uzyskuje się poprzez zmieszanie trzech podstawowych: R - czerwony, G - zielony, B - niebieski. Jasność każdego koloru jest podawana w jednym bajcie i dlatego może przyjmować wartości od 0 do 255. Na przykład RGB(255,0,0) jest wyświetlane jako czerwony, ponieważ kolor czerwony jest ustawiony na najwyższą wartość (255) i reszta jest ustawiona na 0. Możesz także ustawić kolor jako procent. Każdy parametr wskazuje poziom jasności odpowiedniego koloru. Na przykład: wartości rgb(127, 255, 127) i rgb(50%, 100%, 50%) ustawią ten sam średni zielony kolor:
Przykład: Określanie koloru za pomocą RGB
- Spróbuj sam "
rgb(127, 255, 127)
RGB(50%, 100%, 50%)
rgb(127, 255, 127)
RGB(50%, 100%, 50%)
Ustaw kolor według wartości szesnastkowej
Wartości R G B można również określić za pomocą szesnastkowych (HEX) wartości kolorów w postaci: #RRGGBB gdzie RR (czerwony), GG (zielony) i BB (niebieski) to wartości szesnastkowe od 00 do FF (tak samo jak dziesiętne 0-255 ) . System szesnastkowy w odróżnieniu od systemu dziesiętnego opiera się, jak sama nazwa wskazuje, na liczbie 16. W systemie szesnastkowym stosowane są następujące znaki: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Tutaj cyfry od 10 do 15 zastąpiono literami łacińskimi. Liczby większe niż 15 w systemie szesnastkowym są reprezentowane przez połączenie dwóch znaków w jedną wartość. Na przykład najwyższa liczba 255 w systemie dziesiętnym odpowiada najwyższej wartości FF w formacie szesnastkowym. W przeciwieństwie do systemu dziesiętnego, liczba szesnastkowa jest poprzedzona symbolem skrótu. # na przykład #FF0000 jest wyświetlany jako czerwony, ponieważ kolor czerwony ma najwyższą wartość (FF), a pozostałe kolory mają ustawioną wartość minimalną (00). Znaki po symbolu skrótu # Można pisać zarówno wielkimi, jak i małymi literami. System szesnastkowy pozwala na użycie skróconej formy #rgb, gdzie każdy znak jest odpowiednikiem double. Zatem wpis #f7O należy traktować jako #ff7700.
Przykład: Kolor szesnastkowy
- Spróbuj sam "
czerwony: #FF0000
zielony: #00FF00
niebieski: #0000FF
czerwony: #FF0000
zielony: #00FF00
niebieski: #0000FF
czerwony+zielony=żółty: #FFFF00
czerwony+niebieski=fioletowy: #FF00FF
zielony+niebieski=cyjan: #00FFFF
Lista powszechnie używanych kolorów (nazwa, HEX i RGB):
| angielskie imie | Imię rosyjskie | Próbka | KLĄTWA | RGB | ||
|---|---|---|---|---|---|---|
| amarant | amarant | #E52B50 | 229 | 43 | 80 | |
| Bursztyn | Bursztyn | #FFBF00 | 255 | 191 | 0 | |
| wodny | Niebieski zielony | #00FFFF | 0 | 255 | 255 | |
| Lazur | Lazur | #007FFF | 0 | 127 | 255 | |
| Czarny | Czarny | #000000 | 0 | 0 | 0 | |
| Niebieski | Niebieski | #0000FF | 0 | 0 | 255 | |
| Niebieski Bondi | Woda z plaży Bondi | #0095B6 | 0 | 149 | 182 | |
| Mosiądz | Mosiądz | #B5A642 | 181 | 166 | 66 | |
| brązowy | brązowy | #964B00 | 150 | 75 | 0 | |
| Cerulean | Lazur | #007BA7 | 0 | 123 | 167 | |
| Ciemna wiosenna zieleń | Ciemna wiosenna zieleń | #177245 | 23 | 114 | 69 | |
| Szmaragd | Szmaragd | #50C878 | 80 | 200 | 120 | |
| Bakłażan | Bakłażan | #990066 | 153 | 0 | 102 | |
| Fuksja | Fuksja | #FF00FF | 255 | 0 | 255 | |
| Złoto | Złoto | #FFD700 | 250 | 215 | 0 | |
| Szary | Szary | #808080 | 128 | 128 | 128 | |
| Zielony | Zielony | #00FF00 | 0 | 255 | 0 | |
| Indygo | Indygo | #4B0082 | 75 | 0 | 130 | |
| Jadeit | Jadeit | #00A86B | 0 | 168 | 107 | |
| Limonka | Limonka | #CCFF00 | 204 | 255 | 0 | |
| Malachit | Malachit | #0BDA51 | 11 | 218 | 81 | |
| Marynarka wojenna | Ciemny niebieski | #000080 | 0 | 0 | 128 | |
| Och | Ochra | #CC7722 | 204 | 119 | 34 | |
| Oliwa | Oliwa | #808000 | 128 | 128 | 0 | |
| Pomarańczowy | Pomarańczowy | #FFA500 | 255 | 165 | 0 | |
| Brzoskwinia | Brzoskwinia | #FFE5B4 | 255 | 229 | 180 | |
| Dynia | Dynia | #FF7518 | 255 | 117 | 24 | |
| Fioletowy | Fioletowy | #800080 | 128 | 0 | 128 | |
| Czerwony | Czerwony | #FF0000 | 255 | 0 | 0 | |
| Szafran | Szafran | #F4C430 | 244 | 196 | 48 | |
| Zielone morze | Zielone morze | #2E8B57 | 46 | 139 | 87 | |
| Bagno zielone | Bołotny | #ACB78E | 172 | 183 | 142 | |
| Cyraneczka | Niebieski zielony | #008080 | 0 | 128 | 128 | |
| Ultramaryna | Ultramaryna | #120A8F | 18 | 10 | 143 | |
| Fioletowy | Fioletowy | #8B00FF | 139 | 0 | 255 | |
| Żółty | Żółty | #FFFF00 | 255 | 255 | 0 | |
Kody kolorów (tła) według nasycenia i odcienia.
Wład Merzewicz
W HTML kolor jest określany na jeden z dwóch sposobów: przy użyciu kodu szesnastkowego lub poprzez nazwę określonych kolorów. Najczęściej stosowana jest metoda oparta na szesnastkowym systemie liczbowym, gdyż jest ona najbardziej uniwersalna.
Kolory szesnastkowe
HTML używa liczb szesnastkowych do określenia kolorów. System szesnastkowy w odróżnieniu od dziesiętnego opiera się jak sama nazwa wskazuje na liczbie 16. Liczby będą następujące: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Liczby od 10 do 15 zastępuje się literami łacińskimi. W tabeli 6.1 pokazuje zgodność między liczbami dziesiętnymi i szesnastkowymi.
Liczby większe niż 15 w systemie szesnastkowym powstają poprzez połączenie dwóch liczb w jedną (tabela 6.2). Na przykład liczba 255 w systemie dziesiętnym odpowiada liczbie FF w formacie szesnastkowym.
Aby uniknąć nieporozumień przy definiowaniu systemu liczbowego, liczbę szesnastkową poprzedza się symbolem skrótu #, na przykład #aa69cc. W tym przypadku wielkość liter nie ma znaczenia, dlatego dopuszczalne jest wpisanie #F0F0F0 lub #f0f0f0.
Typowy kolor używany w HTML wygląda następująco.
Tutaj kolor tła strony internetowej jest ustawiony na #FA8E47. Symbol skrótu # przed liczbą oznacza, że jest ona szesnastkowa. Pierwsze dwie cyfry (FA) definiują czerwony składnik koloru, cyfry od trzeciej do czwartej (8E) definiują składnik zielony, a dwie ostatnie cyfry (47) definiują składnik niebieski. Efektem końcowym będzie ten kolor.
| FA. | + | 8E | + | 47 | = | FA8E47 |
Każdy z trzech kolorów – czerwony, zielony i niebieski – może przyjmować wartości od 00 do FF, co daje łącznie 256 odcieni. Zatem całkowita liczba kolorów może wynosić 256 x 256 x 256 = 16 777 216 kombinacji. Model kolorów oparty na składnikach czerwonym, zielonym i niebieskim nazywa się RGB (czerwony, zielony, niebieski; czerwony, zielony, niebieski). Model ten jest addytywny (od dodaj - dodaj), w którym dodanie wszystkich trzech składników tworzy kolor biały.
Aby ułatwić nawigację po kolorach szesnastkowych, należy wziąć pod uwagę kilka zasad.
- Jeśli wartości składników koloru są takie same (na przykład: #D6D6D6), wówczas efektem będzie szary odcień. Im wyższa liczba, tym jaśniejszy kolor, z wartościami od #000000 (czarny) do #FFFFFF (biały).
- Jasnoczerwony kolor powstaje, gdy składnik czerwony osiąga maksimum (FF), a pozostałe składniki są ustawione na zero. Kolor o wartości #FF0000 to najbardziej czerwony możliwy odcień czerwieni. To samo dotyczy koloru zielonego (#00FF00) i niebieskiego (#0000FF).
- Żółty (#FFFF00) powstaje przez zmieszanie czerwieni i zieleni. Widać to wyraźnie na kole barw (ryc. 6.1), które przedstawia kolory podstawowe (czerwony, zielony, niebieski) oraz uzupełniające lub dodatkowe. Należą do nich żółty, cyjan i fiolet (zwany także magentą). Ogólnie rzecz biorąc, dowolny kolor można uzyskać mieszając kolory blisko niego. W ten sposób kolor cyjan (#00FFFF) uzyskuje się przez połączenie koloru niebieskiego i zielonego.
Ryż. 6.1. Koło kolorów
Kolory oparte na wartościach szesnastkowych nie muszą być dobierane empirycznie. W tym celu odpowiedni jest edytor graficzny, który może współpracować z różnymi modelami kolorów, na przykład Adobe Photoshop. Na ryc. Rysunek 6.2 przedstawia okno wyboru koloru w tym programie; wynikowa wartość szesnastkowa bieżącego koloru jest obrysowana linią. Możesz skopiować i wkleić go do swojego kodu.
Ryż. 6.2. Okno wyboru kolorów w Photoshopie
Kolory sieciowe
Jeśli ustawisz jakość oddawania barw monitora na 8 bitów (256 kolorów), ten sam kolor może być wyświetlany inaczej w różnych przeglądarkach. Dzieje się tak ze względu na sposób wyświetlania grafiki, gdy przeglądarka pracuje na własnej palecie i nie może pokazać koloru, którego nie ma w jej palecie. W tym przypadku kolor zostaje zastąpiony kombinacją pikseli innych, zbliżonych do niego kolorów imitujących dany. Aby zapewnić, że kolor będzie taki sam w różnych przeglądarkach, wprowadzono paletę tzw. kolorów internetowych. Kolory internetowe to te kolory, dla których każdy składnik - czerwony, zielony i niebieski - jest ustawiony na jedną z sześciu wartości - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Wartość szesnastkowa tego składnika jest podana w nawiasach. Łączna liczba kolorów ze wszystkich możliwych kombinacji daje 6x6x6 - 216 kolorów. Przykładowy kolor sieciowy to #33FF66.
Główną cechą kolorów internetowych jest to, że wyglądają tak samo we wszystkich przeglądarkach. W tej chwili znaczenie kolorów internetowych jest bardzo małe ze względu na poprawę jakości monitorów i rozszerzenie ich możliwości.
Kolory według nazwy
Aby uniknąć konieczności zapamiętywania zestawu liczb, możesz zamiast tego użyć nazw powszechnie używanych kolorów. W tabeli 6.3 pokazuje nazwy popularnych nazw kolorów.
| Nazwa koloru | Kolor | Opis | Wartość szesnastkowa |
|---|---|---|---|
| czarny | Czarny | #000000 | |
| niebieski | Niebieski | #0000FF | |
| fuksja | Jasny fiolet | #FF00FF | |
| szary | Ciemno szary | #808080 | |
| zielony | Zielony | #008000 | |
| Limonka | Jasnozielony | #00FF00 | |
| kasztanowaty | Ciemno czerwony | #800000 | |
| marynarka wojenna | Ciemny niebieski | #000080 | |
| Oliwa | Oliwa | #808000 | |
| fioletowy | Ciemny fiolet | #800080 | |
| czerwony | Czerwony | #FF0000 | |
| srebro | Jasny szary | #C0C0C0 | |
| cyraneczka | Niebieski zielony | #008080 | |
| biały | Biały | #FFFFFF | |
| żółty | Żółty | #FFFF00 |
Nie ma znaczenia, czy określisz kolor poprzez jego nazwę, czy za pomocą liczb szesnastkowych. Metody te mają jednakowy efekt. Przykład 6.1 pokazuje, jak ustawić kolory tła i tekstu strony internetowej.
Przykład 6.1. Kolor tła i tekstu
Przykładowy tekst
W tym przykładzie kolor tła jest ustawiany za pomocą atrybutu bgcolor znacznika
i kolor tekstu poprzez atrybut tekstowy. W przypadku różnorodności atrybut tekstowy jest ustawiony na liczbę szesnastkową, a atrybut bgcolor na zarezerwowane słowo kluczowe teal .>>Zarządzanie kolorami
Szesnastkowe wartości kolorów RGB
Metody opisu i przetwarzania koloru różnią się między sobą tym, do jakiego ostatecznego przedstawienia są przeznaczone. Porównajmy na przykład reprezentację kolorów w druku i na monitorach komputerowych. W pierwszym przypadku brana jest podstawa biały kolor papieru, na który następnie nanoszone są trzy kolory podstawowe: niebieski, fioletowy I żółty. Mieszając się ze sobą i z białym kolorem papieru w różnych proporcjach, te trzy podstawowe kolory dają różne odcienie kolorów, z wyjątkiem czystej czerni lub przy całkowitym braku farb dają biały papier. Jeśli dodamy do nich kolor czarny, otrzymamy CMYK- metoda transmisji koloru, gdy żądany kolor uzyskuje się poprzez odjęcie brakujących kolorów od bieli.
W drugim przypadku brana jest podstawa czarny kolor ekranu monitora, którego każda komórka świeci w jednym z trzech kolorów: czerwony-czerwony, zielony-zielony i niebieski-niebieski. Następnie, przy całkowitym braku jakiejkolwiek poświaty, otrzymujemy czysty czarny kolor ekranu, a dowolny z wymaganych kolorów jest określony przez stosunek każdego z trzech kolorów. W tym przypadku otrzymamy RGB-sposób przenoszenia barw. Kolory podstawowe mogą wahać się od 0
zanim 255
lub z 0%
zanim 100%
lub może być reprezentowany jako wartość szesnastkowa. Na poniższym rysunku możesz zobaczyć rezultaty mieszania kolorów podstawowych.
System liczb szesnastkowych, w przeciwieństwie do systemu liczb dziesiętnych, ma nie dziesięć cyfr, ale szesnaście - stąd nazwa. W związku z tym mogą istnieć tylko niepowtarzalne warianty kombinacji dwóch cyfr - 256 , aby kontynuować serię liczb po 9 listy od A zanim F, zatem szereg będzie wyglądał tak -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
W tym przypadku kolor jest określony przez trzy liczby szesnastkowe, z których każda składa się z dwóch cyfr. Pierwsza liczba określa intensywność czerwony kolory, średnie zielony, Ostatnia rzecz- niebieski zabarwienie. Wszystkie liczby mogą przyjmować wartości z zakresu od 00 zanim FF(od 0 do 255). Na przykład: kolor zielony jest podawany jako #00FF00, czerwony - podobny #FF0000, niebieski - podobny #0000FF, biały - podobny #FFFFFF, całkowity brak koloru lub czerni jest podawany jako #000000 .
W poniższym formularzu możesz określić dowolne wartości szesnastkowe dla każdego z trzech kolorów i zobaczyć efekt ich wymieszania klikając w pole wyjściowe.
Przykłady niektórych szesnastkowych wartości kolorów RGB: gradacja czerwieni, błękitu i zieleni.
| pogląd | kod | pogląd | kod | pogląd | kod | pogląd | kod | pogląd | kod | pogląd | kod |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Określanie koloru za pomocą literałów łańcuchowych
Dla ułatwienia niektórym kolorom i ich kombinacjom nadano nazwy rozpoznawalne przez wszystkie przeglądarki, a wiele z nich stało się możliwe do określenia po nazwie. Poniższa tabela przedstawia niektóre nazwy kolorów:
| pogląd | Nazwa | pogląd | Nazwa | pogląd | Nazwa | pogląd | Nazwa |
| Biały | Czerwony | Pomarańczowy | Żółty | ||||
| Zielony | Niebieski | Fioletowy | Czarny | ||||
| Alicja niebieska | Antyczna biel | wodny | Akwamaryn | ||||
| Lazur | Beżowy | For | Blanchedalmond | ||||
| Niebieskofioletowy | brązowy | Burlywood | Cadetblue | ||||
| Chartreuse | Czekolada | Koral | Chabrowy | ||||
| Jedwab kukurydziany | Karmazynowy | Cyjan | Ciemny niebieski | ||||
| Darkcyan | Ciemnozłoty Pręt | Ciemny szary | Ciemnozielony | ||||
| Ciemne khaki | Ciemnopurpurowy | Ciemnooliwkowy | Ciemna pomarańcza | ||||
| Darkorchid | Ciemno czerwony | Ciemny łosoś | Ciemnozielony | ||||
| Ciemnoniebieski | Ciemnoszary | Ciemnoturkusowy | Ciemnofioletowy | ||||
| Głęboki róż | Głęboki błękit | Dimgray | Dodgerblue | ||||
| Cegła szamotowa | Kwiatowobiały | Zielony las | Fuksja | ||||
| Gainsboro | Duchbiały | Złoto | Nawłoć | ||||
| Szary | Zielony żółty | Spadź | Gorący róż | ||||
| Indianred | Indygo | kość słoniowa | Khaki | ||||
| Lawenda | Lawendowy rumieniec | Cytrynowy | Jasny niebieski | ||||
| Jasnokoralowy | Jasnocyjan | Jasnozimnyrodyżółty | Jasnozielony | ||||
| Jasny szary | Jasnoróżowy | Lekki łosoś | Jasnozielony | ||||
| Jasnoniebieski | Jasnoszary | Jasnostalowy błękit | Jasny zółty | ||||
| Limonka | Limonkowy | Bielizna | Magenta | ||||
| Kasztanowaty | Średniakwamaryn | Średni niebieski | Średniorchidea | ||||
| Średnifioletowy | Średniozielony | Średnioniebieski | Średnio wiosenny zielony | ||||
| Średni turkus | Średnifioletowy | Niebieska północ | Krem miętowy | ||||
| Mglista Róża | Navajobiały | Marynarka wojenna | Oldlace | ||||
| Oliwa | Oliwerab | Pomarańczowy czerwony | Orchidea | ||||
| Palezłoty pręt | Bladozielony | Paletaturkus | Palefioletowy | ||||
| Papaja | Brzoskwiniowy | Peru | Różowy | ||||
| Śliwka | Pudrowy błękit | Różowobrązowy | Królewski niebieski | ||||
| Saddlebrown | Zielone morze | Muszla | Sjena | ||||
| Srebro | Niebieskie niebo | Odcień niebieskiego | Popielaty | ||||
| Śnieg | Wiosenna zieleń | Stalowo - niebieski | Dębnik | ||||
| Cyraneczka | Oset | Pomidor | Turkus | ||||
| Fioletowy | Pszenica | Biały dym | Żółty zielony |
Stosowanie bezpiecznej palety kolorów
Niestety na różnych platformach, przy różnych ustawieniach systemu, problemem jest prawidłowe odwzorowanie kolorów. Rzecz w tym, że przeglądarka zawsze stara się dostosować paletę kolorów dokumentu do ustawień systemu i możliwości monitora, samodzielnie mieszając kolory i zastępując je. W rezultacie czasami użytkownik nie widzi dokładnie tego, co chciał mu pokazać webmaster. Wyjściem z tej sytuacji okazało się zastosowanie palety, której każdy kolor będzie renderowany jednakowo przez wszystkie przeglądarki na różnych platformach. Jest to tzw gwarantowane paleta, zwana także bezpieczna paleta. Ta paleta zawiera kolory, których składowe koloru przyjmują następujące wartości: 00 ,33 ,66 ,99 , CC,FF, na wszystkie możliwe sposoby 216 ich kombinacje.
| pogląd | kod | pogląd | kod | pogląd | kod | pogląd | kod | pogląd | kod | pogląd | kod |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
Tabela (paleta) kolorów html daje możliwość samodzielnego wyboru tonu, którego potrzebujesz. Wartość koloru jest wyświetlana w trzech formatach: szesnastkowym, RGB i HSV.
- Hex składa się z trzech dwuznakowych wartości w systemie liczb szesnastkowych. Na przykład: #ff00b3, gdzie pierwsza para cyfr jest czerwona, druga zielona, a trzecia niebieska.
- RGB (RedGreenBlue) ma postać „200 100 255”, wskazując ilość odpowiedniego tonu (czerwony, zielony, niebieski) w wynikowym kolorze.
- HSV (Hue, Saturation, Value – ton, nasycenie, wartość) – model barw, w którym współrzędne wynoszą:
- Barwa - odcień koloru, może wahać się od 0° do 360°.
- Nasycenie - nasycenie, waha się od 0-100 lub 0-1. Im wyższy ten parametr, tym „czystszy” kolor, dlatego też parametr ten nazywany jest czasem czystością koloru. Im bliżej zera jest ten parametr, tym kolor jest bliższy neutralnej szarości.
- Wartość (wartość koloru) - ustawia jasność, wartość może również zmieniać się w zakresie 0-100 lub 0-1.
Podaj kod koloru: IŚĆ
Lista kolorów z nazwami
Tabela zawiera angielskie nazwy kolorów (które mogą być używane jako wartości) obsługiwane przez wszystkie przeglądarki oraz ich wartości szesnastkowe. Wszystkie wymienione kolory są „bezpieczne”, co oznacza, że będą wyglądać tak samo we wszystkich przeglądarkach.
| Nazwa koloru | KLĄTWA | Kolor |
|---|---|---|
| Czarny | #000000 | |
| Marynarka wojenna | #000080 | |
| Ciemny niebieski | #00008B | |
| Średni niebieski | #0000CD | |
| Niebieski | #0000FF | |
| Ciemnozielony | #006400 | |
| Zielony | #008000 | |
| Cyraneczka | #008080 | |
| Ciemnocyjan | #008B8B | |
| DeepSkyBlue | #00BFF | |
| Ciemny Turkus | #00CED1 | |
| Średni wiosenny zielony | #00FA9A | |
| Limonka | #00FF00 | |
| Wiosenna zieleń | #00FF7F | |
| wodny | #00FFFF | |
| Cyjan | #00FFFF | |
| Niebieska północ | #191970 | |
| DodgerBlue | #1E90FF | |
| Jasnomorska zieleń | #20B2AA | |
| Zielony las | #228B22 | |
| Zielone morze | #2E8B57 | |
| Ciemnoszary | #2F4F4F | |
| Limonkowy | #32CD32 | |
| Średni Morski Zielony | #3CB371 | |
| Turkus | #40E0D0 | |
| Królewski niebieski | #4169E1 | |
| Stalowo - niebieski | #4682B4 | |
| Ciemnoniebieski | #483D8B | |
| Średni Turkus | #48D1CC | |
| Indygo | #4B0082 | |
| Ciemny Oliwkowy Zielony | #556B2F | |
| CadetNiebieski | #5F9EA0 | |
| Chabrowy | #6495ED | |
| ŚredniAquaMarine | #66CDAA | |
| Ciemnoszary | #696969 | |
| Odcień niebieskiego | #6A5ACD | |
| OliwkowyDrab | #6B8E23 | |
| Popielaty | #708090 | |
| Jasnoszary | #778899 | |
| Średni Łupkowy Niebieski | #7B68EE | |
| TrawnikZielony | #7CFC00 | |
| Chartreuse | #7FFF00 | |
| Akwamaryn | #7FFFD4 | |
| Kasztanowaty | #800000 | |
| Fioletowy | #800080 | |
| Oliwa | #808000 | |
| Szary | #808080 | |
| Niebieskie niebo | #87CEEB | |
| Jasnoniebieski | #87CEFA | |
| NiebieskiFiolet | #8A2BE2 | |
| Ciemno czerwony | #8B0000 | |
| Ciemna Magenta | #8B008B | |
| SiodłoBrązowe | #8B4513 | |
| CiemnomorzeZielony | #8FBC8F | |
| Jasnozielony | #90EE90 | |
| Średnifioletowy | #9370D8 | |
| Ciemny fiolet | #9400D3 | |
| Bladozielony | #98FB98 | |
| CiemnaOrchidea | #9932CC | |
| Żółty zielony | #9ACD32 | |
| Sjena | #A0522D | |
| brązowy | #A52A2A | |
| Ciemny szary | #A9A9A9 | |
| Jasny niebieski | #ADD8E6 | |
| Zielony żółty | #ADFF2F | |
| Blady Turkus | #AFEEEE | |
| Jasnostalowo-niebieski | #B0C4DE | |
| ProszekNiebieski | #B0E0E6 | |
| FireBrick | #B22222 | |
| CiemnyZłotyRod | #B8860B | |
| ŚredniOrchidea | #BA55D3 | |
| RóżowyBrąz | #BC8F8F | |
| Ciemne khaki | #BDB76B | |
| Srebro | #C0C0C0 | |
| Średni Fioletowy Czerwony | #C71585 | |
| Indyjski Czerwony | #CD5C5C | |
| Peru | #CD853F | |
| Czekolada | #D2691E | |
| Dębnik | #D2B48C | |
| Jasny szary | #D3D3D3 | |
| Bladofioletowy czerwony | #D87093 | |
| Oset | #D8BFD8 | |
| Orchidea | #DA70D6 | |
| Złoty Rod | #DAA520 | |
| Karmazynowy | #DC143C | |
| Gainsboro | #DCDCDC | |
| Śliwka | #DDA0DD | |
| BurlyWood | #DEB887 | |
| Jasnocyjan | #E0FFFF | |
| Lawenda | #E6E6FA | |
| Ciemny Łosoś | #E9967A | |
| Fioletowy | #EE82EE | |
| BladyZłoty Pręt | #EEE8AA | |
| Jasny Koral | #F08080 | |
| Khaki | #F0E68C | |
| AlicjaNiebieska | #F0F8FF | |
| Miodowa Rosa | #F0FFF0 | |
| Lazur | #F0FFFF | |
| Sandy Brown | #F4A460 | |
| Pszenica | #F5DEB3 | |
| Beżowy | #F5F5DC | |
| Biały dym | #F5F5F5 | |
| Krem miętowy | #F5FFFA | |
| DuchWhite | #F8F8FF | |
| Łosoś | #FA8072 | |
| Antyczna biel | #FAEBD7 | |
| Bielizna | #FAF0E6 | |
| JasnyGoldenRodŻółty | #FAFAD2 | |
| Stara Koronka | #FDF5E6 | |
| Czerwony | #FF0000 | |
| Fuksja | #FF00FF | |
| Magenta | #FF00FF | |
| Głęboki róż | #FF1493 | |
| Pomarańczowy czerwony | #FF4500 | |
| Pomidor | #FF6347 | |
| Gorący róż | #FF69B4 | |
| Koral | #FF7F50 | |
| Ciemna pomarańcza | #FF8C00 | |
| Lekki Łosoś | #FFA07A | |
| Pomarańczowy | #FFA500 | |
| Jasnoróżowy | #FFB6C1 | |
| Różowy | #FFC0CB | |
| Złoto | #FFD700 | |
| BrzoskwiniowyPuff | #FFDAB9 | |
| Navajo White | #FFDEAD | |
| Mokasyn | #FFE4B5 | |
| For | #FFE4C4 | |
| Mglista Róża | #FFE4E1 | |
| Blanszowany migdał | #FFEBCD | |
| Bat Papaja | #FFEFD5 | |
| Lawendowy róż | #FFF0F5 | |
| Muszla | #FFF5EE | |
| Jedwab kukurydziany | #FFF8DC | |
| CytrynowySzyfon | #FFFACD | |
| KwiatowyBiały | #FFFAF0 | |
| Śnieg | #FFFAFA | |
| Żółty | #FFFF00 | |
| Jasny zółty | #FFFFE0 | |
| kość słoniowa | #FFFFFF0 | |
| Biały | #FFFFFF |