Mini-app 01

Generador de Paletas de Colores

Genera paletas en tres modos (Color, Temperatura e Imagen) para explorar variaciones o sacar inspiración de una imagen. ✨ Puedes ir fijando los colores que te gusten para construir tu paleta poco a poco, y cada resultado se guarda automáticamente en el historial.

(1) Base de la paleta:

Tipo de paleta

(2) Cantidad de colores:

(3) Intensidad:

Brillo 90%

Icono de brillo mínimo Icono de brillo máximo

Saturación 70%

Icono de saturación mínima Icono de saturación máxima

Una nueva paleta espera ser revelada.

Añadir color

Historial de paletas

Se guardan hasta 50 versiones por sesión del navegador.

Las paletas se guardan automáticamente mientras trabajas.

Mini-app 02

Convert Color

Convierte un color entre formatos y trabaja con él como te resulte más cómodo: edita cualquier valor, pega un código o usa el selector para ajustarlo a ojo.

Clásicos:

Perceptuales:

Print:

Mini-app 03

HEX to CSS Filter

Convierte un color HEX al filtro CSS más parecido. Útil para colorear iconos SVG con filter cuando no puedes (o no quieres) tocar el SVG directamente.

Inserta aqui el color que quieres aplicar a tu SVG

Final pixel

Base sobre la que se aplicará el filtro CSS.

Arbol de Navidad original Antes
Arbol de Navidad con filtro aplicado Después

El filtro ha de aplicarse sobre imágenes SVG de color negro puro, #000.

Código final

Aquí aparecerá el código CSS del filtro calculado.

Cuanto más bajo es este número, más cerca está el resultado del color objetivo.

Si el valor de Loss sigue siendo alto, normalmente no se debe a la necesidad de recalcular el filtro, sino a algunas limitaciones del método:

  • Algunos colores son difíciles de aproximar únicamente mediante filter.
  • Partir de negro puro (#000) limita el espacio de resultados posibles.
  • La combinación de invert, sepia, saturate, hue-rotate, brightness y contrast no permite reproducir con exactitud todos los colores.
Mini-app 04

Simulador de Daltonismo

Una mini-app para comprobar si tu interfaz sigue siendo accesible cuando alguien percibe los colores de forma distinta.

  1. Sube una captura de la pantalla que quieres revisar.
  2. Prueba los distintos tipos de visión y mira cómo cambian los colores.
  3. Usa la lupa (o descarga la imagen simulada) para comprobar que la jerarquía, los estados y los mensajes se siguen entendiendo.
  4. Asegúrate de que no haya nada que dependa solo del color.

Vista previa

Usa la lupa para inspección rápida o descarga la simulación para revisar con calma si la jerarquía, los estados y la lectura siguen siendo claros.

Visión normal
Imagen cargada para preparar la simulación

Peter Olexa, unsplash.com