Kolor w CSS

9.1 Sposoby definiowania koloru w CSS

Kolor odgrywa ważną rolę w web designie i web developmentcie. W CSS istnieje kilka sposobów pozwalających deweloperom na tworzenie atrakcyjnych i intuicyjnych interfejsów. Poniżej przyjrzymy się różnym sposobom definiowania kolorów w CSS, w tym modelom kolorów, przezroczystości, gradientom i standardowym funkcjom do pracy z kolorem.

Sposoby definiowania koloru w CSS:

• Kolory nazwane
• Kolory szesnastkowe
• RGB i RGBA
• HSL i HSLA
• Gradienty
• Przezroczystość

9.2 Model kolorów RGB

Model RGB (Red Green Blue) definiuje kolor poprzez mieszanie czerwieni, zieleni i niebieskiego. Każdemu kolorowi przypisuje się wartość od 0 do 255.

Składnia:

    
      color: rgb(255, 0, 0); /* Czerwony */
      color: rgb(0, 255, 0); /* Zielony */
      color: rgb(0, 0, 255); /* Niebieski */
    
  

Przykład:

    
      body {
        background-color: rgb(240, 248, 255); /* Kolor tła: aliceblue */
      }
    
  

9.3 Model kolorów HEX

HEX (Hexadecimal) przedstawia kolor za pomocą wartości szesnastkowych. Każda z wartości (RR, GG, BB) może się zmieniać od 00 do FF.

Składnia:

    
      color: #ff0000; /* Czerwony */
      color: #00ff00; /* Zielony */
      color: #0000ff; /* Niebieski */
    
  

Przykład:

    
      h1 {
        color: #4CAF50; /* Zielony */
      }
    
  

9.4 Model kolorów HSL

HSL (Hue, Saturation, Lightness) przedstawia kolor jako odcień, nasycenie i jasność. Odcień (Hue) mierzy się w stopniach (0-360), nasycenie (Saturation) i jasność (Lightness) w procentach (0%-100%).

Składnia:

    
      color: hsl(0, 100%, 50%); /* Czerwony */
      color: hsl(120, 100%, 50%); /* Zielony */
      color: hsl(240, 100%, 50%); /* Niebieski */
    
  

Przykład:

    
      p {
        color: hsl(210, 100%, 50%); /* Niebieski */
      }
    
  

9.5 Przezroczystość: RGBA i HSLA

Do dodawania przezroczystości do kolorów wykorzystuje się modele RGBA i HSLA. W tych modelach dodaje się czwarty parametr — kanał alfa (Alpha), który określa poziom przezroczystości od 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty).

1. RGBA (Red, Green, Blue, Alpha):

Składnia:

    
      color: rgba(255, 0, 0, 0.5); /* Półprzezroczysty czerwony */
      color: rgba(0, 255, 0, 0.3); /* Półprzezroczysty zielony */
      color: rgba(0, 0, 255, 0.7); /* Półprzezroczysty niebieski */
    
  

Przykład:

    
      div {
        background-color: rgba(255, 99, 71, 0.6); /* Półprzezroczysty kolor tomato */
      }
    
  

2. HSLA (Hue, Saturation, Lightness, Alpha):

Składnia:

    
      color: hsla(0, 100%, 50%, 0.5); /* Półprzezroczysty czerwony */
      color: hsla(120, 100%, 50%, 0.3); /* Półprzezroczysty zielony */
      color: hsla(240, 100%, 50%, 0.7); /* Półprzezroczysty niebieski */
    
  

Przykład:

    
      span {
        color: hsla(210, 100%, 50%, 0.8); /* Półprzezroczysty niebieski */
      }
    
  

1

Zadanie

Frontend SELF PL, poziom 13, lekcja 3

Niedostępne

Model kolorów RGB

Model kolorów RGB

Otwórz

1

Zadanie

Frontend SELF PL, poziom 13, lekcja 3

Niedostępne

Przejrzystość RGBA

Przejrzystość RGBA

Otwórz