Convierte valores RGB a HSV

Última revisión del contenido:

Escribe tres canales RGB y el resultado HSV aparece mientras escribes: rgb(59, 130, 246) es hsv(217.2, 76%, 96.5%). Con el selector Notación HSV eliges grados y porcentaje como en los programas de diseño, la escala de OpenCV o fracciones de 0 a 1, y el campo reconoce por sí mismo los canales escritos como fracciones.

Notación HSV

Photoshop y Figma muestran grados y porcentajes. OpenCV guarda el tono del 0 al 179, y la saturación y el valor del 0 al 255. colorsys de Python y Unity devuelven fracciones del 0 al 1.

a

¿Qué es HSV y en qué se diferencia de RGB?

RGB describe un color por la cantidad de luz roja, verde y azul que la pantalla emite en un punto. HSV describe ese mismo color con tres rasgos más fáciles de imaginar: el matiz o tono (H), un ángulo de 0 a 360° en el que 0 es rojo, 60 amarillo y 120 verde, la saturación (S), que va de 0 a 100%, y el valor (V). El modelo también se llama HSB, con B de brillo[1].


Lo describió Alvy Ray Smith en 1978. Quería que los colores de la pantalla se eligieran como un pintor mezcla sus pinturas: toma un tono puro y lo aclara con blanco o lo oscurece con negro. En su modelo, menos saturación significa más blanco, y menos valor significa más negro[2].


En el Selector de color de Photoshop el modelo aparece como HSB: el tono es un ángulo entre 0° y 360°, y la saturación y el brillo se indican en porcentaje[3]. Si necesitas los mismos canales RGB como código hexadecimal, el convertidor de RGB a HEX te lo da.

Tarjetas de muestras de color dispuestas en círculo sobre una mesa clara
Tarjetas de muestras de color colocadas en círculo, del amarillo a los verdes y azules y de ahí a los violetas, rosas y rojos. El lugar de una tarjeta en una rueda así es el primer número de HSV, el tono. Foto: Andy Brown, Unsplash.

Si tienes el color en otro formato, como OKLCH, Lab o código de Android, el convertidor de colores lo muestra a la vez en todos los formatos.

¿Cómo se convierte RGB a HSV?

Divide cada canal entre 255. El valor V es el mayor de los tres resultados. La saturación S es la diferencia entre el mayor y el menor, dividida entre el mayor. El tono H depende de qué canal es el más fuerte[4].


Fórmula: V = máx, S = (máx − mín) ÷ máx y, cuando el canal más fuerte es el azul, H = 240° + 60° × (R − G) ÷ (máx − mín). Si el más fuerte es el rojo, el tono se cuenta desde 0°, y si es el verde, desde 120°[4].


Tomemos rgb(59, 130, 246). Divididos entre 255, los canales valen 0,231, 0,510 y 0,965. El azul es el más alto, así que el valor es 96,5%. La diferencia entre el más alto y el más bajo es 0,733, y 0,733 ÷ 0,965 da una saturación del 76%.


El tono es 240° + 60° × (0,231 − 0,510) ÷ 0,733, es decir, 240° − 22,8° = 217,2°. El color completo es hsv(217.2, 76%, 96.5%). Cuando los tres canales son iguales, el color es un gris, la saturación es 0 y el tono no importa[2], así que el convertidor pone 0 en ese lugar.

¿Qué valores HSV tienen los colores básicos?

La tabla muestra el resultado del convertidor para doce colores en las tres notaciones que ofrece el selector Notación HSV.
Color y valores RGBCódigo HEX0–360°, 0–100%OpenCV (0–179, 0–255)0–1
Rojo 255, 0, 0#FF0000hsv(0, 100%, 100%)0, 255, 2550, 1, 1
Naranja 255, 165, 0#FFA500hsv(38.8, 100%, 100%)19, 255, 2550.1078, 1, 1
Amarillo 255, 255, 0#FFFF00hsv(60, 100%, 100%)30, 255, 2550.1667, 1, 1
Verde 0, 255, 0#00FF00hsv(120, 100%, 100%)60, 255, 2550.3333, 1, 1
Cian 0, 255, 255#00FFFFhsv(180, 100%, 100%)90, 255, 2550.5, 1, 1
Azul 0, 0, 255#0000FFhsv(240, 100%, 100%)120, 255, 2550.6667, 1, 1
Morado 128, 0, 128#800080hsv(300, 100%, 50.2%)150, 255, 1280.8333, 1, 0.502
Magenta 255, 0, 255#FF00FFhsv(300, 100%, 100%)150, 255, 2550.8333, 1, 1
Blanco 255, 255, 255#FFFFFFhsv(0, 0%, 100%)0, 0, 2550, 0, 1
Gris 128, 128, 128#808080hsv(0, 0%, 50.2%)0, 0, 1280, 0, 0.502
Negro 0, 0, 0#000000hsv(0, 0%, 0%)0, 0, 00, 0, 0
Azul 59, 130, 246#3B82F6hsv(217.2, 76%, 96.5%)109, 194, 2460.6034, 0.7602, 0.9647
OpenCV guarda el tono como la mitad del ángulo para que quepa en un byte, por eso el azul aparece allí con 120 y no con 240. La saturación y el valor llegan hasta 255 en lugar de 100%[4].

