piątek, 2023-12-29

CSS: Heksadecymalny zapis kolorów

Kolory w CSS można określać za pomocą różnych metod, w tym za pomocą kodów heksadecymalnych (HEX). Format heksadecymalny jest jednym z najpopularniejszych sposobów definiowania kolorów w projektowaniu stron internetowych i aplikacji. To bardzo wygodne rozwiązanie, ponieważ zapewnia szeroki zakres barw i jest łatwy do zrozumienia i stosowania dla większości projektantów i deweloperów stron internetowych.

Format Heksadecymalny

Kod heksadecymalny składa się z symbolu '#', po którym następuje sześć cyfr lub liter w zakresie od 0 do 9 oraz od A do F. Te sześć znaków dzieli się na trzy pary, gdzie każda para odpowiada jednemu z kolorów podstawowych: czerwony (R), zielony (G) i niebieski (B).

• Pierwsza para znaków określa wartość czerwonego (R).
• Druga para określa wartość zielonego (G).
• Trzecia para określa wartość niebieskiego (B).

Przykłady:

1. Biały: '#FFFFFF'

   • R: FF (255 w systemie dziesiętnym)
   • G: FF (255 w systemie dziesiętnym)
   • B: FF (255 w systemie dziesiętnym)

2. Czarny: '#000000'

   • R: 00 (0 w systemie dziesiętnym)
   • G: 00 (0 w systemie dziesiętnym)
   • B: 00 (0 w systemie dziesiętnym)

3. Czerwony: '#FF0000'

   • R: FF (255 w systemie dziesiętnym)
   • G: 00 (0 w systemie dziesiętnym)
   • B: 00 (0 w systemie dziesiętnym)

4. Zielony: '#00FF00'

   • R: 00 (0 w systemie dziesiętnym)
   • G: FF (255 w systemie dziesiętnym)
   • B: 00 (0 w systemie dziesiętnym)

5. Niebieski: '#0000FF'

   • R: 00 (0 w systemie dziesiętnym)
   • G: 00 (0 w systemie dziesiętnym)
   • B: FF (255 w systemie dziesiętnym)

Skrócony Format HEX

W CSS istnieje również skrócona wersja kodu HEX, gdzie każda para jest reprezentowana przez pojedynczy znak. Na przykład, '#FFF' jest skrótem od '#FFFFFF' (biały), a '#F00' od '#FF0000' (czerwony). Skrócona forma jest możliwa, gdy w każdej parze obie cyfry są takie same.

Przykład użycia

Kody heksadecymalne są stosowane w CSS do określania kolorów elementów, takich jak tło, tekst, ramki itp.

body {
    background-color: #FF5733;  /* Pomarańczowy */
}

h1 {
    color: #00FF00;  /* Zielony */
}

p {
    color: #0000FF;  /* Niebieski */
}