Estudio de Color
Paletas, degradados, ruedas y todas las formas de encontrar el color perfecto.
Generador de Paletas IA
Describe un estado de ánimo y obtén paletas a juego — impulsado por una red neuronal real que se ejecuta por completo en tu navegador. Sin servidores, sin esperas, tus datos no salen del dispositivo.
IA · NeuronalGuía de Estilo IA
Describe tu marca y obtén un sistema de diseño completo — paleta, combinación de fuentes, escala tipográfica, espaciado, radios y sombras — emparejado por la red neuronal y ensamblado en un bloque CSS listo para copiar.
IA · Sistema de DiseñoConvertidor de Color
Convierta entre HEX, RGB, HSL, CMYK y OKLCH con conversión bidireccional instantánea.
Convertidor · Todos los formatosArmonías de Color
Genera paletas complementarias, triádicas, análogas y de complementarios divididos desde cualquier color base. Haz clic en cualquier muestra para copiar su código hex.
Color · TeoríaNombrador de Colores IA
Introduce cualquier color hex y encuentra sus nombres más cercanos: colores estándar CSS, colores tradicionales chinos, wagairo japonés y 12 culturas más. La ciencia del color perceptiva encuentra la coincidencia real, y el modelo IA sugiere temas de paleta relacionados.
IA · Ciencia del ColorCírculo Cromático
Rueda de color interactiva para explorar tonos, saturaciones y relaciones de color. Haga clic para seleccionar y bloquear colores.
Interactivo · VisualGenerador de Degradados
Diseñe hermosos degradados lineales y radiales con vista previa de Canvas en tiempo real. Copie el código CSS al instante.
Degradado · Exportación CSSPresets de degradados
Explore y copie 15 hermosos degradados preestablecidos.
Presets · Un clicPaleta desde Imagen
Extraiga hermosas paletas de colores de cualquier imagen mediante la cuantificación de color inteligente.
Extracción · InteligenteGenerador de Paletas
Cree esquemas de color armoniosos con modos monocromáticos, complementarios, análogos y triádicos. Vista previa en tiempo real con exportación CSS.
Color · InteractivoGenerador de Tintes y Sombras
Genera una escala completa de tintes y sombras desde cualquier color: 20 pasos con exportación HEX y SCSS.
tintes y sombras, escala de colorEfectos y Profundidad
Sombras, vidrio y radios — los detalles sutiles que hacen que la UI se sienta real.
Creador de Blobs
Genera formas orgánicas suaves para fondos, avatares y divisores de sección. Aleatoriza con un clic, ajusta la curvatura y copia el código border-radius o SVG.
CSS · OrgánicoGenerador de Bordes Redondeados
Editor visual de radio de borde con vista previa en tiempo real. Copie el código CSS con control de esquina individual.
CSS · Editor visualGenerador de Sombras
Generador interactivo de sombras de cuadros con vista previa de Canvas en tiempo real de múltiples capas y salida CSS.
CSS · En capasGenerador de Botones CSS
Diseña botones hermosos en segundos: 6 estilos, colores personalizados, radio y relleno, con CSS listo para copiar.
generador de botones, botón css, diseño de botonesGenerador de Filtros CSS
Crea efectos visuales con CSS filter() — desenfoque, brillo, contraste, rotación de tono, sepia y más. Vista previa en vivo sobre una imagen de muestra, copia la cadena completa de filtros al instante.
CSS · Efectos de ImagenGenerador de Glassmorphism
Crea tarjetas de vidrio esmerilado con desenfoque de fondo, transparencia y bordes sutiles. Vista previa en tiempo real y CSS para copiar.
UI · Vidrio esmeriladoGenerador de Texto con Degradado
Haz que el texto destaque con rellenos degradados y animación: ajusta el ángulo y los colores, copia el CSS al instante.
texto degradado, texto con degradadoGenerador de Sombras de Texto
Diseña sombras de texto en capas con vista previa en tiempo real. Ajusta desplazamiento, desenfoque, color y opacidad — copia el CSS al instante.
CSS · TipografíaKit Práctico
Comprobaciones, conversiones y sistemas que mantienen tus diseños accesibles y consistentes.
Fragmentos CSS IA
Describe el efecto que quieres — un botón brillante, un spinner de carga, una tarjeta de cristal — y la red neuronal encuentra el fragmento CSS correspondiente. Véalo renderizado en vivo, copie el código listo.
IA · Biblioteca de CódigoSimulador de daltonismo
Simula cómo los usuarios daltónicos ven los colores.
Accesibilidad · SimulaciónVerificador de Contraste
Verifique el cumplimiento de las WCAG AA/AAA para el texto y los colores de fondo. Obtenga calificaciones de accesibilidad instantáneas.
Accesibilidad · AA/AAAGenerador de Curvas Bézier
Diseña curvas de easing CSS personalizadas con vista previa en vivo y animación. Arrastra puntos de control, elige entre presets y copia la función cubic-bezier() al instante.
CSS · MovimientoConversor de PX a REM
Convierte píxeles a REM y viceversa al instante, con tamaño de fuente base ajustable y tabla de conversión completa. Esencial para CSS accesible y escalable.
CSS · UnidadesGenerador de Transformaciones CSS
Visualiza y genera transformaciones CSS — rotar, escalar, trasladar e inclinar con una vista previa interactiva en vivo. Copia la propiedad transform completa al instante.
CSS · AnimaciónSistema de Color UI
Genere paletas de tokens de diseño completas a partir de un único color de semilla. Exporte a Tailwind, CSS o SCSS.
Fichas de diseño · Viento de colaDiseño y Cuadrícula
Cuadrículas y proporciones — la columna vertebral estructural de cada interfaz.
Calculadora de Relación de Aspecto
Calcula y escala cualquier relación de aspecto — 16:9, 4:3, 1:1, 9:16 y personalizada. Redimensiona dimensiones conservando las proporciones, con ajustes preestablecidos de resoluciones comunes.
Utilidad · ProporciónGenerador de CSS Grid
Cree diseños CSS Grid visualmente con vista previa en tiempo real.
CSS · Editor visualCalculadora de Proporción Áurea
Calcula dimensiones de proporción áurea (1:1.618) para diseños, tipografía y logotipos. Obtén valores áureos mayor y menor al instante, con vista previa visual.
Diseño · ProporciónGenerador de Olas SVG
Crea divisores de olas SVG suaves para tu web: ajusta amplitud, longitud y capas, copia el SVG.
ola svg, divisor de olasTaller de Tipografía
Combinación de fuentes y escalas — la voz de tu diseño.
Emparejamiento de Fuentes IA
Describe tu proyecto y recibe combinaciones profesionales de Google Fonts emparejadas por una red neuronal real que corre en tu navegador. Míralas renderizadas en vivo y copia el CSS listo para usar.
IA · FuentesCalculadora Clamp
Genera tipografía fluida con CSS clamp(). Define tamaños mínimo, preferido y máximo — obtén la fórmula clamp() perfecta y una vista previa visual de la escala.
CSS · Tipografía FluidaEmparejamiento de Fuentes
Descubra combinaciones de fuentes armoniosas para títulos y cuerpo de texto de colecciones seleccionadas.
Tipografía · Más de 300 fuentesGenerador de Escala Tipográfica
Genera una escala tipográfica modular armoniosa con proporción áurea, tercera mayor y otras proporciones clásicas. Vista previa visual de tamaños y copia del CSS completo.
Tipografía · Escala14 idiomas
Cada herramienta, cada etiqueta, cada guía, completamente traducida.
Accesibilidad primero
Cada paleta incluye puntuaciones de contraste WCAG. Diseñar de forma inclusiva desde el principio.
Exportación amigable para desarrolladores
CSS, Tailwind, SCSS, JSON: copie el formato que necesita su proyecto.