¿Cómo cambia HSV al mezclar un color con blanco o con negro?

La tabla mezcla rgb(59, 130, 246) con blanco y con negro en pasos del 25%, y este convertidor calculó cada resultado. Se ve la idea de Smith: el blanco baja la saturación con un valor casi igual, y el negro baja el valor con una saturación casi igual[2].
MezclaValores RGBCódigo HEXHSV
75% de blanco206, 224, 253#CEE0FDhsv(217, 18.6%, 99.2%)
50% de blanco157, 193, 251#9DC1FBhsv(217, 37.5%, 98.4%)
25% de blanco108, 161, 248#6CA1F8hsv(217.3, 56.5%, 97.3%)
Color de partida59, 130, 246#3B82F6hsv(217.2, 76%, 96.5%)
25% de negro44, 98, 185#2C62B9hsv(217, 76.2%, 72.5%)
50% de negro30, 65, 123#1E417Bhsv(217.4, 75.6%, 48.2%)
75% de negro15, 33, 62#0F213Ehsv(217, 75.8%, 24.3%)
El tono se queda en 217° en las dos direcciones. Las diferencias de una fracción de grado vienen del redondeo de los canales RGB a números enteros. Por eso una versión más clara u oscura de un color para una paleta se planifica cómodamente en HSV: cambias un solo número.

¿Cómo usar el resultado en Photoshop, Figma, OpenCV y Python?

Cada una de estas herramientas escribe HSV en su propia escala. Para cada una indicamos la opción del selector Notación HSV que da los números en la misma forma.

  1. Photoshop

    En el Selector de color, escribe el resultado en los campos H, S y B. El tono es ahí un ángulo entre 0° y 360°, y la saturación y el brillo son porcentajes[3], así que elige 0–360°, 0–100%.

  2. Figma

    En la lista de modelos de color bajo los reguladores, elige HSB. Figma acepta ahí números enteros: el tono de 0 a 360, y la saturación y el brillo de 0 a 100[5]. Redondea el resultado de 0–360°, 0–100% a enteros.

  3. OpenCV

    Una imagen de 8 bits, tras cv2.cvtColor(imagen, cv2.COLOR_RGB2HSV), tiene el tono de 0 a 180, y la saturación y el valor de 0 a 255[4]. La opción OpenCV (0–179, 0–255) usa la misma aritmética de enteros. La comparamos con OpenCV.js 4.10 en los 16 777 216 colores RGB y todos los resultados coincidieron.

  4. Python y Unity

    colorsys.rgb_to_hsv recibe canales de 0 a 1 y devuelve el resultado en la misma escala[6]. Color.RGBToHSV de Unity también da H, S y V de 0 a 1[7]. A los dos les corresponde la opción 0–1.

¿Por qué OpenCV da un tono distinto al del convertidor?

Casi siempre porque OpenCV carga la imagen con los canales en orden azul, verde, rojo[8]. Convierte una imagen de cv2.imread con cv2.COLOR_BGR2HSV, no con COLOR_RGB2HSV. La confusión cambia solo el tono: los mismos tres bytes 59, 130, 246 leídos como BGR dan en OpenCV un tono de 11 en vez de 109, un naranja en lugar de un azul.


La segunda trampa es el rojo. Está en los dos extremos de la escala del tono, así que el rojo puro tiene en OpenCV el tono 0, mientras que rgb(225, 0, 15), un rojo con un toque de azul, ya tiene 178. El rango con el que eliges los píxeles rojos tiene que cubrir los dos extremos de la escala.

¿Qué formatos RGB acepta este convertidor?

