>>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
Do 255
lub z 0%
Do 100%
lub może być reprezentowany jako wartość szesnastkowa. Na poniższym rysunku możesz zobaczyć rezultaty mieszania kolorów podstawowych.
Szesnastkowy system liczbowy, w przeciwieństwie do dziesiętnego systemu liczbowego, 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 Do 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, ostatni- niebieski zabarwienie. Wszystkie liczby mogą przyjmować wartości z zakresu od 00 Do 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 ustawienia 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 | Antycznybiały | Aqua | Akwamaryn | ||||
| Lazur | Beżowy | For | Blanchedalmond | ||||
| Niebieskofioletowy | Brązowy | Burlywood | Cadetblue | ||||
| Chartreuse | Czekolada | Koral | Chabrowy | ||||
| Jedwab kukurydziany | Karmazynowy | Cyjan | Ciemnoniebieski | ||||
| Darkcyan | Ciemnozłoty Pręt | Ciemnoszary | Ciemnozielony | ||||
| Ciemne khaki | Ciemnopurpurowy | ciemnooliwkowy | Ciemnopomarańczowy | ||||
| Darkorchid | Ciemnoczerwony | Ciemny łosoś | Ciemnozielony | ||||
| Ciemnoniebieski | Ciemnoszary | Ciemnoturkusowy | Ciemnofioletowy | ||||
| Głęboki róż | Głęboki błękit | Dimgray | Dodgerblue | ||||
| Cegła szamotowa | Kwiatowobiały | Leśna zieleń | Fuksja | ||||
| Gainsboro | Duchbiały | Złoto | Nawłoć | ||||
| Szary | Zielonożółty | Spadź | Gorący róż | ||||
| Indianred | Indygo | Kość słoniowa | Khaki | ||||
| Lawenda | Lawendowy rumieniec | Cytrynowy | Jasnoniebieski | ||||
| Jasnokoralowy | Jasnocyjan | Jasnozimnyrodyżółty | Jasnozielony | ||||
| Jasnoszary | Jasnoróżowy | Lekki łosoś | Jasnozielony | ||||
| Jasnoniebieski | Jasnoszary | Jasnostalowy błękit | Jasnożółty | ||||
| Wapno | Limonkowy | Bielizna | Magenta | ||||
| Kasztanowaty | Średniakwamaryn | Średniniebieski | Średniorchidea | ||||
| Średnifioletowy | Średniozielony | Średnioniebieski | Średnio wiosenny zielony | ||||
| Średni turkus | Średnifioletowy | Północnoniebieski | Krem miętowy | ||||
| Mglista Róża | Navajobiały | Marynarka wojenna | Oldlace | ||||
| Oliwka | Oliwerab | Pomarańczowoczerwony | Orchidea | ||||
| Palezłoty pręt | Bladozielony | Paletaturkus | Palefioletowy | ||||
| Papaja | Brzoskwiniowy | Peru | Różowy | ||||
| Śliwka | Pudrowy błękit | Różowobrązowy | Królewski błękit | ||||
| Saddlebrown | Zieleń morska | Muszla | Sjena | ||||
| Srebrny | Błękitny | Łupkowoniebieski | Łupkowo-szary | ||||
| Śnieg | Wiosenna zieleń | Stalowoniebieski | Dębnik | ||||
| Cyraneczka | Oset | Pomidor | Turkus | ||||
| Fioletowy | Pszenica | Biały dym | Żółtozielony |
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 podmieniają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 |
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). 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 pokazuje 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 jakość oddawania barw monitora zostanie ustawiona na 8-bitową (256 kolorów), ten sam kolor może być wyświetlany inaczej w różnych przeglądarkach. Wynika to ze sposobu 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 pozostanie 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 | Jasnofioletowy | #FF00FF | |
| szary | Ciemnoszary | #808080 | |
| zielony | Zielony | #008000 | |
| wapno | Jasnozielony | #00FF00 | |
| kasztanowaty | Ciemnoczerwony | #800000 | |
| marynarka wojenna | Ciemnoniebieski | #000080 | |
| oliwka | Oliwka | #808000 | |
| fioletowy | Ciemny fiolet | #800080 | |
| czerwony | Czerwony | #FF0000 | |
| srebrny | Jasnoszary | #C0C0C0 | |
| cyraneczka | Niebiesko-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 .Kody kolorów w CSS służą do określania kolorów. Zwykle kody kolorów lub wartości kolorów służą do ustawienia koloru pierwszego planu elementu (np. Kolor tekstu, kolor łącza) lub koloru tła elementu (kolor tła, kolor bloku). Można ich również używać do zmiany koloru przycisku, obramowania, znacznika, najechania kursorem i innych efektów dekoracyjnych.
Możesz określić wartości kolorów w różnych formatach. W poniższej tabeli wymieniono wszystkie możliwe formaty:
Wymienione formaty opisano bardziej szczegółowo poniżej.
Kolory CSS — kody szesnastkowe
Szesnastkowy kod koloru jest sześciocyfrową reprezentacją koloru. Pierwsze dwie cyfry (RR) reprezentują wartość czerwoną, dwie kolejne oznaczają wartość zieloną (GG), a dwie ostatnie reprezentują wartość niebieską (BB).
Kolory CSS — krótkie kody szesnastkowe
Krótki szesnastkowy kod koloru jest krótszą formą zapisu sześcioznakowego. W tym formacie każda cyfra jest powtarzana, aby uzyskać równoważną sześciocyfrową wartość koloru. Na przykład: #0F0 staje się #00FF00.
Wartość szesnastkową można pobrać z dowolnego oprogramowania graficznego, takiego jak Adobe Photoshop, Core Draw itp.
Każdy szesnastkowy kod koloru w CSS będzie poprzedzony znakiem hash „#”. Poniżej znajdują się przykłady użycia notacji szesnastkowej.
Kolory CSS - Wartości RGB
Wartość RGB to kod koloru ustawiany za pomocą właściwości rgb(). Ta właściwość przyjmuje trzy wartości: po jednej dla koloru czerwonego, zielonego i niebieskiego. Wartość może być liczbą całkowitą od 0 do 255 lub wartością procentową.
Notatka: Nie wszystkie przeglądarki obsługują właściwość koloru rgb(), dlatego nie zaleca się jej używania.
Poniżej znajduje się przykład pokazujący wiele kolorów przy użyciu wartości RGB.
Generator kodu koloru
Korzystając z naszej usługi, możesz stworzyć miliony kodów kolorów.
Bezpieczne kolory przeglądarki
Poniżej znajduje się tabela 216 kolorów, które są najbezpieczniejsze i niezależne od komputera. Te kolory w CSS wahają się od 000000 do kodu szesnastkowego FFFFFF. Są bezpieczne w użyciu, ponieważ zapewniają prawidłowe wyświetlanie kolorów na wszystkich komputerach pracujących z paletą 256 kolorów.
| Tabela „bezpiecznych” kolorów w CSS | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Do określenia kolorów używane są liczby szesnastkowe. 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. Liczby większe niż 15 w systemie szesnastkowym powstają poprzez połączenie dwóch liczb w jedną. Na przykład liczba 255 w systemie dziesiętnym odpowiada liczbie FF w formacie szesnastkowym. Aby uniknąć nieporozumień przy określaniu systemu liczbowego, przed liczbą szesnastkową umieszcza się symbol skrótu #, na przykład #666999. Każdy z trzech kolorów – czerwony, zielony i niebieski – może przyjmować wartości od 00 do FF. W ten sposób symbol koloru jest podzielony na trzy składowe #rrggbb, gdzie pierwsze dwa symbole wskazują czerwoną składową koloru, dwa środkowe - zieloną, a dwa ostatnie - niebieską. Dopuszcza się użycie formy skróconej #rgb, gdzie każdy znak należy podwoić. Zatem wpis #fe0 należy traktować jako #ffee00.
Po imieniu
| Internet Explorera | Chrom | Opera | Safari | Firefoksa | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Przeglądarki obsługują niektóre kolory według nazwy. W tabeli 1 pokazuje nazwy, kod szesnastkowy, wartości RGB, HSL i opis.
| Nazwa | Kolor | Kod | RGB | HSL | Opis |
|---|---|---|---|---|---|
| biały | #ffffff lub #ffff | rgb(255,255,255) | hsl(0,0%,100%) | Biały | |
| srebrny | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Szary | |
| szary | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Ciemnoszary | |
| czarny | #000000 lub #000 | rgb(0,0,0) | hsl(0,0%,0%) | Czarny | |
| kasztanowaty | #800000 | RGB(128,0,0) | hsl(0,100%,25%) | Ciemnoczerwony | |
| czerwony | #ff0000 lub #f00 | RGB(255,0,0) | hsl(0,100%,50%) | Czerwony | |
| pomarańczowy | #ffa500 | RGB(255,165,0) | hsl(38,8,100%,50%) | Pomarańczowy | |
| żółty | #ffff00 lub #ff0 | RGB(255,255,0) | hsl(60,100%,50%) | Żółty | |
| oliwka | #808000 | RGB(128,128,0) | hsl(60,100%,25%) | Oliwka | |
| wapno | #00ff00 lub #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Jasnozielony | |
| zielony | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Zielony | |
| wodny | #00ffff lub #0ff | RGB(0,255,255) | hsl(180,100%,50%) | Niebieski | |
| niebieski | #0000ff lub #00f | rgb(0,0,255) | hsl(240,100%,50%) | Niebieski | |
| marynarka wojenna | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Ciemnoniebieski | |
| cyraneczka | #008080 | RGB(0,128,128) | hsl(180,100%,25%) | Niebiesko-zielony | |
| fuksja | #ff00ff lub #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Różowy | |
| fioletowy | #800080 | RGB(128,0,128) | hsl(300,100%,25%) | Fioletowy |
Korzystanie z RGB
| Internet Explorera | Chrom | Opera | Safari | Firefoksa | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Możesz zdefiniować kolor za pomocą wartości czerwonego, zielonego i niebieskiego w ujęciu dziesiętnym. Każdy z trzech składników koloru przyjmuje wartość od 0 do 255. Dopuszczalne jest również określenie koloru w procentach, gdzie 100% odpowiada liczbie 255. Najpierw należy podać słowo kluczowe rgb, a następnie w nawiasach podać składniki koloru , oddzielone przecinkami, na przykład rgb(255, 128, 128) lub rgb(100%, 50%, 50%).
RGBA
| Internet Explorera | Chrom | Opera | Safari | Firefoksa | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Format RGBA ma podobną składnię do formatu RGB, ale zawiera kanał alfa, który określa przezroczystość elementu. Wartość 0 jest całkowicie przezroczysta, 1 jest nieprzezroczysta, a wartość pośrednia, np. 0,5, jest półprzezroczysta.
RGBA zostało dodane do CSS3, więc kod CSS musi zostać zweryfikowany pod kątem tej wersji. Należy zauważyć, że standard CSS3 jest wciąż w fazie rozwoju i niektóre funkcje mogą ulec zmianie. Na przykład kolor w formacie RGB dodany do właściwości tła-kolor jest sprawdzany, ale kolor dodany do właściwości tła nie jest już prawidłowy. Jednocześnie przeglądarki całkiem poprawnie rozumieją kolor obu właściwości.
HSL
| Internet Explorera | Chrom | Opera | Safari | Firefoksa | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Nazwa formatu HSL pochodzi od kombinacji pierwszych liter Hue (odcień), Saturate (nasycenie) i Lightness (jasność). Odcień to wartość koloru na kole kolorów (ryc. 1) podawana w stopniach. 0° odpowiada kolorowi czerwonemu, 120° zielonemu, a 240° niebieskiemu. Wartość odcienia może wahać się od 0 do 359.
Ryż. 1. Koło kolorów
Nasycenie to intensywność koloru mierzona jako wartość procentowa od 0% do 100%. Wartość 0% oznacza brak koloru i odcień szarości, 100% to maksymalna wartość nasycenia.
Jasność określa jasność koloru i jest wyrażana jako wartość procentowa od 0% do 100%. Niskie wartości powodują, że kolor jest ciemniejszy, a wysokie wartości powodują, że kolor jest jaśniejszy; skrajne wartości 0% i 100% odpowiadają czerni i bieli.
HSLA
| Internet Explorera | Chrom | Opera | Safari | Firefoksa | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Format HSLA ma podobną składnię do HSL, ale zawiera kanał alfa określający przezroczystość elementu. Wartość 0 jest całkowicie przezroczysta, 1 jest nieprzezroczysta, a wartość pośrednia, np. 0,5, jest półprzezroczysta.
Wartości kolorów RGBA, HSL i HSLA są dodawane do CSS3, więc podczas korzystania z tych formatów sprawdź poprawność wersji kodu.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Ostrzeżenie
Wszystkie metody łapania lwów wymienione na stronie są teoretyczne i oparte na metodach obliczeniowych. Autorzy nie gwarantują bezpieczeństwa podczas korzystania z nich i zrzekają się jakiejkolwiek odpowiedzialności za wyniki. Pamiętaj, lew to drapieżnik i niebezpieczne zwierzę!
Wynik tego przykładu pokazano na ryc. 2.
Ryż. 2. Kolory na stronie internetowej
Kody Minecrafta kwiaty lub Minecrafta kody formatowanie, pozwól każdemu graczowi dodawać kwiaty i formatować tekst w każdy możliwy sposób bezpośrednio w Minecrafcie. Kody kolorów od &0-9 - do &a-f. Dodaj je przed tekstem. Wiadomości od graczy mogą zawierać kody kolorów, które umożliwiają dodanie koloru do zdań.
Kolory i kody formatowania
Znak ampersand (&), po którym następuje liczba szesnastkowa, w wiadomościach sygnalizuje klientowi konieczność zmiany kolorów podczas wyświetlania tekstu. Dodatkowo tekst można sformatować za pomocą znaku &, po którym następuje litera. Możesz dodać różne kolory do książek, bloków poleceń, nazwy serwera, opisu serwera (motd), nazw światów, znaków, a nawet nazw graczy.
Bardzo łatwo jest sformatować tekst w konfiguracjach lub w grze, korzystając z poniższej tabeli kolorów. &r służy do resetowania wszystkich kodów, tj. &mAAA&rBBB będą wyświetlane jako AAA BBB.
Dla Twojej wygody przedstawiamy tabelę istniejących kodów kolorów w Minecrafcie:
| Kod | Nazwa | Nazwa techniczna | Kolor symbolu | Kolor cienia symbolu | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| R | G | B | Klątwa | R | G | B | Klątwa | |||
| &0 | Czarny | czarny | 0 | 0 | 0 | 000000 | 0 | 0 | 0 | 000000 |
| &1 | Ciemnoniebieski | ciemny_niebieski | 0 | 0 | 170 | 0000AA | 0 | 0 | 42 | 00002A |
| &2 | Ciemnozielony | ciemnozielony | 0 | 170 | 0 | 00AA00 | 0 | 42 | 0 | 002A00 |
| &3 | Ciemnoniebiesko-zielony | ciemna_woda | 0 | 170 | 170 | 00AAA | 0 | 42 | 42 | 002A2A |
| &4 | Ciemnoczerwony | ciemny_czerwony | 170 | 0 | 0 | AA0000 | 42 | 0 | 0 | 2A0000 |
| &5 | Ciemny fiolet | ciemny_fioletowy | 170 | 0 | 170 | AA00AA | 42 | 0 | 42 | 2A002A |
| &6 | Złoto | złoto | 255 | 170 | 0 | FFAA00 | 42 | 42 | 0 | 2A2A00 |
| &7 | Szary | szary | 170 | 170 | 170 | AAAAA | 42 | 42 | 42 | 2A2A2A |
| &8 | Ciemnoszary | ciemno_szary | 85 | 85 | 85 | 555555 | 21 | 21 | 21 | 151515 |
| &9 | Niebieski | niebieski | 85 | 85 | 255 | 5555FF | 21 | 21 | 63 | 15153F |
| &A | Zielony | zielony | 85 | 255 | 85 | 55FF55 | 21 | 63 | 21 | 153F15 |
| &B | Niebiesko-zielony | wodny | 85 | 255 | 255 | 55FFFF | 21 | 63 | 63 | 153F3F |
| &C | Czerwony | czerwony | 255 | 85 | 85 | FF5555 | 63 | 21 | 21 | 3F1515 |
| &D | Jasnofioletowy | jasno_fioletowy | 255 | 85 | 255 | FF55FF | 63 | 21 | 63 | 3F153F |
| &mi | Żółty | żółty | 255 | 255 | 85 | FFFF55 | 63 | 63 | 21 | 3F3F15 |
| &F | Biały | biały | 255 | 255 | 255 | FFFFFF | 63 | 63 | 63 | 3F3F3F |
Czasami jest to konieczne podkreślić, przekreślić, atrakcja dowolny tekst. Odbywa się to za pomocą formatowania tekstu. Używa się go dokładnie tak samo jak kolorów (umieszczamy przed tekstem kod, na przykład &lMinecraft = Minecrafta.
Dla Twojej wygody poniżej znajduje się tabela kodów formatowania:
| Kod | Nazwa |
|---|---|
| &k | Magiczny tekst |
| &l | Pogrubiony tekst |
| &M | Przekreślony tekst |
| &N | Podkreślony tekst |
| &o | Tekst kursywą |
| &R | Tekst bez formatowania |