Kod RGB jest fioletowy. Ustawianie koloru tekstu w CSS

Model kolorów RGB

Drugim sposobem określenia kolorów w CSS jest użycie dziesiętnych wartości RGB (czerwony, niebieski, zielony). W tym celu należy po właściwości color wpisać słowo kluczowe rgb, a następnie w nawiasach i oddzielić przecinkami – trzy liczby z zakresu od 0 do 255, z których każda oznacza intensywność kolorów czerwonego, zielonego i niebieskiego (r , g, b). Im wyższa liczba, tym intensywniejszy kolor. Na przykład, aby uzyskać jasnozielony kolor, musisz napisać:

P (kolor: rgb(0, 255, 0); )

Ale odcień żółtawo-musztardowy ma następujące znaczenie:

Kolor: rgb(94, 81, 3); /* poniżej ten sam kolor, zapisany w systemie szesnastkowym: */ color: #5E5103;

Wartość czarnego jest zapisywana jako (0, 0, 0), a dla białego jako (255, 255, 255). Możliwe jest również wskazanie tych wartości w procentach. Zatem liczba 255 odpowiada 100%, dlatego kolor biały można ustawić w następujący sposób:

Kolor: rgb(100%, 100%, 100%);

Gdzie szukać znaczeń kolorów

Być może masz pytanie: skąd bierzesz te wszystkie znaczenia kolorów? Istnieje wiele edytorów graficznych i usług online, za pomocą których można wybierać kolory i tworzyć schematy kolorów. Jeden z najpopularniejszych programów, w którym możesz wybrać odpowiedni kolor i uzyskać jego wartość RGB, szesnastkową i więcej - Adobe Photoshopie. Alternatywnie istnieją specjalne strony, na których można łatwo wybrać nie tylko kolor, ale także całą kolorystykę. Świetnym przykładem jest usługa Adobe Color CC.

Model kolorów RGBA

Kolor w formacie RGBA można ustawić w podobny sposób, jak w formacie RGB. Różnica między RGBA i RGB polega na obecności kanału alfa, który odpowiada za przezroczystość koloru. Przezroczystość ustawia się za pomocą liczby z zakresu od 0 do 1, gdzie 0 oznacza pełną przezroczystość, a 1 odwrotnie, oznacza całkowitą nieprzezroczystość. Wartości pośrednie, takie jak 0,5, pozwalają ustawić półprzezroczysty wygląd (dopuszczalny jest zapis skrócony, bez zera, ale z kropką – .5). Na przykład, aby tekst był kolorowy i lekko przezroczysty, po właściwości color należy wpisać słowo kluczowe rgba i wartość koloru:

P (kolor: rgba(94, 81, 3, .9); )

Wadą RGBA jest to, że nie obsługuje przeglądarka internetowa Explorer w wersji 8 i wcześniejszych. Specjalnie dla IE8 możesz zastosować następujące rozwiązanie:

P (kolor: rgb(94, 81, 3); kolor: rgba(94, 81, 3, .9); )

Pierwsza właściwość w przykładzie przeznaczona jest dla przeglądarki IE8, która wyświetli tekst w żądanym kolorze, ale bez przezroczystości. A te przeglądarki, które rozumieją RGBA, zastosują do elementu drugą właściwość, z przezroczystością.

Modele kolorów HSL (HSLA).

Kolor można także ustawić w CSS, korzystając ze współrzędnych modelu kolorów HSL (Barwa, Nasycenie, Jasność). Jest napisane tak:

P (kolor: hsl(165, 100%, 50%); )

Pierwsza liczba w nawiasie oznacza odcień i jest podana w stopniach (zakres liczb od 0 do 359). Łatwo będzie zrozumieć, dlaczego używane są stopnie, jeśli pamiętasz, jak wygląda koło kolorów:

Druga i trzecia liczba w nawiasach oznaczają odpowiednio nasycenie i jasność. Ich wartości ustalane są w procentach od 0 do 100. Im niższa wartość nasycenia, tym bardziej stonowany staje się kolor. Wartość nasycenia równa zero spowoduje, że kolor będzie szary, niezależnie od wartości odcienia. Wartość jasności pozwala określić jasność koloru. Niskie wartości powodują ciemne odcienie koloru, wysokie wartości powodują jasne odcienie. Wartość 100% dla jasności oznacza biel, 0% oznacza czerń.

Model kolorów HSLA działa prawie tak samo jak HSL, jednak podobnie jak RGBA posiada kanał alfa, za pomocą którego można ustawić przezroczystość koloru, podając żądaną wartość w zakresie od 0 do 1:

P (kolor: hsla(165, 100%, 50%, .6); )

HSL i HSLA są obsługiwane przez wszystkie przeglądarki z wyjątkiem Internet Explorera wersje 8 i wcześniejsze.

Standardowe kolory HTML

Innym sposobem przedstawiania kolorów w Internecie jest słowa kluczowe, za pomocą którego możesz określić kolor elementu. Przykład:

P(kolor:czarny;)

Istnieje 16 standardowych kolorów, które można zapisać w wartości właściwości color:

Te kolory są obsługiwane przez wszystkie przeglądarki. Oprócz tego istnieje około 130 dodatkowych słów kluczowych dla różnych odcieni kolorów. Pełną tabelę tych kolorów można zobaczyć w książce referencyjnej W3C.

Stosowanie takich słów kluczowych jest dopuszczalne, jednakże istnieje ryzyko, że dane słowo nie zostanie zaakceptowane przez przeglądarkę. Dlatego zamiast słów kluczowych zaleca się zapisanie szesnastkowego kodu koloru.

Wyniki

W CSS kolor tekstu określa się za pomocą właściwości color, a jego wartość można zapisać na kilka sposobów - w formacie szesnastkowym (szesnastkowym), w formacie RGB lub HSL lub poprzez określenie słowa kluczowego. Unikać nieprawidłowe wyświetlanie kolor określony za pomocą słowa kluczowego, lepiej podać jego wartość szesnastkową.

Możliwe jest także ustawienie przezroczystości elementu za pomocą kanału alfa (formaty RGBA i HSLA). Warto wziąć pod uwagę, że przeglądarka IE8 i jej wcześniejsze wersje nie obsługują formatów RGBA, HSL i HSLA.

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ść określa kolor czcionki przy użyciu różnych systemów oddawania barw. 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órych 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.

W tym samouczku przyjrzymy się ostatniemu atrybutowi tagu , który ustawia kolor tekstu. Domyślnie tekst jest czarny i wyświetlany na białym tle. W celu zmień kolor tekstu w HTML, musisz zastosować atrybut koloru znacznika :