Herramientas de diseño online gratis
Utilidades de color y diseño para diseñadores y desarrolladores. Elige colores con conversiones HEX/RGB/HSL/CMYK, genera degradados CSS, comprueba ratios de contraste de accesibilidad WCAG, crea paletas de color y mide en pantalla.
¿Por qué usar herramientas de diseño online?
Las decisiones rápidas de color, las comprobaciones de accesibilidad y la generación de degradados son tareas constantes en el diseño y el desarrollo front-end. Tener herramientas en el navegador te permite comprobar un ratio de contraste o generar un degradado sin abrir Figma, Photoshop o una aplicación de escritorio aparte. Nuestras herramientas de diseño son instantáneas, precisas y siempre gratuitas.
Accesibilidad y cumplimiento WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG) exigen un ratio de contraste mínimo entre el texto y el color de fondo: 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA. Nuestro Verificador de contraste te da un resultado de aprobado/suspenso al instante frente a todos los criterios WCAG AA y AAA. Crear productos accesibles no es opcional: el Verificador de contraste facilita comprobar el cumplimiento durante el diseño, no después.
Referencia de formatos de color
HEX (#RRGGBB)
El formato más común en el diseño web. Se usa en CSS, HTML y herramientas de diseño. Fácil de copiar y pegar directamente en el código. Ejemplo: #0070f3
RGB (R, G, B)
Especifica los canales rojo, verde y azul de 0 a 255. Se usa en CSS como rgb(0, 112, 243). Útil para crear variaciones de color por programación.
HSL (H, S%, L%)
Tono (0–360°), Saturación (0–100%), Luminosidad (0–100%). El más intuitivo para las personas. Crear variantes más claras u oscuras de un color es fácil en HSL. Se usa en CSS como hsl(211, 100%, 48%).
CMYK (C%, M%, Y%, K%)
Se usa en el diseño para imprenta. Canales Cian, Magenta, Amarillo y Negro (Key). Convierte tu color de pantalla al equivalente CMYK más cercano para preparar la impresión.
Comparativas relacionadas
Preguntas frecuentes
¿Qué ratio de contraste necesito para la accesibilidad?
WCAG AA —el nivel exigido por la mayoría de las leyes de accesibilidad— requiere 4,5:1 para texto normal y 3:1 para texto grande (18 pt/24 px normal o 14 pt en negrita). AAA lo eleva a 7:1 y 4,5:1. El Verificador de contraste muestra los cuatro umbrales a la vez.
¿Qué formato de color debo usar en CSS?
Usa HEX para colores de marca estáticos, RGBA cuando necesites opacidad y HSL al generar tonos o temas. Los tres describen los mismos colores: el Selector de color muestra HEX, RGB, HSL y CMYK de cualquier color simultáneamente.
¿Son gratis las herramientas de diseño?
Sí. Todas las herramientas de color y diseño son completamente gratuitas, sin cuenta ni registro. Se ejecutan en tu navegador como una alternativa rápida a abrir Figma, Photoshop o una aplicación de escritorio para tareas rápidas.
¿Puedo convertir entre HEX, RGB, HSL y CMYK?
Sí. El Selector de color convierte cualquier color seleccionado a los cuatro formatos a la vez, genera una gama de tonos y muestra el ratio de contraste WCAG sobre fondos blanco y negro.