CSS

Hsl

  • 2007-05-12 14:31
  • 2 komentarze
  • 1175 odsłon
  • Oceń ten tekst jako pierwszy
W CSS3 wprowadzono możliwość deklarowania kolorów w formie hsl(h, s, l) gdzie:
  • "h" to odcień (hue) - kąt na "kole kolorów", 0 (lub 360) to czerwony, 120 zielony, 240 niebieski
  • "s" to nasycenie (saturation) - wartość procentowa, 100% to w pełni nasycony kolor
  • "l" to jasność (lightness) - wartość procentowa, 0% najciemniejszy, 50% zwykły, 100% najmocniej rozjaśniony

<table>
    <tr>
        <td style="background-color: hsl(0,100%, 50%); width: 50px; height: 50px;"></td>
        <td style="background-color: hsl(120,100%, 50%); width: 50px; height: 50px;"></td>
        <td style="background-color: hsl(240,100%, 50%); width: 50px; height: 50px;"></td>
    </tr>
</table>

Poniższa tabelka zapisana jest w zwykłym formacie rgb, jeżeli wygląda tak samo jak ta powyżej, to twoja przeglądarka obsługuje format hsl:


<table>
    <tr>
        <td style="background-color: rgb(255,0,0); width: 50px; height: 50px;"></td>
        <td style="background-color: rgb(0,255,0); width: 50px; height: 50px;"></td>
        <td style="background-color: rgb(0,0,255); width: 50px; height: 50px;"></td>
    </tr>
</table>


Inne formaty zapisu koloru


Wersja specyfikacji


Wsparcie przeglądarek


  • WebKit
  • Konqueror
  • Gecko (Firefox)

2 komentarze

Kooba 2007-05-07 20:33

serio mówisz? :|

Bełdzio 2007-01-08 20:54

"Poniższa tabelka zapisana jest w zwykłym formacie rgb, jeżeli wygląda tak samo jak ta powyżej, to twoja przeglądarka obsługuje format hsl:"
a jeśli kolory są odwrotnie? ;-)