Ostatnio edytowany:

trzycyfrowy zapis heksadecymalny

Autor: Virtual Patriot

Opis

Za pomocą trzycyfrowego zapisu heksadecymalnego (#RGB) możemy określić wartość interesującego nas koloru.

Wartość koloru w trzycyfrowym zapisie heksadecymalnym reprezentowana jest przez trzy znaki z zakresu od 0 do 9 (tylko liczby całkowite) oraz z zakresu od A do F (małe litery są dozwolone). Wspomniane znaki dodatkowo poprzedzone są znakiem # (kratka/hash).

Znaki z zakresu od A do F reprezentują liczby całkowite z zakresu od 10 do 15. Łącznie do dyspozycji mamy szesnaście znaków, czyli: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, dlatego zapis heksadecymalny nazywany jest również zapisem szesnastkowym.

Pierwszy znak określa intensywność barwy czerwonej, na przykład wartość #F00 sprawia, że kolor jest czerwony. Kolejny znak określa intensywność barwy zielonej, na przykład wartość #0F0 sprawia, że kolor jest zielony. Ostatni znak określa intensywność barwy niebieskiej, na przykład wartość #00F sprawia, że kolor jest niebieski. Określając różne stopnie intensywności wspomnianych barw możemy otrzymywać różne kolory, na przykład: #F93, #5FC, #85F.

Liczba kolorów, które możemy otrzymać za pomocą trzycyfrowego zapisu heksadecymalnego jest mniejsza od liczby kolorów, które możemy otrzymać za pomocą sześciocyfrowego zapisu heksadecymalnego.

Wartości niektórych kolorów reprezentowanych przez sześciocyfrowy zapis heksadecymalny możemy przedstawić za pomocą trzycyfrowego zapisu heksadecymalnego, jednak tylko wtedy, gdy w sześciocyfrowym zapisie heksadecymalnym znaki każdej kolejnej pary znaków występujących po znaku # są takie same. Innymi słowy wartość #FF0055 możemy przedstawić za pomocą wartości #F05, ponieważ znaki pierwszej pary znaków występujących po znaku # są takie same (czyli zapis FF zostaje skrócony do zapisu F), znaki drugiej pary znaków występujących po znaku # są takie same (czyli zapis 00 zostaje skrócony do zapisu 0) oraz znaki trzeciej pary znaków występujących po znaku # są takie same (czyli zapis 55 zostaje skrócony do zapisu 5), co finalnie daje nam wartość #F05. Wartość #FF0056 nie możemy przedstawić za pomocą trzycyfrowego zapisu heksadecymalnego, ponieważ znaki ostatniej pary znaków występujących po znaku # nie są takie same (znak 5 jest różny od znaku 6).

Wyjaśnienie wzoru

Przykładowe zapisy

#4A9

#F00

#1F9

#

Składnik # jest wymaganym składnikiem wzoru #RGB. Składnik # informuje przeglądarkę internetową, że chcemy określić wartość koloru za pomocą jednego z dostępnych zapisów heksadecymalnych.

Wartość domyślna

brak

R

Składnik R jest wymaganym składnikiem wzoru #RGB. Składnik R określa intensywność barwy czerwonej. Im większa wartość składnika R tym intensywność barwy czerwonej nowo powstającego koloru będzie większa.

Zakres wartości

0 - 9 oraz A - F

Sposób podawania

należy podać dokładnie jeden znak z dostępnego zakresu wartości

Wartość domyślna

brak

G

Składnik G jest wymaganym składnikiem wzoru #RGB. Składnik G określa intensywność barwy zielonej. Im większa wartość składnika G tym intensywność barwy zielonej nowo powstającego koloru będzie większa.

Zakres wartości

0 - 9 oraz A - F

Sposób podawania

należy podać dokładnie jeden znak z dostępnego zakresu wartości

Wartość domyślna

brak

B

Składnik B jest wymaganym składnikiem wzoru #RGB. Składnik B określa intensywność barwy niebieskiej. Im większa wartość składnika B tym intensywność barwy niebieskiej nowo powstającego koloru będzie większa.

Zakres wartości

0 - 9 oraz A - F

Sposób podawania

należy podać dokładnie jeden znak z dostępnego zakresu wartości

Wartość domyślna

brak

Przykład

  background-color:#FDF;
tło tego elementu "div" posiada nowy kolor, ponieważ do tego elementu "div" została dodana właściwość "background-color" wraz z wartością w postaci trzycyfrowego zapisu heksadecymalnego "#FDF"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-color:#FDF;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      tło tego elementu "div" posiada nowy kolor, ponieważ do tego elementu "div" została dodana właściwość "background-color" wraz z wartością w postaci trzycyfrowego zapisu heksadecymalnego "#FDF"
    </div>

  </body>
</html>

Interpretacja

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak