Byt ut #RGB mot HSLa i din CSS

Jag har aldrig riktigt förstått hur #RGB fungerar med färgerna.

Förutom att man kan skriva roliga färger:

 background-color: #BADA55;

Givetvis så fungerar det att skriva ut färgens namn:


background-color: black;

Men så såg jag en video på YouTube från Treehouse om HSLa och det var mycket lättare att förstå.


 background-color: hsl(192, 64%, 50%, .8);

HSLa bygger på en färgcirkel/färgruta

hsl(45, 100%, 50%);

workwithcolor

Lägg märke till att färgcirkeln kan gå åt båda håll.

H = Hue, färg, 0-360 (grader)

S = Saturation, mättnad, 0-100%

L = Lightness, ljushet, 0-100%

a = alpha, opacitet, 0-1 (valfritt)

HSLa - färger - cirkel

Testa HSLpicker.com

Eller Workwithcolor.com/hsl-color-picker-01.htm

Så var det det här med ie. Chris Coyier använder sig av en backup:

#dindiv {
background-color: hsl(192, 64%, 50%);
background-color: #2EB0D1;
}

För en snygg blå färg:

Annonser

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s