Maníaco del Color

Aquí puedes seleccionar un color base o restablecer los valores por defecto.

Conversor de colores


Consejo: usa el selector para elegir un color, o escribe en cualquiera de los campos y los demás se actualizarán automáticamente.

Generar paleta desde color base



Extraer colores desde una imagen


Degradados




Daltonismo



Primario
Secundario
Acento

Accesibilidad


Relación de contraste y nivel WCAG aparecerán aquí.

Generación de código


Aquí se genera el código CSS/SCSS

Maníaco del Color

Herramienta integral para convertir colores (RGB, HEX, HSL, CMYK, LAB), generar paletas por armonías o a partir de una imagen, comprobar accesibilidad WCAG, simular daltonismo y crear degradados exportables a CSS/SCSS.

Funciones principales

  • Conversor: introduce un formato (HEX, RGB, HSL, CMYK o LAB) y obtén los demás automáticamente.
  • Generador de paletas (sección única):
    • Desde color base: complementaria, análoga, triádica, tetrádica o monocromática.
    • Desde imagen: extracción de los colores predominantes sin IA, mediante análisis de píxeles (k‑means/MMCQ en JS).
  • Degradados: genera fondos lineales o radiales con varios colores. Si el tipo es lineal, podrás definir el ángulo.
  • Accesibilidad: calcula contraste (relación de luminancia) y asigna nivel WCAG AA/AAA.
  • Daltonismo: simulación aproximada de protanopia, deuteranopia y tritanopia.
  • Exportación: variables y utilidades en CSS o SCSS.
  • Selector superior y restablecer: usa el selector de la parte superior para fijar un color base rápidamente. El botón Restablecer devuelve todos los controles a sus valores iniciales.

Cómo extraemos colores de imágenes

La extracción se realiza en el navegador con JavaScript dibujando la imagen en un <canvas> y aplicando k‑means (o técnica MMCQ) sobre muestras de píxeles para encontrar los k centroides cromáticos más representativos. No se usa IA; no se suben imágenes al servidor salvo que el usuario lo decida.

Consejos rápidos

  • Para buena legibilidad, procura contraste ≥ 4.5:1 (texto normal) o ≥ 3:1 (texto grande) según WCAG AA.
  • Evita combinaciones saturadas con bajo contraste en fondos extensos.
  • Valida la paleta con los simuladores de daltonismo.