¿Cómo convierto HEX a RGB y HSL?
Para convertir un color HEX a RGB, divídelo en tres pares de 2 dígitos y convierte cada uno de hexadecimal a decimal (0-255); para obtener HSL, calcula el matiz, la saturación y la luminosidad a partir de esos valores RGB. Ejemplo: #4F46E5 se convierte en rgb(79, 70, 229) y hsl(243, 75%, 59%).
Pasos para convertir HEX a RGB y HSL
- Quita el símbolo # y divide el código HEX de 6 dígitos en tres pares de 2 dígitos (para #4F46E5: 4F, 46, E5).
- Convierte cada par hexadecimal a un número decimal de 0 a 255 (4F=79, 46=70, E5=229) para obtener los valores RGB.
- Divide cada valor RGB entre 255 para normalizarlo al rango 0-1, y luego halla el máximo y el mínimo de los tres.
- La luminosidad es el promedio del máximo y el mínimo; la saturación y el matiz se calculan a partir de la diferencia entre el máximo y el mínimo con las fórmulas estándar de HSL.
- Redondea el matiz a grados enteros (0-360) y la saturación y luminosidad a porcentajes enteros (0-100%) para mostrarlos.
De HEX a RGB a HSL
Canal RGB = parseInt(par hex, 16) · Luminosidad = (máx(R,G,B) + mín(R,G,B)) / 2, normalizado a 0-1
- R, G, B = valores de los canales rojo, verde y azul, cada uno de 0 a 255
- H, S, L = matiz en grados (0-360), saturación y luminosidad en porcentaje (0-100%)
Conversiones de color más buscadas
¿Cuánto es #FF0000 en RGB?
#FF0000 es rgb(255, 0, 0): rojo puro, con el canal rojo al máximo y verde y azul en cero.
¿Cuánto es #FFFFFF en RGB?
#FFFFFF es rgb(255, 255, 255): blanco puro, con los tres canales al máximo.
¿Cuánto es #000000 en RGB?
#000000 es rgb(0, 0, 0): negro puro, con los tres canales en cero.
¿Cuánto es rgb(0, 128, 0) en hexadecimal?
rgb(0, 128, 0) es #008000, ya que 128 en decimal equivale a 80 en hexadecimal (un verde medio).
¿Cuánto es #FFA500 en RGB?
#FFA500 es rgb(255, 165, 0): el naranja estándar.
¿Cuánto es #00FF00 en RGB?
#00FF00 es rgb(0, 255, 0): verde puro, con solo el canal verde al máximo.
¿Cuánto es #0000FF en RGB?
#0000FF es rgb(0, 0, 255): azul puro, con solo el canal azul al máximo.
¿Cuánto es rgb(255, 255, 0) en hexadecimal?
rgb(255, 255, 0) es #FFFF00: amarillo puro, mezcla de rojo y verde al máximo.
Ejemplos de conversión de color
| HEX | RGB | HSL |
|---|
| #4F46E5 | rgb(79, 70, 229) | hsl(243, 75%, 59%) |
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #1D4ED8 | rgb(29, 78, 216) | hsl(224, 76%, 48%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
Preguntas frecuentes
¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX y RGB describen un color de la misma forma, como cantidades de luz roja, verde y azul, solo que con distinta notación (base 16 frente a base 10). HSL describe el mismo color mediante el matiz (el color en sí), la saturación (intensidad) y la luminosidad (qué tan claro u oscuro es), lo cual suele resultar más intuitivo para ajustar un color a mano.
¿Por qué el blanco muestra 0% de saturación?
La saturación mide cuán lejos está un color del gris. El blanco puro, el negro y cualquier tono de gris intermedio tienen valores iguales de rojo, verde y azul, así que su saturación siempre es 0%, sin importar la luminosidad.
¿Puedo introducir un código HEX de 3 dígitos como #FFF?
Esta herramienta espera el formato HEX completo de 6 dígitos (#RRGGBB). Una forma abreviada de 3 dígitos como #FFF es una notación corta de CSS para #FFFFFF, donde cada dígito se duplica; conviértela a 6 dígitos antes de introducirla aquí.
¿Cómo se calcula el matiz cuando el rojo, el verde y el azul son todos distintos?
El matiz depende de qué canal (rojo, verde o azul) tiene el valor más alto, y se calcula a partir de la posición relativa de los otros dos canales. El resultado es un ángulo en una rueda de color de 360 grados, donde 0 grados es rojo, 120 es verde y 240 es azul.
Esta herramienta convierte colores HEX estándar de 6 dígitos usados en la web; no admite canales alfa (transparencia), colores con nombre de CSS ni espacios de color más allá de sRGB, como HSV o LAB.
Sources: W3C CSS Color Module Level 4