Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

HSLA Farver

Reference til HSLA Farver, som viser hvordan du kan bruge HSLA i Web-design.

Redigeret: 2016-01-14 04:38

HSLA står for Hue, Saturation og Lightness, alpha - og er bare HSL med alfakanal. Alfakanalen lader os lave transparente farver, det er eksempelvis nyttigt når du vil have en baggrund af et element til at være gennemsigtigt, men ikke børnene af elementet.

Mulige Værdier

HSLA Farver acceptere fire værdier - den første er Hue, den anden er Saturation, den tredje er Lightness, den fjerde er Alpha. Hue skal angives i grader, imens farvemætning og lysstyrke skal gives i procent, og Alfa angives som en værdi fra 0-1.

HueTager imod en numerisk værdi fra 0-360. Værdier udenfor vil starte forfra, så -60 vil være det samme som 300.
SaturationTager imod en værdi fra 0% til 100%. En værdi af 0% laver en grå variant.
LightnessTager imod en værdi fra 0% til 100%. En 0% lightness er sort, imens en 100% lightness er hvid, og 50% er normal.
AlphaAcceptere en værdi fra 0 til 1. En værdi af 0.5 er ligt 50% gennemsigtig.

HSLA Eksempel

I CSS kan HSLA farver angives på følgende måde:

  background: hsla(240, 100%, 50%, 0.5);

Nedenfor vises et eksempel på to div elementer, hvor der er brugt HSLA til baggrunds farven på den øverste.

Koden brugt i eksemplet ovenfor:

<div style="position: relative;z-index: 1;background: #FF7751;width: 150px;height: 150px;margin: 0 0 35px 1em;">
  <div style="position: absolute;z-index: 2;background: hsla(240, 100%, 50%, 0.5);width: 150px;height: 150px;top: 25px;left: 25px;">
  </div>
</div>

Se også

  1. Farver i HTML og CSS