Diseño y color

Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.

Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.

Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.

Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.

Calcula la medida que falta para una proporción dada y enumera los tamaños estándar que coinciden.

Compone sombras de caja y de texto en varias capas con vista previa en vivo, y emite el CSS.

Compone degradados lineales, radiales y cónicos con paradas que se arrastran, y emite el CSS en sRGB o en OKLCH.

Dispone una cuadrícula de forma visual con áreas con nombre y emite el CSS de grid-template.

Construye una rampa de 50 a 950 desde un color y la refleja en una versión oscura, de modo que cada pareja de tokens conserva su contraste.

Coloca una captura dentro de un marco de teléfono, tableta, portátil o navegador, con fondo y sombra.

Activa cada propiedad de flex sobre un ejemplo en vivo y muestra el CSS junto con lo que cambió cada una.

Calcula la expresión clamp() que hace que un tamaño crezca de forma continua entre dos anchos de pantalla.

Convierte TTF y OTF a WOFF y a la inversa dentro del navegador y emite la regla @font-face correspondiente; WOFF2 necesita Brotli y se rechaza indicando qué herramienta de escritorio usar.

Propone parejas de fuente para títulos y para cuerpo de texto a partir de las pilas del sistema, con vista previa usando tu propio texto, y entrega el CSS.

Reduce una fuente TrueType a los glifos que tu texto usa de verdad y puede envolver el resultado como WOFF, que es la diferencia entre una fuente web de megabytes y una de kilobytes.

Encuentra la entrada de la paleta de Tailwind más próxima a cualquier color y muestra la distancia perceptual.

Compone una imagen de 1200×630 con título, subtítulo, línea de marca y logo opcional sobre la plantilla que elijas, y escribe las etiquetas meta que la acompañan.

Edita un SVG junto a su render en vivo y explica el archivo: viewBox y escalado, transformaciones, cada comando de trazado, el color heredado, los bytes desperdiciados y qué se rompe dentro de un <img>, de un data URI o en línea.

Genera una escala de luminosidad de 50 a 950 desde un solo color con pasos perceptualmente iguales, lista para usar como tokens de diseño.

Genera patrones SVG que se repiten sin costura —rayas, puntos, cuadrículas, ruido— con control de color y escala.

Da forma a cada esquina por separado, incluida la sintaxis de dos valores para formas orgánicas, y emite el CSS.

Apila filtros de desenfoque, brillo, saturación, tono y sombra sobre una muestra y emite el CSS.

Saca los colores, espaciados, radios y tipografías de una hoja de estilos y propone un conjunto de propiedades personalizadas.

Ajusta una curva cubic-bezier o de resorte contra una vista previa animada y emite la función de tiempo en CSS.

Abre un archivo de fuente y muestra su cobertura de glifos por bloque, pesos, ejes variables, permiso de incrustación y los registros de nombre de la licencia.

Convierte RGB a CMYK con la fórmula simple, sin perfil ICC ni de papel, y señala los colores saturados que una prensa de cuatro tintas apagará.

Convierte los datos de un trazado entre comandos absolutos y relativos, lo desplaza, escala, gira e invierte, y muestra su caja envolvente con vista previa.

Codifica un SVG como data URI de fondo en CSS, escapando solo lo imprescindible para que ocupe poco.

Construye una escala modular de tamaños de texto y espaciados desde un tamaño base y una razón, exportable como CSS o como tokens.