Conversor de color — HEX, RGB, HSL
Pega un color en cualquiera de las tres notaciones y recibe las otras, alfa incluido, con una muestra para ver lo que estás convirtiendo.
Color
Notaciones
Sobre esta herramienta
El hex es lo que te da una herramienta de diseño, rgb() es lo que quiere un canvas o una biblioteca de imágenes, y hsl() es a lo que recurres cuando necesitas un color un poco más claro o rotar un tono. Convertir entre ellos a mano es una aritmética que no le gusta a nadie. Pega cualquiera de las tres —con o sin alfa— y aparecen las demás, junto con una muestra, porque un valor por sí solo es fácil de teclear mal y difícil de comprobar a ojo.
Cómo se usa
- 1Pega un color: #3fb984, rgb(63 185 132) o hsl(157, 49%, 49%).
- 2Lee las otras notaciones a la derecha y comprueba la muestra que hay encima.
- 3Copia la línea que necesites, o la propiedad personalizada de CSS ya preparada.
Preguntas frecuentes
›¿Qué notaciones puedo pegar?
Hex de 3, 4, 6 u 8 dígitos (#3fb, #3fb9, #3fb984, #3fb984cc), rgb() y rgba(), y hsl() y hsla(). Se aceptan tanto la sintaxis con comas como la moderna con espacios y una barra antes del alfa.
›¿Por qué el HSL vuelve con decimales?
Porque el tono, la saturación y la luminosidad son continuos mientras que el hex tiene 8 bits por canal. Convertir hex a HSL rara vez cae en números enteros, y redondearlos desplazaría ligeramente el color en el camino de vuelta.
›¿Para qué sirve el cuarto par hexadecimal?
Para el alfa. #3fb984cc es el mismo color al 80 % de opacidad. Ya está soportado en todas partes donde importa, y es más corto que cambiar a rgba().
›¿Se admiten colores con nombre como «tomato»?
No. Resolver las 148 palabras clave de CSS exige la tabla completa a cambio de muy poco beneficio: pega el valor hex en su lugar. Cualquier panel de herramientas del navegador te lo dará.
›¿Por qué los diseñadores no paran de hablar de OKLCH?
Porque la luminosidad de HSL no coincide con la luminosidad percibida: dos colores con la misma L pueden verse muy distintos. OKLCH lo corrige, lo que lo hace mucho mejor para construir paletas. Esta página se queda con las tres notaciones que pegas a diario.