Conversor de colores HEX, RGB y HSL
Los tres formatos de color más usados en diseño web representan exactamente los mismos colores pero con notaciones distintas. HEX (#1D9E75) es el más usado en CSS e HTML. RGB (29, 158, 117) es más intuitivo para mezclas de luz. HSL (162°, 69%, 37%) es el más útil para crear variaciones de un mismo color cambiando solo la luminosidad.
Conocer los tres formatos es esencial para trabajar con diseñadores, desarrolladores y sistemas de diseño como Figma o Tailwind CSS. El conversor de colores HEX ↔ RGB ↔ HSL de CreadorKit convierte entre los tres formatos al instante. Para definir paletas completas para tu marca, usa también el generador de paletas de colores.
✓ Referencia técnica: MDN Web Docs — Valores de color CSS
Tamaños de imagen para redes sociales
Publicar imágenes con las dimensiones incorrectas genera recortes automáticos, pixelado y pérdida de calidad. Estas son las dimensiones estándar recomendadas por cada plataforma:
| Red social | Post cuadrado | Post horizontal | Stories / Reels |
|---|---|---|---|
| 1080×1080px | 1080×566px | 1080×1920px | |
| TikTok | 1080×1080px | 1920×1080px | 1080×1920px |
| YouTube | 800×800px (perfil) | 1280×720px (miniatura) | 2560×1440px (banner) |
| Twitter / X | 1080×1080px | 1600×900px | 1080×1920px |
| 1200×1200px | 1200×627px | 1080×1920px | |
| 1080×1080px | 1200×628px | 1080×1920px |
Fuente: especificaciones oficiales de cada plataforma. Las dimensiones pueden cambiar — verifica siempre en help.instagram.com, support.tiktok.com y support.google.com/youtube.
Cómo crear gradientes CSS para tu web
Los gradientes CSS son uno de los recursos visuales más usados en diseño web moderno — fondos, botones, separadores y overlays de imagen se benefician de gradientes bien aplicados. Un gradiente lineal básico en CSS es: background: linear-gradient(135deg, #1D9E75, #111827).
Para crear gradientes más complejos con múltiples colores, puntos de parada y transparencias, el generador de gradientes CSS de CreadorKit produce el código listo para copiar sin necesidad de recordar la sintaxis. Compatible con CSS nativo, Tailwind y cualquier framework moderno.
✓ Referencia: MDN Web Docs — linear-gradient()
Redimensionar imágenes sin perder calidad
Redimensionar una imagen correctamente significa respetar la relación de aspecto original para evitar distorsiones, y elegir el formato de salida adecuado. Para web, WebP ofrece entre un 25% y un 35% menos peso que JPG con calidad similar. Para gráficos con transparencia, PNG o WebP son los más adecuados.
El redimensionador de imágenes de CreadorKit funciona directamente en el navegador sin subir nada a servidores externos — tu imagen nunca sale de tu dispositivo. Ideal para adaptar imágenes a los tamaños exactos requeridos por cada red social. Consulta todos los formatos en la calculadora de tamaños para redes sociales antes de redimensionar.