Herramientas de diseño
Herramientas rápidas para diseño visual y de front-end, con CSS listo para copiar y comprobaciones de accesibilidad basadas en la fórmula de contraste WCAG.
7 herramientas
Herramientas de esta categoría
- Conversor de colorConvierte colores entre HEX, RGB, HSL, HWB, OKLCH y CMYK aproximado. Pega un color CSS o usa el selector y copia cada formato. Se ejecuta en tu navegador.
- Comprobador de contraste de colorComprueba la relación de contraste de texto y fondo según WCAG 2.2, consulta los resultados AA y AAA para texto y elementos de interfaz y encuentra el color más cercano que cumple.
- Generador de degradados CSSCrea degradados CSS lineales, radiales y cónicos con entre 2 y 6 puntos de color. Ajusta el ángulo y las posiciones, previsualiza el resultado en tiempo real y copia el CSS del fondo.
- Generador de sombras de cajaDiseña sombras CSS con varias capas: desplazamiento, desenfoque, expansión, color, opacidad e inset. Previsualízalas sobre cualquier fondo y copia el CSS de box-shadow.
- Generador de paletas de coloresGenera paletas complementarias, análogas, triádicas, tetrádicas, complementarias divididas y de tonos a partir de un color. Bloquea colores y copia el resultado en HEX, CSS o JSON.
- Convertidor de px a remConvierte px a rem o em y viceversa con cualquier tamaño de fuente raíz (16px de forma predeterminada). Incluye una tabla de tamaños habituales y permite convertir valores px en fragmentos CSS completos.
- Calculadora de relación de aspectoCalcula el ancho o el alto que falta para cualquier relación de aspecto, simplifica medidas como 1920×1080 a 16:9, previsualiza la forma y copia la regla aspect-ratio de CSS.