Guía de Slop Colors
Primeros pasos con Slop Colors
Slop Colors es un cuentagotas, un creador de paletas y un comprobador de contraste en una sola página. Las imágenes y las paletas se leen en tu navegador y nunca se suben.
La página
Arriba está el color actual, con su valor en HEX, RGB, HSL, OKLCH y CMYK y un botón Copiar para cada uno. Debajo hay cuatro tarjetas: Elegir de una imagen, Paleta, Creada a partir de este color y Comprobar contraste.
El panel de la derecha tiene los campos del color, lo que se crea a partir de él, cuántos colores buscar en una imagen y la exportación. En el móvil es una hoja en la parte inferior: toca Ajustes para abrirla.
Tomar colores de una imagen
- Suelta una imagen en la página o haz clic en Abrir imagen….
- Pasa el cursor por encima y haz clic para tomar un color; la lupa muestra los píxeles bajo el punto.
- Usa las flechas para mover un píxel cada vez, y Enter para añadir el color a la paleta.
- Haz clic en Añadir todos a la paleta para conservar los colores principales de la imagen.
Consejo: En Chrome y Edge, Elegir de la pantalla toma un color de cualquier parte de tu pantalla.
Crear la paleta
- Haz clic en Añadir este color para añadir el color actual.
- Elige una Armonía y una Escala en el panel, y luego Usar como paleta bajo una fila.
- Bajo cada color de la paleta, ‹ y › lo mueven, ✎ le pone nombre y × lo quita.
Comprobar el contraste
Escribe un color de texto y un fondo, o usa Usar como color de texto y Usar como fondo en el panel. La proporción y los niveles WCAG aparecen al momento, y Corregir el color del texto busca el color más cercano que cumpla AA.
Exportar y guardar
- Pon nombre a la paleta y elige un Formato en Exportar.
- Haz clic en Descargar paleta, Copiar código o Guardar en Slop Drive…; Abrir en… envía el archivo a otra app.
- Para volver a abrir una paleta, suelta su archivo .gpl, .ase, .json o .css en la página.