Cómo utilizar el color hsl para su html5 y css3 páginas web basadas

Se puede asignar un valor HSL donde quiera que use colores en tu página web HTML 5 y CSS 3. El código para HSLcolors muestra cómo el esquema HSL se puede utilizar en su página:

HSLcolors.html

Se trata de un titular

Este es un párrafo

Para especificar un color mediante el esquema de HSL, hacer esto:

Configurar sus selectores como de costumbre.

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

  • Añadir la regla de color.

    Video: CSS: Colores - Novedades en CSS3

    Aplicar una o las dos a cada selector.

  • Utilice la función de HSL.

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

  • Indicar la tonalidad.

    Video: Xara Web Designer 11 Premium Como Usar Y Editar Una Pagina Web Html5 ( Actualizado )

    Imagínese una rueda de color con 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.

  • Determinar la saturación.

    La saturación se mide como un porcentaje. Saturación de 0% indica una escala de grises (en algún lugar entre 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.

  • Especificar la ligereza.

    Luminosidad también está indicado como un porcentaje, con 0% de ser completamente negro y el 100% siendo completamente blanco. Un valor de luminosidad de 50% determinará un color equilibrado entre blanco y negro. los 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 extremadamente útil. HSL hace que sea más fácil de predecir si los colores se ven bien juntos. Si se mantiene dos de los valores HSL la misma y cambiar el tercero, los dos colores son propensos a encajar bien.

    Artículos Relacionados