Diseño
Herramientas de color para diseñadores y dev-adjacent
HEX ↔ RGB ↔ HSL converter, comprobador de contraste WCAG, generadores de paleta — para pixel-pushers y content creators que cuidan la accesibilidad.
Conversor de color y verificador de contraste
Conversor HEX ↔ RGB ↔ HSL con verificador de contraste WCAG AA/AAA.
Generador de paleta de colores
Genera paletas armonizadas: análoga, complementaria, triádica, monocromática.
Verificador de Contraste WCAG
Comprueba el contraste de colores según WCAG 2.2 AA/AAA — vista previa en vivo, ratio exacto y color accesible sugerido automáticamente.
Generador de degradados CSS
Crea degradados lineales, radiales y cónicos con los puntos de color que necesites. Copia el CSS con color de reserva o el valor arbitrario de Tailwind.
Generador de box-shadow CSS
Apila las capas de sombra que necesites y compáralas sobre fondo claro y oscuro a la vez. Copia el CSS o el valor arbitrario de Tailwind.
Generador de clip-path CSS
Arrastra los vértices de un polígono o define círculo, elipse o inset, y copia la declaración clip-path. Doce formas predefinidas.
Pizarra en línea
Dibuja diagramas y wireframes en el navegador. Se guarda solo en este navegador, sin cuenta.
Generador de Cubic Bezier
Arrastra dos puntos de control en una cuadrícula y mira un bloque animarse con ese easing exacto. Presets de CSS y de rebote, copia como transition-timing-function.
Simulador de daltonismo
Sube una foto o escribe un color hex y velo con protanopía, deuteranopía, tritanopía o acromatopsia. Comparador lado a lado con matrices LMS de Brettel/Viénot-Mollon.
Visor STL/OBJ
Rota, haz zoom e inspecciona un modelo 3D .stl u .obj — triángulos, caja delimitadora, volumen estimado, modo alambre, captura PNG. Se ejecuta en tu navegador.
Cómo elegir entre estas herramientas
Tres herramientas alrededor de una pregunta: ¿esta combinación de colores se va a poder leer?
El contraste se mide, no se opina. WCAG define una razón a partir de la luminancia relativa de dos colores, y los umbrales son 4,5:1 para texto normal y 3:1 para texto grande en nivel AA. El verificador informa de la razón y del apto o no apto en cada nivel, que es la diferencia entre una revisión de diseño que acaba en una opinión y otra que acaba en un número.
El conversor mueve un color entre HEX, RGB, HSL y sus variantes con alfa sin la deriva de redondeo que aparece al convertir dos veces a mano, y el generador de paletas construye armonías a partir de un color base. Ambos rinden más junto al verificador de contraste: elige una paleta y confirma que los pares sobre los que vas a poner texto superan el umbral antes de que lleguen a producción.