Cómo usar el color HSL para su HTML5 y CSS3 páginas web basadas

Se puede asignar un valor HSL donde quiera que utiliza los colores en tu página web HTML5 y CSS3. El código para HSLcolors muestra cómo el esquema HSL se puede utilizar en su página:

HSLcolors.html

Este es un titular

Este es un párrafo

Para especificar un color mediante el esquema de HSL, haga lo siguiente:

  1. Configure sus selectores como de costumbre.

    En el CSS, configurar un selector para cada elemento que desea color.

  2. Agregue la regla de color.

    Aplicar una o ambas a cada selector.

  3. Utilice la función de HSL.

    Usando HSL seguido de paréntesis indica que desea calcular el color mediante la técnica de HSL.

  4. Indique el matiz.

    Imagina una rueda de color de rojo en la parte superior. El matiz es el ángulo (en grados) del color que usted quiere recoger. Hue debe tener un valor entre 0 y 360.

  5. Determinar la saturación.

    La saturación se mide como un porcentaje. La saturación de 0% indica una escala de grises (en algún lugar entre el blanco y negro), mientras que la saturación del 100% es un color totalmente saturado sin escala de grises. Es necesario incluir el signo de porcentaje como parte del valor de saturación.

  6. Especifique la ligereza.

    Luminosidad también se indica como un porcentaje, con 0% ser completamente negro y 100% ser completamente blanco. Un valor de luminosidad de 50% determinará un color equilibrado entre blanco y negro. Valores de luminosidad también deben incluir el signo de porcentaje.

El modelo HSL es una adición relativamente reciente a CSS, por lo que puede no funciona con los navegadores más antiguos, pero puede ser de gran ayuda. HSL hace que sea más fácil de predecir si los colores se ven bien juntos. Si mantiene dos de los HSL valores de la misma y cambiar el tercero, los dos colores es probable que encajan bien.




» » » » Cómo usar el color HSL para su HTML5 y CSS3 páginas web basadas