Siatka kolorów. Kolor w stylach można określić na różne sposoby: według wartości szesnastkowej, według nazwy, w formacie RGB, RGBA, HSL, HSLA. Przykład: określenie koloru poprzez jego nazwę

Moduł kolorów CSS zawiera szczegółowe wartości, które pozwalają autorom zdefiniować kolory i przezroczystość elementów HTML, a także wartości właściwości color.

właściwość koloru

1. Kolory priorytetowe: właściwość koloru

Właściwość ustawia kolor czcionki za pomocą różne systemy odwzorowanie kolorów. Właściwość opisuje kolor zawartości tekstowej elementu. Dodatkowo służy do zapewnienia potencjalnej wartości pośredniej (currentColor) dla wszelkich innych właściwości, które akceptują wartości kolorów.

Nieruchomość jest dziedziczona.

2. Wartości kolorów

2.1. Główne słowa kluczowe

Lista głównych słów kluczowych obejmuje następujące znaczenia:

W nazwach kolorów wielkość liter nie jest uwzględniana.

Składnia

Kolor: turkusowy;

2.2. Numeryczne wartości kolorów

2.2.1. Kolory modelu RGB

Szesnastkowy format wartości RGB to znak #, po którym bezpośrednio następują trzy lub sześć znaków szesnastkowych. Trzycyfrowy zapis RGB #rgb jest konwertowany do sześciocyfrowej postaci #rrggbb poprzez kopiowanie cyfr zamiast dodawania zer. Na przykład #fb0 rozwija się do #ffbb00 . Dzięki temu w krótkim wpisie #ffff będzie można określić biały #ffffff i usunie się wszelkie zależności od głębi kolorów wyświetlacza.

Format wartości RGB w notacji funkcjonalnej to rgb(, po którym następuje rozdzielona przecinkami lista trzech wartości numerycznych (trzy wartości całkowite lub trzy wartości procentowe), po którym następuje symbol) . Wartość całkowita 255 odpowiada 100% oraz F lub FF w zapisie szesnastkowym:

Rgb(255.255.255) = rgb(100%, 100%, 100%) = #FFF

Wokół wartości numerycznych dozwolone są znaki spacji.

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 cali system dziesiętny 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. Zatem symbol koloru jest podzielony na trzy składowe #rrggbb, gdzie pierwsze dwa symbole wskazują czerwoną składową koloru, dwa środkowe - zielone, a dwa ostatnie - niebieskie. Dopuszcza się użycie formy skróconej #rgb, gdzie każdy znak należy podwoić. Zatem wpis #fe0 należy traktować 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 i opis.

Korzystanie z RGB

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

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

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% maksymalna wartość nasycenie.

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

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 ten przykład pokazany na ryc. 2.

Ryż. 2. Kolory na stronie internetowej

Ta strona zawiera tabelę ze słowami kluczowymi, których można użyć do oznaczenia kolorów w takich językach programistów internetowych, jak: HTML, CSS, JavaScript, Flash itp.

W starych specyfikacjach koncernu WC3 określono jedynie 16 słów kluczowych, za pomocą których ustawiano kolory w HTML i CSS. W dalszych, bardziej nowoczesnych specyfikacjach dodano kolejne 130 słów kluczowych oznaczających nazwy kolorów. Poniższa tabela zawiera nazwy kolorów oraz odpowiadające im kody szesnastkowe i RGB.

Zgodnie z Reguły CSS w nazwach kolorów wielkość liter nie jest uwzględniana. Wpisy kolorów IndianRed i indianred są równoważne.

Warto też zaznaczyć, że na 146 słów kluczowych w tabeli tak naprawdę jest w niej mniej kolorów. Dzieje się tak dlatego, że niektórzy słowa kluczowe reprezentują ten sam kolor. Zatem nazwy Gray i Grey oznaczają 50% szarego koloru z kodem #808080, a słowo Magenta jest synonimem Kolory HTML Fuksja, odpowiadająca kodowi szesnastkowemu #FF00FF. Równie synonimiczne są słowa Aqua i Cyan, odpowiadają one kodowi #00FFFF.

Istnieje kilka sposobów przedstawiania koloru w projektowaniu stron internetowych.

HEX to szesnastkowy system reprezentacji kolorów oparty na podstawie 16. W tym systemie arabskie cyfry dziesiętne od 0 do 9 i litery łacińskie od A do F służą do uzupełnienia liczby cyfrowej do 16. Do projektowania stron internetowych 16 podstawowych (kluczowych) kolorów stosowany jest tzw. szesnastkowy kod koloru #RRGGBB, gdzie każda para odpowiada za swój udział w kolorze: RR – czerwony, GG – zielony i BB – niebieski. Każda frakcja koloru mieści się w zakresie od 00 do FF.

Dwie inne reprezentacje koloru w projektowaniu stron internetowych to: w postaci RGB(*,*,*), gdzie każda część koloru „*” jest reprezentowana przez cyfry dziesiętne od 0 do 255 oraz nazwy kolorów w języku angielskim.

Podczas tworzenia obrazu kolorowego głównym problemem jest prawidłowe odwzorowanie kolorów różne rodzaje komputery, monitory i przeglądarki. Jeśli przeglądarka nie może poprawnie wyświetlić koloru, wybiera podobny lub miesza kilka kolorów. A czasem można go zastąpić zupełnie innym kolorem.

Tabela 16 kolorów podstawowych, które są używane we wszystkich przeglądarkach

Tabela fioletowy kolory i ich odcienie

Tabela szary kolory i ich odcienie