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ć za pomocą ich nazwy, używając nazwy koloru na język angielski. Najczęstsze słowa kluczowe: czarny (czarny), biały (biały), czerwony (czerwony), zielony (zielony), niebieski (niebieski) itp.:
Kolor tekstu — czerwony
Najpopularniejsze kolory standardu Konsorcjum ogólnoświatowa sieć(Angielskie konsorcjum World Wide Web, 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: ustawienie koloru według jego nazwy
- 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 za podstawę przyjmuje się paletę RGB. Dowolny kolor uzyskuje się poprzez zmieszanie trzech głównych: R - czerwony, G - zielony (zielony), B - niebieski (niebieski). Jasność każdego koloru jest podawana przez jeden bajt i dlatego może przyjmować wartości od 0 do 255. Na przykład RGB (255,0,0) jest renderowany jako czerwony, ponieważ czerwony jest ustawiony na najwyższą wartość (255) i reszta jest ustawiona na 0 Możesz także ustawić kolor w procentach. Każdy z parametrów wskazuje poziom jasności odpowiedniego koloru. Na przykład: wartości rgb(127, 255, 127) i rgb(50%, 100%, 50%) ustawią ten sam zielony kolor średniego nasycenia:
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 koloru 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 przeciwieństwie do systemu dziesiętnego, opiera się, jak sama nazwa wskazuje, na liczbie 16. System szesnastkowy wykorzystuje następujące znaki: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Tutaj liczby od 10 do 15 zastępuje się literami łacińskimi. Liczby większe niż 15 w systemie szesnastkowym są sumą dwóch znaków w jedną wartość. Na przykład, największa liczba 255 cali system dziesiętny odpowiada najwyższej wartości FF w systemie szesnastkowym. W przeciwieństwie do systemu dziesiętnego, liczba szesnastkowa jest poprzedzona znakiem krzyżyka. # , na przykład #FF0000 jest renderowany jako czerwony, ponieważ czerwony jest ustawiony na najwyższą wartość (FF), a pozostałe kolory są ustawione na minimalna wartość(00). Znaki po symbolu hash # można pisać zarówno wielkimi, jak i małymi literami. System szesnastkowy pozwala na użycie skróconej formy, takiej jak #rgb, gdzie każdy znak jest równoważny dwa razy. Dlatego wpis #f7O należy uznać za #ff7700.
Przykład: Kolor HEX
- 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 najczęściej używanych kolorów (nazwa, HEX i RGB):
| angielskie imie | Rosyjskie imię | 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 na 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 | |
| Ochra | 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 | |
| morska zieleń | 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.
Liczby szesnastkowe służą do określania kolorów. System szesnastkowy, w przeciwieństwie do systemu dziesiętnego, opiera się, jak sama nazwa wskazuje, na liczbie 16. Liczby te 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 są tworzone przez połączenie dwóch liczb w jedną. Na przykład liczba 255 w systemie dziesiętnym odpowiada liczbie FF w systemie szesnastkowym. Aby uniknąć nieporozumień w definicji systemu liczbowego, liczba szesnastkowa jest poprzedzona symbolem 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 oznaczenie koloru dzieli się na trzy składowe #rrggbb, gdzie pierwsze dwa znaki oznaczają składową czerwoną koloru, dwa środkowe oznaczają kolor zielony, a dwa ostatnie niebieski. Dozwolone jest użycie skrótu #rgb, gdzie każdy znak powinien być podwojony. Dlatego wpis #fe0 powinien być traktowany jako #ffee00.
wg nazwy
| Internet Explorer | Chrom | Opera | safari | Firefox | 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 w formacie RGB, HSL oraz opis.
| Nazwa | Kolor | Kod | RGB | HSL | Opis |
|---|---|---|---|---|---|
| biały | #ffff lub #fff | rgb(255,255,255) | hsl (0,0%,100%) | Biały | |
| Srebro | #c0c0c0 | rgb(192,192,192) | hsl (0,0%, 75%) | Szary | |
| szary | #808080 | RGB(128,128,128) | hsl (0,0%, 50%) | Ciemno szary | |
| czarny | #000000 lub #000 | rgb(0,0,0) | hsl(0,0%,0%) | Czarny | |
| kasztanowaty | #800000 | RGB(128,0,0) | hsl (0,100%, 25%) | Ciemno czerwony | |
| 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 | |
| Oliwa | #808000 | RGB(128,128,0) | hsl(60,100%,25%) | Oliwa | |
| Limonka | #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%) | Ciemny niebieski | |
| cyraneczka | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | niebieski 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 |
Z RGB
| Internet Explorer | Chrom | Opera | safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Możesz zdefiniować kolor, używając wartości czerwonego, zielonego i niebieskiego w ujęciu dziesiętnym. Każda z trzech składowych koloru przyjmuje wartość od 0 do 255. Dopuszczalne jest również ustawienie koloru w procentach, natomiast 100% będzie odpowiadać liczbie 255. Najpierw określa się słowo kluczowe rgb, a następnie składowe koloru określone w nawiasach, oddzielone przecinkami, na przykład rgb(255 , 128, 128) lub rgb(100%, 50%, 50%).
RGBA
| Internet Explorer | Chrom | Opera | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Format RGBA jest podobny pod względem składni do RGB, ale zawiera kanał alfa, który ustawia przezroczystość elementu. Wartość 0 jest w pełni przezroczysta, 1 jest nieprzezroczysta, a wartość pośrednia, taka jak 0,5, jest przezroczysta.
Do CSS3 dodano RGBA, więc walidację kodu CSS należy przeprowadzać zgodnie z tą wersją. Należy zauważyć, że standard CSS3 jest wciąż w fazie rozwoju i niektóre jego funkcje mogą ulec zmianie. Na przykład kolor RGB dodany do właściwości background-color przechodzi walidację, ale kolor dodany do właściwości background nie przechodzi. Jednocześnie przeglądarki całkiem poprawnie rozumieją kolor obu właściwości.
HSL
| Internet Explorer | Chrom | Opera | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Nazwa formatu HSL powstała z połączenia pierwszych liter Barwa (odcień), Nasycenie (nasycenie) i Jasność (jasność). Odcień jest wartością koloru na kole barw (rys. 1) i jest podawana w stopniach. 0° to kolor czerwony, 120° to zielony, a 240° to kolor niebieski. Wartość odcienia może wynosić od 0 do 359.
Ryż. 1. Koło kolorów
Nasycenie to intensywność koloru mierzona w procentach 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 określana jako wartość procentowa od 0% do 100%. Małe wartości przyciemniają kolor, wysokie rozjaśniają, skrajne wartości 0% i 100% odpowiadają czerni i bieli.
HSLA
| Internet Explorer | Chrom | Opera | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Format HSLA jest podobny pod względem składni do HSL, ale zawiera kanał alfa, który ustawia przezroczystość elementu. Wartość 0 jest w pełni przezroczysta, 1 jest nieprzezroczysta, a wartość pośrednia, taka jak 0,5, jest przezroczysta.
Wartości kolorów w formatach RGBA, HSL i HSLA są dodawane do CSS3, więc korzystając z tych formatów, należy sprawdzić poprawność kodu względem wersji.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Ostrzeżenie
Wszystkie wymienione na stronie metody połowu lwa są teoretyczne i oparte na metodach obliczeniowych. Autorzy nie gwarantują bezpieczeństwa podczas korzystania z nich i zrzekają się jakiejkolwiek odpowiedzialności za wynik. Pamiętaj, lew to drapieżnik i niebezpieczne zwierzę!
Wynik tego przykładu pokazano na ryc. 2.
Ryż. 2. Kolory na stronie internetowej
28.11.14 11.1KNiestety na stronie nie ma jeszcze możliwości wyświetlenia doznań smakowych. Ale można to w pełni skompensować, używając zabarwienie. W końcu kolory html pozwalają wyświetlić dowolny z milionów odcieni. Aby " kolorowe kredki w jego zestawie jest znacznie więcej niż siedem.
schemat kolorów w html
W html kolor można określić w kilku formatach:
1. Jako wartość szesnastkowa - używany jest kod podany w systemie szesnastkowym. Takie kody kolorów w html składają się z trzech par liczb szesnastkowych. Każda para odpowiada za nasycenie odcienia swoim kolorem podstawowym:
- Za kolor czerwony odpowiada pierwsza para liczb;
- Druga para dotyczy zawartości koloru zielonego;
- Ten ostatni dotyczy zawartości koloru niebieskiego.
Na początku kodu (przed cyframi) umieszczany jest krzyżyk. Tak wygląda liczba szesnastkowa kod koloru. Oprócz cyfr od 1 do 9 w tym systemie liczbowym używane są litery alfabetu łacińskiego (A, B, C, D, E, F).
Na przykład kod koloru białego w html wyglądałby jak #FFFFFF:
2. Słowo kluczowe - W tej chwili html obsługuje około 147 słów kluczowych. Ale nie wszystkie te słowa są wyjątkowe. Niektóre z nich nawiązują do tego samego odcienia koloru.
Szary jest reprezentowany przez dwa słowa kluczowe: szary i szary . Ich kod szesnastkowy (HEX) ma tę samą wartość #808080 .
Przykład :
#808080
3. W formacie RGB - to kodowanie kolorów w html opiera się na wykorzystaniu trzech wartości ustawionych w zakresie od 0 do 255. Każda z nich określa nasycenie odcienia jednym z kolorów podstawowych:
- R - czerwony (czerwony);
- G - zielony (zielony);
- B - niebieski (niebieski).
Numer koloru w formacie RGB jest zapisany w następujący sposób: rgb(0, 210, 100).
kolor tła: rgb (100,186,43)
4. W Format RGBA- jest to zaawansowany format RGB, gdzie czwarta wartość określa przezroczystość koloru w postaci ułamka dziesiętnego od 0 do 1.
Przykład użycia:
kolor tła:rgba (100,86,143,0.2)
kolor tła:rgba (100,86,143,0,5)
kolor tła:rgba (100,86,143,0,8)
kolor tła: rgba (100,86,143,1)
Tabele kolorów html i generatory kolorów
Przy tak szerokiej gamie formatów ustawień kolorów łatwo się pomylić. Dlatego wymyślono specjalną tablicę kolorów. W nim, do 147 kluczowych nazw odcieni kolorów, podane są kody korespondencji we wszystkich głównych standardach reprezentacji kolorów. Dodatkowo każde pole wyposażone jest w pasek do wizualnego dopasowania kolorów. Jedna z tych tabel znajduje się na stronie colorscheme.ru:
Ale nawet przy takiej strukturze korespondencji wybór pożądanego odcienia może być trudny. I nie jest faktem, że w tabeli kodów kolorów jest właściwy.
Aby ominąć tę barierę i maksymalnie ułatwić wybór odpowiedniego odcienia, stworzono interaktywne serwisy internetowe. Ich interfejs użytkownika może się nieco różnić.
Na stronie html-color-codes.info generator kolorów wygląda tak:
A w ramach usługi color-picker.appsmaster.co to narzędzie jest zaimplementowane nieco inaczej:
Nasycenie każdego koloru w generatorze ustawia się za pomocą specjalnych suwaków. Wizualnie odcień przedstawia kolor ramki i prostokąta po lewej stronie. Na dole 3 pola wyświetlają kod koloru w głównych formatach.
Ale generator kolorów jest dostępny nie tylko na wyspecjalizowanych stronach. Niemal wszystkie edytory graficzne wyposażone są w podobne narzędzie. Na przykład Photoshop:
Bezpieczeństwo koloru
I to było dawno temu, w erze kart graficznych, które obsługują tylko 256 kolorów. W tych odległych czasach System operacyjny mógł wyświetlać tylko pewną liczbę ośmiobitowych odcieni bez zniekształceń.
Potem wydedukowano wielki stół bezpieczne kolory. Wskazał 216 odcieni, które można było wyświetlać bez zniekształceń w każdej z ówczesnych przeglądarek. I do dnia dzisiejszego to świetny rękopis» jest nadal dostępny w niektórych zasobach:
W naszych czasach wszystko się zmieniło. Dlatego wszystkie zasady bezpieczeństwa podczas pracy z kolorem w html są całkowicie anulowane. W końcu nowoczesny sprzęt komputerowy obsługuje ponad 16 milionów różnych odcieni. A 216 bezpiecznych kolorów pogrążyło się w zapomnieniu.
Vlad Merzhevich
W HTML kolor określa się na dwa sposoby: za pomocą kodu szesnastkowego oraz nazw niektórych kolorów. Najczęściej stosowana metoda oparta jest na systemie szesnastkowym, jako najbardziej uniwersalna.
Kolory szesnastkowe
HTML używa liczb szesnastkowych do określania kolorów. System szesnastkowy, w przeciwieństwie do systemu dziesiętnego, opiera się, jak sama nazwa wskazuje, na liczbie 16. Liczby te 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 są tworzone przez połączenie dwóch liczb w jedną (tabela 6.2). Na przykład liczba 255 w systemie dziesiętnym odpowiada liczbie FF w systemie szesnastkowym.
Aby uniknąć nieporozumień w definicji systemu liczbowego, liczbę szesnastkową poprzedza znak krzyżyka #, na przykład #aa69cc. W tym przypadku sprawa nie ma znaczenia, więc dopuszczalne jest napisanie #F0F0F0 lub #f0f0f0.
Typowy kolor używany w HTML jest następujący.
Tutaj kolor tła strony internetowej jest ustawiony na #FA8E47. Znak funta # przed liczbą oznacza, że jest to liczba szesnastkowa. Pierwsze dwie cyfry (FA) określają składową czerwoną koloru, cyfry od trzeciej do czwartej (8E) składową zieloną, a dwie ostatnie cyfry (47) składową niebieską. Efektem końcowym jest 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 ostatecznie tworzy 256 odcieni. Zatem całkowita liczba kolorów może wynosić 256x256x256 = 16.777.216 kombinacji. Model kolorów oparty na składowych czerwonym, zielonym i niebieskim nazywa się RGB (czerwony, zielony, niebieski; czerwony, zielony, niebieski). Model ten jest addytywny (od add - add), w którym po dodaniu wszystkich trzech składników powstaje kolor biały.
Aby ułatwić nawigację w kolorach szesnastkowych, weź pod uwagę pewne zasady.
- Jeśli wartości składników koloru są takie same (na przykład: #D6D6D6), uzyskany zostanie szary odcień. Im wyższa liczba, tym jaśniejszy kolor, a wartości zmieniają się od #000000 (czarny) do #FFFFFF (biały).
- Jasnoczerwony kolor powstaje, gdy czerwony składnik jest ustawiony na maksimum (FF), a pozostałe składniki są ustawione na zero. Kolor o wartości #FF0000 to najbardziej czerwony odcień czerwieni. To samo dotyczy zielonego (#00FF00) i niebieskiego (#0000FF).
- Żółty (#FFFF00) uzyskuje się przez zmieszanie czerwonego z zielonym. Widać to wyraźnie na kole barw (rys. 6.1), które przedstawia kolory podstawowe (czerwony, zielony, niebieski) oraz uzupełniające lub uzupełniające. Należą do nich żółty, cyjan i fioletowy (zwany również magenta). Generalnie dowolny kolor można uzyskać poprzez zmieszanie sąsiadujących z nim kolorów. Tak więc cyjan (#00FFFF) uzyskuje się przez połączenie niebieskiego i zielonego.
Ryż. 6.1. Koło kolorów
Kolory oparte na wartościach szesnastkowych nie muszą być dobierane empirycznie. Nadaje się do tego celu edytor graficzny kto może pracować z różnymi modelami kolorów, na przykład Adobe Photoshop. Na ryc. 6.2 pokazuje okno wyboru koloru w tym programie, linia zakreśla wynikową wartość szesnastkową bieżącego koloru. Możesz go skopiować i wkleić do swojego kodu.
Ryż. 6.2. Próbnik kolorów w Photoshopie
Kolory internetowe
Jeśli ustawisz jakość kolorów monitora na 8-bitową (256 kolorów), ten sam kolor może być wyświetlany w różne przeglądarki na mój własny sposób. Ma to związek ze sposobem renderowania grafiki, gdy przeglądarka pracuje z własną paletą i nie może pokazać koloru, którego nie ma w swojej palecie. W tym przypadku kolor zostaje zastąpiony kombinacją pikseli innych, bliskich mu kolorów, które imitują dany. Aby kolor pozostał taki sam w różnych przeglądarkach, wprowadzono paletę tak zwanych kolorów internetowych. Kolory internetowe to takie kolory, dla każdego składnika - czerwonego, zielonego i niebieskiego - ustawiono 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 ilość kolorów ze wszystkich możliwych kombinacji daje 6x6x6 - 216 kolorów. Przykładowy kolor internetowy to #33FF66.
Główną cechą koloru internetowego jest to, że jest wyświetlany tak samo we wszystkich przeglądarkach. W ten moment znaczenie kolorów internetowych jest bardzo małe ze względu na wzrost jakości monitorów i rozszerzenie ich możliwości.
Kolory według nazwy
Aby nie zapamiętywać zbioru 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, w jaki sposób określisz kolor - według jego nazwy lub za pomocą liczb szesnastkowych. W efekcie metody te są równe. Przykład 6.1 pokazuje, jak ustawić kolor tła i tekstu na stronie internetowej.
Przykład 6.1. Kolor tła i tekstu
Przykładowy tekst
W ten przykład kolor tła jest ustawiany za pomocą atrybutu bgcolor znacznika
i kolor tekstu za pomocą atrybutu text. Dla urozmaicenia, wartość atrybutu tekstowego jest ustawiana na liczbę szesnastkową, a bgcolor jest ustawiana na wartość zastrzeżoną. słowo kluczowe cyraneczka.Kody kolorów w CSS służą do określania kolorów. Zazwyczaj kody kolorów lub wartości kolorów służą do ustawienia koloru pierwszego planu elementu (np. tekstu, kolor łącza) lub tła elementu (tła, kolor bloku). Mogą być również używane do zmiany koloru przycisku, obramowania, znacznika, najechania i innych efektów dekoracyjnych.
Możesz ustawić własne wartości kolorów w różne formaty. W poniższej tabeli wymieniono wszystkie możliwe formaty:
Te formaty są opisane bardziej szczegółowo poniżej.
Kolory CSS - kody szesnastkowe
Szesnastkowy kod koloru to sześciocyfrowa reprezentacja koloru. Pierwsze dwie cyfry (RR) to wartość czerwona, kolejne dwie to wartość zielona (GG), a dwie ostatnie to wartość niebieska (BB).
Kolory CSS - krótkie kody szesnastkowe
Krótki szesnastkowy kod koloru jest krótszą formą notacji sześcioznakowej. 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 dowolnej grafiki oprogramowanie, takich 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 procentem.
Notatka: Nie wszystkie przeglądarki obsługują właściwość color 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
Dzięki naszej usłudze możesz stworzyć miliony kodów kolorystycznych.
Bezpieczne kolory przeglądarki
Poniżej znajduje się tabela 216 kolorów, które są najbardziej bezpieczne i niezależne od komputera. Te kolory w CSS mieszczą się w zakresie od 000000 do kodu szesnastkowego FFFFFF. Są bezpieczne w użyciu, ponieważ zapewniają, że wszystkie komputery będą poprawnie wyświetlać kolory podczas pracy 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 |