Spróbuj edytować ten przykład, aby uwzględnić własne wartości, takie jak rgb(100, 100, 100) .

Ustawianie koloru za pomocą RGBA

W CSS3 pojawił się nowe narzędzie do pracy z kolorem - format RGBA. Można to nazwać ewolucją modelu RGB, ale z dodaniem jednego nowego kanału - kanału A lub alfa. Ten kanał ustawia przezroczystość koloru. Jego wartości są ustawione w zakresie od 0 do 1. Wartość równa 0 odpowiada pełnej przezroczystości, 1 - pełnemu kryciu (kolor będzie taki sam jak ustawiony w pierwsze trzy kanałów RGB), a wartości pośrednie jak 0,4 lub 0,6 - przezroczystość w różnym stopniu.

Przykład kodu.

Oto jak to będzie działać:

Ten kod jest wizualnie podobny do poniższego, który wykorzystuje model RGB do ustawienia wartości koloru:

Oto jego wynik:

Wartość kanału alfa równa zero sprawia, że ​​każdy kolor jest niewidoczny - całkowicie przezroczysty, wartość równa jeden tłumaczy kolor w kodzie RGB bez zmian. Właściwość rgba(255,0,0,1.0) pokazuje kolor czerwony rgb(255, 0, 0) .

Według wartości szesnastkowej (kod HEX)

W życiu codziennym używamy dziesiętnego systemu liczenia. Jego początki są bardzo proste – na dłoniach mamy dziesięć palców, a w życiu wygodnie było liczyć na palcach. Jeśli w system dziesiętny dziesięć cyfr: od 0 do 9, a następną cyfrą jest liczba 10, następnie w systemie szesnastkowym jest 16 cyfr, a następną cyfrą będzie liczba 16.

Aby wskazać kody kolorów, zwykłe cyfry dziesiętne od 0 do 9 są używane jako cyfry szesnastkowe, a litery łacińskie od A do F są używane do oznaczania liczb od 10 do 15, czyli (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Dla jasności podsumujmy to w tabeli:

Aby zapisać liczby szesnastkowe większe niż F (15 dziesiętne), podobnie jak w systemie dziesiętnym, również używają unii dwóch cyfr, ale już szesnastkowych, co jest oczywiste. Tak, dla porządku liczba dziesiętna 255 w notacji szesnastkowej to FF.

System szesnastkowy jest bardziej zrozumiały dla komputera, szybciej przetwarza wartości podane przez wartość szesnastkową.

Aby określić kolor w systemie szesnastkowym, poprzedź wartość liczbową znakiem „#”, na przykład: #FFC0CB . Sama wartość #FFC0CB składa się z trzech cyfr szesnastkowych FF , C0 i CB . Znaczenie tego wpisu jest takie samo, jak ustawienie koloru w Format RGB(rgb(r, g, b) ) - każda cyfra szesnastkowa w kodzie HEX oznacza nasycenie koloru w swoim kanale modelu RGB.

Ten kod wyświetli następujące elementy:

A oto obrazek z wynikiem z sekcji „Ustawianie kolorów za pomocą RGB” na tej stronie powyżej.

Widzimy, że kolory są identyczne.

Dozwolony jest skrócony zapis kodu koloru HEX: liczba 6-cyfrowa może być zapisana jako liczba 3-cyfrowa. Jest to ważne tylko wtedy, gdy powtarzają się dwie cyfry w wartości koloru tego samego kanału.

Oznacza to, że dopuszczalny jest następujący skrót:

Na przykład kolor #ff22aa można zapisać jako #f2a , a kolor #44aa22 można zapisać jako #4a2 .

Ustawianie koloru za pomocą HSL

CSS3 ma nowy format określania kolorów.

Format HSL to skrót od angielskich słów: Hue (odcień), Saturate (nasycenie) i Lightness (jasność).

Odcień w HSL to wartość koloru na specjalnym kole kolorów (Rysunek 2) i jest podawana w stopniach. Jeśli narysujemy analogie z modelem RGB, to 0° odpowiada czerwieni, 120° odpowiada zieleni, a 240° odpowiada niebieskiemu.

Wartość barwy zmieni się od 0 do 359.

Druga wartość - nasycenie (Saturate) jest ustawiana w procentach. Przy nasyceniu 100% kolor jest jak najbardziej „soczysty”, ponieważ wskaźnik nasycenia przesuwa się w kierunku 0%, kolor staje się coraz bardziej matowy i przechodzi w szarość.

Trzecia wartość - jasność (Lightness) również jest ustawiana w procentach. Im wyższy procent, tym jaśniejszy kolor. Ekstremalne wartości 0% i 100% wskażą odpowiednio kolor czarny (brak światła) i biały (naświetlony) i nie ma znaczenia, który kolor z koła kolorów został wybrany w pierwszym kanale. Za optymalną wartość można uznać wartość jasności koloru równą 50%.

Ustawienie kolorów za pomocą HSLA

Format HSLA jest powiązany z HSL, podobnie jak RGB z RGBA. W formacie HSLA, podobnie jak w RGBA, dodawany jest kanał alfa odpowiedzialny za przezroczystość kolorów.

Kolor określony w formacie HSL jest łatwiejszy do odczytania. Można powiedzieć, że jest intuicyjny. Na przykład kod hsl(120,60%,50%) może reprezentować ostateczny kolor, jeśli w pamięci znajduje się obraz koła kolorów HSL. Nie można tego powiedzieć o formatach RGB i HEX, kod koloru określony w tych formatach staje się jasny dopiero po wyrenderowaniu go na monitorze.

Nowe formaty w CSS3 (HSL, HSLA i RGBA) działają w przeglądarkach od wersji: IE 9.0, Opera 10.0 Firefox 3.0. Jak sprawić, by style działały na starszych przeglądarkach?

Someblock ( kolor tła: rgb(255,50,50); kolor tła: rgba(255,50,50,0.85) )

Podczas używania tego kodu w starszych przeglądarkach kolor tła dla klasy .somebloсk, chociaż nie używa kanału alfa, będzie wyświetlany w formacie RGB.

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

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.

Z RGB

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

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

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

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 Formaty 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

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.

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 chwili obecnej 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 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.

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.