Cómo usar: Conversor de colores
- Escribe o pega un color en Valor del color —funciona cualquier formato CSS— o elige uno con el selector de color.
- Ajusta la Opacidad si necesitas transparencia; los valores HEX de 8 dígitos y
/ alphase actualizan automáticamente. - Haz clic en Copiar junto al formato que necesites. Cambia a la sintaxis Legado si tu código usa
rgba(…, …)con comas. - Desplázate hasta la paleta para obtener 11 tintes y sombras; elige la salida en variables CSS, Tailwind v4, SCSS o JSON, y cópiala o descárgala.
¿Qué es un conversor de colores?
Un conversor de colores traduce un color a las distintas notaciones que usan CSS y las herramientas de diseño. El mismo índigo puede escribirse como #4f46e5, rgb(79 70 229), hsl(243.4 75.4% 58.6%) o oklch(51.06% 0.2301 276.97); todos describen un mismo color sRGB. Los diseñadores entregan HEX desde Figma, una biblioteca de componentes necesita canales HSL y un sistema de diseño moderno puede estar escrito en OKLCH, así que convertir rápido (y bien) es una tarea diaria.
Formatos compatibles
| Formato | Ejemplo | Ideal para |
|---|---|---|
| HEX (3, 4, 6, 8 dígitos) | #4f46e5, #4f46e580 | El formato más habitual para entregar diseños. El par opcional de 4.º u 8.º dígito es el alfa: 80 ≈ 50 %. |
| RGB / RGBA | rgb(79 70 229 / 0.5) | Cálculos por canal, canvas y código con rgba() heredado. |
| HSL / HSLA | hsl(243 75% 59%) | Ajustes manuales rápidos tono, saturación y luminosidad. |
| HWB | hwb(243 27% 10%) | Mezclar un tono puro con blanco y negro; intuitivo para selectores de color. |
| OKLCH | oklch(51% 0.23 277) | Paletas perceptualmente uniformes y tokens de diseño (Tailwind CSS v4 publica su paleta en OKLCH). |
| CMYK | cmyk(66%, 69%, 0%, 10%) | Un punto de partida aproximado para impresión; consulta la nota de abajo. |
| Colores con nombre | tomato, rebeccapurple | Se reconocen las 148 palabras clave de CSS; la herramienta también muestra el nombre más cercano para cualquier color. |
Por qué merece la pena aprender OKLCH
En HSL, un amarillo con “50 % de luminosidad” se ve mucho más brillante que un azul al 50 %, porque HSL es una simple transformación geométrica de RGB. OKLCH se basa en el modelo OKLab, diseñado para que pasos iguales en L (luminosidad) se perciban como pasos iguales, C es el croma (intensidad del color) y H es el ángulo del tono. Por eso es ideal para generar sombras consistentes, estados hover y pares de colores accesibles. OKLCH también puede describir colores fuera de sRGB (por ejemplo, Display P3); si introduces uno, esta herramienta lo ajusta a sRGB y te lo indica.
Cómo se genera la paleta 50–950
La paleta mantiene el tono de tu color y trabaja en OKLCH: cada paso tiene un objetivo de luminosidad fijo (desde el muy claro 50 hasta el muy oscuro 950) y una parte del croma de tu color, que se reduce cuando hace falta para que cada muestra quede dentro de sRGB. Con Mantener mi color exacto activado, tu color sustituye al paso cuya luminosidad sea más cercana, de modo que el color de marca aparece sin cambios en la escala. ¿Necesitas comprobar la accesibilidad de pares de la paleta? Usa el Comprobador de contraste.
Una nota sobre CMYK
La conversión de pantalla a impresión depende de la tinta, el papel y el perfil ICC que use tu imprenta. Los valores CMYK de aquí usan la fórmula estándar sin calibrar (K = 1 − máx(R, G, B)), que sirve para maquetas pero no para trabajos de impresión críticos para la marca; pide a tu imprenta una conversión con perfil.
Usar los colores en Webflow
Pega el valor HEX en el selector de color de Webflow o en una variable de color (panel Variables). Crear una variable por paso de la paleta —por ejemplo, Brand 50 … Brand 950— te da la misma estructura de tokens que la salida en variables CSS, así que las clases pueden referenciar sombras en lugar de valores fijos.
También se busca como: convertir hex a rgb, hex a rgb, convertir rgb a hex, hex a hsl, conversor oklch, selector de color, generador de paleta de colores, paleta de colores tailwind.
Herramientas que combinan con: Conversor de colores
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Generador de Box Shadow — Apila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre una tarjeta en vivo, y luego copia el CSS de box-shadow o text-shadow.
- Conversor de bases numéricas — Escribe un número en cualquier base y verlo al instante en todas las demás.
- Imagen a Base64 — Convierte un archivo PNG, JPEG, SVG, WebP o GIF en un URI de datos Base64 con código CSS y HTML listo para copiar, o pega una cadena Base64 para ver una vista previa y descargar la imagen.
Preguntas frecuentes
¿Cómo convierto HEX a RGB a mano?
#4F46E5: 4F = 79, 46 = 70, E5 = 229, así que el color es rgb(79 70 229). Un código de 3 dígitos como #f60 primero duplica cada dígito (#ff6600).¿Qué significa un color HEX de 8 dígitos?
00 (totalmente transparente) hasta ff (opaco). #4f46e580 es el índigo a 128/255 ≈ 50 % de opacidad. Todos los navegadores modernos admiten HEX de 4 y 8 dígitos.¿Debo usar OKLCH en lugar de HEX o HSL?
¿Por qué mi valor HSL cambia ligeramente después de convertirlo?
¿Cuál es la diferencia entre HSL y HWB?
hwb(0 0% 0%) es rojo puro y hwb(0 50% 0%) es rojo mezclado con 50 % de blanco (rosa). HWB suele ser más fácil de entender en los selectores de color.