El campo acepta y convierte cada uno de estos formatos, así que no tienes que corregir nada antes de pegar. La tabla muestra qué hace el convertidor con cada uno, y los resultados los calculó él mismo con la opción 0–360°, 0–100%.
Lo que escribesLo que muestra el convertidorCómo lo leemos
rgb(59, 130, 246)hsv(217.2, 76%, 96.5%)Tomamos la notación CSS con paréntesis tal como está.
59 130 246hsv(217.2, 76%, 96.5%)Bastan tres números separados por espacios, porque los paréntesis y las comas no hacen falta.
R: 59, G: 130, B: 246hsv(217.2, 76%, 96.5%)Quitamos las letras de los canales, como las escribe un manual de marca, y nos quedamos con los números.
rgb(23.1%, 51%, 96.5%)hsv(217.2, 76%, 96.5%)Los canales en porcentaje los pasamos nosotros a la escala de 0 a 255.
rgba(59, 130, 246, 0,5)hsva(217.2, 76%, 96.5%, 0.5)Leemos la opacidad con coma decimal igual que con punto y la pasamos al resultado como hsva.
0,2314 0,5098 0,9647hsv(217.2, 76%, 96.5%)Reconocemos por la coma los canales escritos como fracciones de 0 a 1 y los pasamos a la escala de 0 a 255.
(59, 130, 246)hsv(217.2, 76%, 96.5%)Leemos la tupla que imprime Python, con paréntesis incluidos.
[59, 130, 246]hsv(217.2, 76%, 96.5%)Leemos el array de NumPy que imprime Python, con corchetes incluidos.
background-color: rgb(59, 130, 246);hsv(217.2, 76%, 96.5%)Aceptamos una línea entera pegada de la hoja de estilos y sacamos de ella el color.
300, -20, 128hsv(329.9, 100%, 100%)Recortamos los valores fuera de rango igual que el navegador: 300 pasa a 255 y −20 pasa a 0.

Convertir RGB a otras unidades

RGB a HEXRGB a CMYKRGB a HSL

Fuentes

  1. Modelo de color HSV — Wikipedia
  2. Color Gamut Transform Pairs (SIGGRAPH 78) — Alvy Ray Smith
  3. Elegir colores en Adobe Photoshop — Adobe
  4. Color conversions: RGB ↔ HSV — OpenCV
  5. About color models — Figma Help Center
  6. colorsys — Conversions between color systems — Python Software Foundation
  7. Color.RGBToHSV — Unity
  8. Image file reading and writing: imread — OpenCV
  9. Changing Colorspaces — OpenCV

Todos los valores de las tablas se calcularon a partir de las definiciones de las unidades y se comprobaron aritméticamente antes de publicarlos. Los datos históricos y los nombres de las unidades locales proceden de las fuentes indicadas arriba.

Última revisión del contenido: · redactado y verificado por el equipo de Arteon

Preguntas frecuentes sobre convertir RGB a HSV

¿Cuándo conviene usar HSV en lugar de RGB?

Cuando eliges o ajustas un color por su tono, su saturación y su brillo. La documentación de OpenCV dice que un color se describe más fácilmente en HSV que en BGR[9], y por eso allí los objetos de un color concreto se buscan en HSV. Las hojas de estilos y los archivos de imagen suelen guardar el color en RGB o HEX, así que el color terminado vuelve al final a los canales.

¿En qué se diferencian HSV y HSL?

Los dos comparten el mismo tono, pero calculan los otros dos números de otra forma. En HSV el rojo puro tiene un valor del 100%, hsv(0, 100%, 100%), y en HSL una luminosidad del 50%, hsl(0, 100%, 50%). La versión HSL del mismo color te la da el convertidor de RGB a HSL.

¿Cómo convierto un código HEX a HSV?

Pasa el código a tres canales en el convertidor de HEX a RGB y pega aquí el resultado. El campo lo acepta con el paréntesis rgb() incluido.

¿El convertidor conserva la opacidad?

Sí. En grados y porcentaje la opacidad pasa a hsva(), y en la notación 0–1 se convierte en un cuarto número. La notación OpenCV la omite, porque una imagen HSV en OpenCV solo tiene tres canales.

¿Cómo paso de HSV a RGB?

Escribe el resultado en el convertidor de HSV a RGB. El botón Cambiar orden te lleva allí con el resultado actual.

Captura de pantalla de la herramienta gratuita de Arteon: Convierte valores RGB a HSV

Ayúdanos a mejorar nuestras herramientas

¿Tienes una idea para una función, has encontrado un fallo o quieres proponer otra herramienta? Escríbenos.