Color y diseño
Convierte colores HEX, RGB y HSL, genera paletas, degradados y comprueba el contraste para diseños accesibles.
50 herramientas gratis
HEX a RGB
Convierte cualquier color hexadecimal a sus valores RGB al instante.
Usar gratisRGB a HEX
Convierte valores RGB (0–255) a código hexadecimal listo para tu CSS.
Usar gratisGenerador de paletas
Elige un color base y genera paletas armónicas: análoga, complementaria, triádica y más.
Usar gratisContraste WCAG
Comprueba si tu combinación de colores cumple WCAG 2.
Usar gratisDegradado CSS
Crea degradados lineales o radiales y copia el código CSS listo para usar.
Usar gratisRueda de color
Visualiza las relaciones de color en la rueda cromática y explora armonías desde cualquier tono.
Usar gratisHSL a RGB
Convierte colores HSL a RGB y HEX al instante.
Usar gratisRGB a CMYK
Convierte RGB a CMYK para preparar tus diseños para impresión.
Usar gratisSimulador de daltonismo
Mira cómo percibe tus colores una persona con protanopia, deuteranopia o tritanopia.
Usar gratisSombra CSS
Crea box-shadow personalizadas con vista previa en vivo y copia el código CSS.
Usar gratisBorder radius
Ajusta el radio de cada esquina y obtén el código border-radius CSS al instante.
Usar gratisTexto con degradado
Crea texto con degradado de color usando solo CSS, con vista previa en vivo.
Usar gratisBotones CSS
Diseña botones y obtén el CSS completo con estado hover incluido.
Usar gratisLoader CSS
Crea spinners de carga animados con solo CSS: color, tamaño y velocidad a tu gusto.
Usar gratisTonos de un color
Genera tintes y sombras de cualquier color para tu paleta.
Usar gratisMezclar colores
Mezcla dos colores con la proporción que elijas y obtén el resultado al instante.
Usar gratisColor aleatorio
Genera colores aleatorios en HEX, RGB o HSL, uno o varios a la vez.
Usar gratisColor complementario
Obtén el color complementario (opuesto en la rueda cromática) de cualquier tono.
Usar gratisNombre del color
Descubre el nombre aproximado más cercano a tu color hexadecimal.
Usar gratisParejas de fuentes
Combinaciones de tipografías (título + cuerpo) que funcionan bien juntas, por estilo.
Usar gratisEscala tipográfica
Genera una escala tipográfica modular desde tu tamaño base con la razón que elijas.
Usar gratisPX a REM
Convierte píxeles a rem al instante según el tamaño de raíz.
Usar gratisPX a EM
Convierte píxeles a em según el tamaño del elemento padre.
Usar gratisPT a PX
Convierte puntos tipográficos (pt) a píxeles según los DPI.
Usar gratisProporción áurea
Calcula medidas con la proporción áurea (φ = 1,618…) desde cualquier valor.
Usar gratisPatrones CSS
Fondos con patrones geométricos usando solo CSS, sin imágenes.
Usar gratisGlassmorphism
Efecto cristal esmerilado con backdrop-filter: ajusta opacidad, blur y borde.
Usar gratisNeumorphism
Efecto neomórfico de relieve suave para tarjetas y botones.
Usar gratisDivisores SVG
Crea divisores de sección con ondas SVG: color, ondas y altura a tu gusto.
Usar gratisBlobs SVG
Crea formas orgánicas (blobs) SVG para fondos modernos.
Usar gratisSVG como fondo CSS
Convierte tu SVG en un data-URI listo para usar como fondo CSS.
Usar gratisComprimir SVG
Reduce el tamaño de tu SVG quitando comentarios y espacios sobrantes, sin perder calidad.
Usar gratisProbar fuente
Mira cómo se ve tu texto con distintas fuentes del sistema antes de decidir.
Usar gratisInterlineado
Calcula el interlineado (line-height) ideal según tu tamaño de fuente.
Usar gratisTema claro/oscuro CSS
Genera variables CSS para modo claro y oscuro con tus colores.
Usar gratisGrid CSS
Crea layouts con CSS Grid: columnas, filas y espacios con vista previa.
Usar gratisFlexbox
Genera contenedores flexibles con la alineación y el espaciado que elijas.
Usar gratisEscala de espaciado 8pt
Sistema de espaciado basado en múltiplos de 8 (8pt grid) para interfaces consistentes.
Usar gratisSombra de texto
Crea text-shadow personalizadas con vista previa en vivo.
Usar gratisDegradado animado
Fondo con degradado en movimiento: elige colores y velocidad, copia la animación CSS.
Usar gratisNombres de colores HTML
Tabla de referencia con los 148 nombres de colores CSS y su código HEX.
Usar gratisTest de daltonismo
Placas estilo Ishihara para orientarte sobre tu visión del color.
Usar gratisAvatar con iniciales
Crea un avatar SVG con las iniciales de cualquier nombre y tus colores.
Usar gratisFiltros CSS
Aplica filtros (blur, brillo, sepia…) a imágenes con CSS y copia el código.
Usar gratisClip-path
Recorta elementos con formas CSS: polígono, círculo y elipse.
Usar gratisScrollbar CSS
Personaliza la barra de desplazamiento: colores, ancho y radio para WebKit y Firefox.
Usar gratisBreakpoints responsive
Medidas estándar para diseño responsive con media queries listas para copiar.
Usar gratisBadges CSS
Crea insignias y píldoras (badges) con CSS: colores, texto y forma a tu gusto.
Usar gratisTooltips CSS
Tooltips con CSS puro, sin JavaScript: colores, posición y texto a tu gusto.
Usar gratisAcordeón CSS
Acordeón desplegable con CSS puro, sin JavaScript: define tus secciones y copia el HTML+CSS.
Usar gratisGuías de Color y diseño
- Cómo elegir la paleta de colores de tu marca
- Contraste de colores: guía de accesibilidad
- Cómo convertir HEX a RGB (y al revés)
- Cómo crear degradados CSS bonitos paso a paso
- Cómo combinar colores sin ser diseñador
- HEX vs RGB vs HSL: ¿qué formato de color usar?
- Colores complementarios vs análogos: guía visual
- Por qué tus colores se ven mal en móvil
- Problemas de contraste que debes corregir
- Guía definitiva de color y diseño