Selector de color HSLA mínimo con JavaScript puro
| Autor: | lizthrilla |
|---|---|
| Views Total: | 2,960 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 10, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Un selector de color súper simple, interactivo HSLA (HUE, SATURATION, LIGHT y ALPHA) con controles deslizantes implementados en JavaScript puro.
Funcionamiento
Cree un contenedor en el que desee aplicar el color seleccionado.
<div class="swatch" style="background-color: hsla(170, 55%, 55%, 1)">
Cree otro contenedor para mostrar el nombre del color.
<h3 class="colorname">hsla color</h3>
Crea deslizadores de tono, saturación, luz y ALPHA para el selector de color.
<h6>HUE</h6> <div class="hue"> <input name="hue" type="range" min="1" max="300" value="130"> </div> <h6>SATURATION</h6> <div class="satcolor"> <div class="sat"> <input name="sat" type="range" min="1" max="100" value="100"> </div> </div> <h6>LIGHT</h6> <div class="light"> <input name="light"type="range" min="1" max="100" value="55"> </div> <h6>ALPHA</h6> <div class="alpha"> <input name="alpha"type="range" min="0" max="1" step="0.01" value="1"> </div>
Cargue el archivo JavaScript principal al final del documento y listo.
<script src="main.js" defer></script>
