Kolory w CSS3

By /

Html CSS

CSS3 oferuje bogatą paletę możliwości, jeśli chodzi o definiowanie kolorów elementów na stronie internetowej. Kolory mogą być określone za pomocą nazw kolorów, wartości RGB, RGBA (RGB z alfa kanałem do określenia przezroczystości), HEX, HSL (Hue, Saturation, Lightness) oraz HSLA (HSL z alfa kanałem).

Sposoby definiowania kolorów:

  • Nazwy kolorów: CSS3 rozpoznaje nazwy określonych kolorów, np. red, blue, green.
  • RGB: Definiuje kolory za pomocą ich czerwonych, zielonych i niebieskich składowych, np. rgb(255, 0, 0) dla czerwonego.
  • RGBA: Podobnie jak RGB, ale z dodatkowym parametrem alfa określającym przezroczystość, np. rgba(255, 0, 0, 0.5).
  • HEX: Sześciocyfrowy kod, zaczynający się od #, określający kolory, np. #FF0000 dla czerwonego.
  • HSL: Określa kolory za pomocą odcienia (hue), nasycenia (saturation) i jasności (lightness), np. hsl(0, 100%, 50%) dla czerwonego.
  • HSLA: Podobnie jak HSL, ale z dodatkowym parametrem alfa dla przezroczystości, np. hsla(0, 100%, 50%, 0.5).

Przykład użycia kolorów w CSS3

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kolory w CSS3</title>
    <style>
        /* Użycie nazwy koloru */
        .color-name {
            background-color: violet;
        }

        /* Użycie RGB */
        .color-rgb {
            background-color: rgb(255, 165, 0); /* Pomarańczowy */
        }

        /* Użycie RGBA */
        .color-rgba {
            background-color: rgba(255, 99, 71, 0.5); 
            /* Półprzezroczysty czerwony */
        }

        /* Użycie HEX */
        .color-hex {
            background-color: #40E0D0; /* Turkusowy */
        }

        /* Użycie HSL */
        .color-hsl {
            background-color: hsl(120, 100%, 50%); /* Zielony */
        }

        /* Użycie HSLA */
        .color-hsla {
            background-color: hsla(240, 100%, 50%, 0.5); 
            /* Półprzezroczysty niebieski */
        }
    </style>
</head>
<body>
    <div class="color-name">Nazwa koloru</div>
    <div class="color-rgb">Kolor RGB</div>
    <div class="color-rgba">Kolor RGBA</div>
    <div class="color-hex">Kolor HEX</div>
    <div class="color-hsl">Kolor HSL</div>
    <div class="color-hsla">Kolor HSLA</div>
</body>
</html>

Podsumowanie

Znajomość różnych sposobów definiowania kolorów w CSS3 jest niezbędna dla twórców stron internetowych, pozwalając na dokładne dopasowanie palety barw do projektu. Użycie kolorów RGBA i HSLA oferuje dodatkową elastyczność dzięki możliwości określenia przezroczystości, co może być wykorzystane do tworzenia subtelnych efektów wizualnych. Korzystanie z szerokiej gamy opcji kolorystycznych dostępnych w CSS3 umożliwia tworzenie bardziej dynamicznych i wizualnie atrakcyjnych stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video Fullstack w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

Powiązane artykuły

Scroll to Top