HERRAMIENTAS GRATIS
Herramientas gratis para diseño UI.
Pequeñas herramientas gratuitas para las tareas de cada día al diseñar con Codex: preparar imágenes, elegir colores, comprobar el contraste y escribir un DESIGN.md. Todas funcionan en tu navegador, sin subir nada y sin registrarte.
Las herramientas
- Conversor de imágenes: PNG, JPG y WebPConvierte imágenes entre PNG, JPG y WebP, varias a la vez, y compara el tamaño de los archivos.
- Paleta de colores de una imagenObtén los colores principales de cualquier imagen como códigos HEX, de más a menos frecuente.
- Comprobador de contraste para WCAG 2.2Comprueba un color de texto y uno de fondo según AA y AAA.
- Generador de DESIGN.mdConvierte tus colores, fuentes y espaciado en un DESIGN.md para Codex.
- Generador de paletas de coloresCrea cinco colores armónicos a partir de cualquier color, bloquea los que te gusten y cópialos como HEX, Tailwind o DESIGN.md.
- Generador de paletas de colores de TailwindConvierte un color en una escala del 50 al 950, calculada en OKLCH, como bloque @theme de Tailwind v4.
- Conversor de colores OKLCHConvierte colores HEX, rgb() y hsl() a OKLCH y viceversa, con un aviso fuera de sRGB.
- Generador de temas de shadcnCrea un tema completo de shadcn/ui, claro y oscuro, a partir de un color, con vista previa en vivo.
Cómo encajan entre sí
- Saca los colores de una referencia, como una foto, una captura o un mockup que te guste, con la herramienta de paletas.
- Comprueba que el texto se lee bien sobre esos colores con el comprobador de contraste.
- Recógelo todo en un DESIGN.md con el generador, para que Codex use los mismos colores, tipografía y espaciado en todas las pantallas.
- Convierte las imágenes de las páginas terminadas a WebP para que carguen más rápido.