Diseño
Utilidades de diseño y frontend para formatos de color, degradados CSS, contraste de accesibilidad y generación de paletas OKLCH, para sistemas de diseño, temas y depuración de UI.
10 herramientas
Diseño
-
Conversor de colores
Convierte colores entre HEX, RGB, HSL y otros formatos para diseño, desarrollo frontend y una presentación visual coherente.
Abrir herramienta -
Generador de degradados
Crea degradados CSS de forma visual, ajustando el tipo, el ángulo, el centro, las paradas de color y la opacidad para fondos de UI, estados de componentes y visuales de marca.
Abrir herramienta -
Generador de sombras
Construye sombras CSS box-shadow de varias capas con controles visuales de desplazamiento, desenfoque, expansión, color y opacidad, y luego copia el código listo para producción.
Abrir herramienta -
Comprobador de contraste
Comprueba el contraste de texto, iconos, botones y componentes de UI frente a los requisitos de accesibilidad WCAG AA y AAA.
Abrir herramienta -
Generador de paletas
Genera escalas de color OKLCH, esquemas de color, paletas neutras, colores de texto legibles, variables CSS y JSON a partir de un solo color base.
Abrir herramienta -
Generador de patrones SVG
Construye patrones de fondo SVG en mosaico con puntos, cuadrículas, rayas, triángulos y ondas, y luego copia el CSS o descarga un SVG limpio.
Abrir herramienta -
Generador de Flexbox y Grid
Construye diseños responsivos de flexbox y CSS grid de forma visual con vista previa en vivo, y luego copia el CSS listo para producción para barras de navegación, tarjetas y galerías.
Abrir herramienta -
Generador de curvas Bézier cúbicas
Diseña curvas de suavizado CSS cubic-bezier arrastrando los puntos de control, previsualiza el movimiento en vivo y copia la función de temporización de la transición.
Abrir herramienta -
Generador de animaciones CSS
Construye animaciones de keyframes CSS a partir de una biblioteca de efectos de aparición, deslizamiento, zoom y llamada de atención, previsualiza el movimiento en vivo y copia el @keyframes y la abreviatura animation.
Abrir herramienta -
Conversor de px a rem
Convierte px, rem, em, pt y % respecto a una fuente raíz ajustable, crea una escala tipográfica modular, genera clamp() fluido y convierte CSS por lotes.
Abrir herramienta
Acerca de esta categoría
El trabajo de UI moderno vive entre los tokens de diseño y el CSS real. Una especificación se entrega en HEX, un diseñador quiere ver HSL, el código usa OKLCH y la auditoría de accesibilidad pide una relación de contraste, todo sobre el mismo color.
Estas herramientas traducen, generan y auditan esos colores en un solo lugar. Convierte entre formatos, construye un degradado CSS con paradas, comprueba el contraste frente a los umbrales WCAG o genera una paleta perceptualmente uniforme a partir de un solo tono de marca.
Qué puedes hacer aquí
-
Conversión de formatos de color
Traduce entre HEX, RGB(A), HSL(A), HSV, OKLCH y colores con nombre, con alternativas seguras para navegadores antiguos.
-
Constructor de degradados CSS
Compón degradados lineales, radiales y cónicos con varias paradas, copia el CSS listo para producción y previsualiza en vivo.
-
Comprobador de contraste WCAG
Prueba pares de primer plano y fondo frente a los umbrales AA, AA Large y AAA antes de publicar componentes o temas nuevos.
-
Generación de paletas OKLCH
Deriva paletas perceptualmente uniformes en torno a un color de marca para fondos, superficies, estados y gráficos.