Cargando aplicación...
Preparando tu experiencia meskeIA
Elige un color y velo a la vez en RGB, HSV, HSL y HEX. Pensado para programación de videojuegos, generación de imágenes, CSS y diseño.
#2E86ABrgb(46, 134, 171)hsl(198, 58%, 43%)hsv(198, 73%, 67%)RGB, HSV, HSL y HEX — qué son y cuándo usar cada uno
| Espacio | Componentes | Rango | Para qué sirve | Cuándo usarlo |
|---|---|---|---|---|
| RGB | Rojo, verde, azul | 0–255 por canal | Cómo la pantalla genera el color (luz) | Shaders, formatos de imagen, almacenamiento |
| HEX | #RRGGBB (es RGB en hexadecimal) | 00–FF por canal | Notación compacta de un color RGB | CSS, HTML, editores de diseño |
| HSV | Tono, saturación, valor | H 0–360, S/V 0–100% | Elegir y ajustar color de forma intuitiva | Pickers, paletas, arte de videojuegos |
| HSL | Tono, saturación, luminosidad | H 0–360, S/L 0–100% | Aclarar/oscurecer manteniendo el matiz | Sistemas de diseño, temas, CSS moderno |
En CSS conviven HEX, rgb() y hsl(). HSL es muy práctico para generar variantes de un color de marca: mismo tono y saturación, distinta luminosidad para estados hover, bordes o fondos.
💡 Define el color base en HSL y deriva la paleta cambiando solo la L; mantienes la coherencia del tono.
Para una paleta coherente de un personaje o escenario se parte de un tono y se varían saturación y valor en HSV. Así se obtienen luces y sombras del mismo color sin que «cambie» de matiz.
💡 Sombras más saturadas y con tono ligeramente desplazado suelen verse más vivas que limitarse a bajar el valor.
Ajustar saturación o tono global de una imagen es natural en HSV/HSL. En generación por código (shaders, IA, procedural) se trabaja en RGB para la salida, pero a menudo se razona en HSV para controlar el resultado.
💡 Subir la saturación uniforme en HSV evita el «lavado» que produce tocar canales RGB por separado.
El contraste entre texto y fondo depende sobre todo de la luminosidad. Ver el color en HSL ayuda a entender por qué dos tonos distintos con la misma L contrastan poco entre sí.
💡 El contraste WCAG se mide entre dos colores con su luminancia relativa; este visualizador es un punto de partida, no un medidor de conformidad.
No. Comparten el tono (H) y una saturación, pero su tercera componente es distinta. En HSV es el valor (V): a V=100% el color es lo más brillante posible para ese tono. En HSL es la luminosidad (L): a L=100% siempre es blanco y a L=50% es el color puro. Por eso un mismo color tiene cifras de S y de la tercera componente diferentes en cada modelo.
💡 Regla rápida: en HSV el blanco se consigue bajando la saturación; en HSL, subiendo la luminosidad.
Cuando el rojo, el verde y el azul son iguales (un gris, el blanco o el negro) la saturación es 0 y el tono queda indefinido matemáticamente. Esta herramienta conserva el último tono que tenías para que el cuadrado y el slider no «salten» al pasar por un gris.
💡 Es el motivo de que el tono se guarde aparte del RGB en muchos selectores de color.
Sí, son exactamente la misma información. #2E86AB es rgb(46, 134, 171): cada par hexadecimal es un canal de 0 a 255 escrito en base 16. HEX es solo una forma más corta de escribir el color, muy cómoda en CSS y al compartirlo.
💡 2E en hexadecimal es 46 en decimal; 86 es 134; AB es 171.
CMYK es un modelo sustractivo pensado para impresión con tintas, no para pantalla. RGB, HSV, HSL y HEX describen luz emitida (modelo aditivo) y es lo que usan pantallas, videojuegos y la web. Convertir a CMYK depende del perfil de color de la impresora y del papel, por eso no se incluye aquí.
💡 Un color RGB muy vivo puede quedar «apagado» al imprimirlo: parte de la gama RGB no es reproducible en CMYK.
Para la salida real (un shader, un buffer de imagen, una textura) se usa RGB porque es lo que entiende la pantalla. Para la lógica de elección de color —generar paletas, variar tonos, oscurecer— suele ser más cómodo trabajar en HSV o HSL y convertir a RGB al final.
💡 Implementar las conversiones rgb↔hsv una vez te ahorra depender de librerías en proyectos pequeños.
Las conversiones implican redondeos: RGB usa enteros de 0 a 255 y HSV/HSL usan porcentajes. Al pasar de un espacio a otro y volver, el redondeo puede mover algún canal en una unidad. Es normal y, a simple vista, imperceptible.
💡 Si necesitas exactitud bit a bit, guarda y compara siempre en RGB o HEX, no en HSV/HSL.
Divide R, G y B entre 255 para llevarlos al rango 0–1. Trabajar en 0–1 simplifica el resto de la fórmula.
Calcula máx y mín de los tres canales normalizados y su diferencia delta = máx − mín.
El valor V es el máximo. La saturación S es 0 si el máximo es 0; en otro caso, S = delta / máx. Multiplica por 100 para tenerlos en porcentaje.
Según cuál de los tres sea el máximo se usa una fórmula distinta comparando los otros dos canales; el resultado se multiplica por 60 para obtener grados.
Si el tono sale negativo, súmale 360 para dejarlo en 0–360. Listo: ya tienes H, S y V equivalentes al color RGB de partida.
Razona el color por tono y brillo, pero almacénalo y transmítelo en RGB o HEX, que es lo que entienden pantalla y formatos.
Fija el tono y mueve solo saturación o luminosidad para obtener una familia de colores coherente.
Dos colores contrastan bien sobre todo si su luminosidad difiere lo suficiente, no solo si son tonos distintos.
Al programar un picker, conserva H por separado para que grises y blancos no borren el tono elegido.
RGB es luz (pantalla); CMYK es tinta (impresión). No esperes que un RGB vibrante se imprima idéntico.
Al ir y volver entre espacios puede variar algún canal en una unidad; compara siempre en RGB o HEX.