HSLA Farver

HSLA er en variation af HSL, som gør det muligt at lave gennemsigtige farver.

988 visninger

Edited: 2017-09-02 23:49

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.

Hue	Tager imod en numerisk værdi fra 0-360. Værdier udenfor vil starte forfra, så -60 vil være det samme som 300.
Saturation	Tager imod en værdi fra 0% til 100%. En værdi af 0% laver en grå variant.
Lightness	Tager imod en værdi fra 0% til 100%. En 0% lightness er sort, imens en 100% lightness er hvid, og 50% er normal.
Alpha	Acceptere 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>

Mulige Værdier

HSLA Eksempel

Fortæl os hvad du tænker: