Convertidor de Código de Color
Pega un color en formato hex (#ff6600 o #f60), rgb(255, 102, 0), separado por comas 255, 102, 0 o hsl(24, 100%, 50%), y el convertidor lo devuelve al instante en los otros dos formatos, con vista previa de muestra en vivo y copia con un clic por formato.
Cómo funciona la conversión de código de color
-
1
Ingresa un color en un formato admitido
Hex (#abc, #abcdef), rgb(r, g, b), separado por comas r, g, b o hsl(h, s%, l%).
-
2
Analizado a una representación interna
La herramienta convierte el valor a RGB internamente y, a partir de ahí, deriva los equivalentes en hex y HSL.
-
3
Todos los formatos mostrados
Las cadenas hex, RGB y HSL correspondientes se muestran lado a lado.
-
4
Muestra de vista previa en vivo
Muestra el color resultante de un vistazo para que confirmes la conversión antes de copiarla.
Formatos admitidos
| Formato | Ejemplo | Uso |
|---|---|---|
| Hex 3 | #F66 |
Abreviatura; solo para colores con dígitos repetidos |
| Hex 6 | #FF6B6B |
Predeterminado para CSS y diseño gráfico |
| RGB | rgb(255, 107, 107) |
CSS, JS, software de diseño |
| Separado por comas | 255, 107, 107 |
Igual que RGB sin la sintaxis de función |
| HSL | hsl(0, 100%, 71%) |
Más fácil de razonar sobre matiz/saturación/brillo |
Cuándo usar cuál
- Hex para CSS estático y entrega de diseño.
- RGB cuando pasas los canales a JavaScript o a software de diseño.
- HSL al ajustar brillo o saturación, el modelo mental es más claro que RGB.
Existen otros formatos como HSV, CMYK, LAB, LCH y OKLCH en las herramientas de diseño. Describen el mismo color de formas distintas, pero este convertidor se centra en los tres formatos web básicos anteriores.
Precisión
- Las conversiones entre hex, RGB y HSL son exactas: hex y RGB son el mismo modelo de color, y HSL se deriva de RGB con una fórmula estándar.
- Los valores HSL se redondean a números enteros, por lo que una conversión de ida y vuelta puede mover el último dígito. El color visible es idéntico; usa hex cuando necesites una copia exacta bit a bit.
Preguntas frecuentes
Hex o rgb() para amplia compatibilidad. hsl() cuando deseas legibilidad. Los navegadores modernos también admiten oklch() y otros formatos, pero hex sigue siendo el valor predeterminado más seguro.
No, el convertidor solo acepta colores opacos: hex de 3 o 6 dígitos, rgb() y hsl() sin canal alfa. Deja rgba() o el hex de 8 dígitos directamente en tu CSS.
No, el convertidor solo acepta los tres formatos numéricos. Usa un selector de color o una consulta en línea para convertir primero el color nombrado a hex.
HSL se muestra con matiz, saturación y brillo en números enteros, por lo que una conversión de ida y vuelta puede mover un valor en un punto. El color visible es idéntico; usa hex cuando necesites una copia exacta.
Herramientas relacionadas
Referencia de la tabla ASCII
Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.
Referencia de caracteres HTML
Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Referencia de atajos de teclado
Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.
Simplificador de Álgebra Booleana
Evalúa una expresión booleana para cada combinación de entradas y muestra la tabla de verdad completa. Admite hasta cinco variables y los operadores &, |, ! y ^.