Potente componente de selector de color con Pure JavaScript-Color-Picker. js

Vista prévia

Descripción

Color-Picker. js es una biblioteca de JavaScript pura para crear un componente de selector de color con soporte para eventos táctiles y formatos de color RGB/HEX/HSV. Encontrarás más ejemplos en el zip.

¿Cómo funciona?

Coloque Color-Picker. CSS y Color-Picker. js en el documento HTML.

<link href="color-picker.min.css" rel="stylesheet">
<script src="color-picker.min.js"></script>

Cree un campo de texto para aceptar los valores de color seleccionados.

<input type="text">

Inicializar el selector de color en el campo de texto.

var picker = new CP(document.querySelector('input[type="text"]'));

Actualizar automáticamente el campo de texto cuando cambia el color.

picker.on("drag", function(color) {

this.target.value = '#' + color;
});

Color-Picker. js también proporciona varios métodos para convertir entre formatos de color.

// HSV to RGB
picker.HSV2RGB([360, 100, 100])

// HSV to HEX
picker.HSV2HEX([360, 100, 100])

// RGB to HSV
picker.RGB2HSV([255, 255, 255])

// RGB to HEX
picker.RGB2HEX([255, 255, 255])

// HEX to HSV
picker.HEX2HSV('ffffff')

// HEX to RGB
picker.HEX2RGB('ffffff')

Mostrar/ocultar el selector de color.

picker.enter();
 picker.exit();

Registro de cambios

10/30/2018

• Fijar falta ' Enter ' y ' salir ' gancho en método (s)

09/07/2018

• Cambiar el nombre de la propiedad ' target ' a ' Source '

06/24/2018

• Permitir tamaño de selector de color personalizado

06/09/2018

• JS & actualización de CSS