Guía de Colores HSB y RGB: Cómo Adivinar Cualquier Color

RGB: Cómo las Pantallas Crean Todos los Colores

Un píxel de pantalla son tres luces diminutas: roja, verde y azul. Cada una va de 0 (apagada) a 255 (máxima potencia), lo que da 256 × 256 × 256 = más de 16,7 millones de colores. La mezcla de luz es aditiva: sumar más luz vuelve el color más claro, y las tres al máximo forman el blanco.

Por eso rojo + verde = amarillo en una pantalla. La pintura hace lo contrario: los pigmentos absorben luz, así que mezclar pinturas oscurece los colores. Si quieres aprender a mezclar como con pintura, con rojo, amarillo y azul, lee la guía de mezcla de colores del juego Color Match.

Los Códigos de Color Hex Explicados

Un código hex como #FF8000 es solo los tres números RGB escritos en base 16: dos dígitos para el rojo (FF = 255), dos para el verde (80 = 128) y dos para el azul (00 = 0). Así que #FF8000 es rojo al máximo, mitad de verde y nada de azul: naranja.

HSB: Tono, Saturación y Brillo

El RGB es como la pantalla guarda el color, pero nadie piensa en “58% de verde”. El HSB (también llamado HSV) describe los mismos colores de pantalla con tres preguntas que nos hacemos de forma natural: ¿qué color es?, ¿qué tan vivo es? y ¿qué tan claro es? El juego Color Guess de Toon Tone te da justo esos tres controles.

Tono / Hue (0-360°): qué color

El tono es la posición en la rueda de colores. Da la vuelta completa, así que 0° y 360° son ambos rojo.

Saturación / Saturation (0-100%): qué tan vivo

0% es un gris neutro, 100% es la versión más pura del tono. Los pasteles y los tonos de piel son bajos; los neón y los colores intensos de las caricaturas son altos.

Brillo / Brightness (0-100%): qué tan claro

0% siempre es negro. 100% es la versión más clara del color con esa saturación (con 0% de saturación, 100% de brillo es blanco).

HSB vs RGB vs HSL

• HSB y RGB describen los mismos colores; solo cambian los controles. Cada valor HSB se convierte en un único valor RGB y un código hex (mira la tabla de arriba).
• En RGB, hacer un naranja “un poco más oscuro” implica cambiar los tres números. En HSB solo bajas el brillo, y por eso HSB es más fácil para adivinar.
• El HSL es un primo cercano con la misma rueda de tonos, pero su tercer valor es la luminosidad: el rojo puro es HSB(0°, 100%, 100%) pero HSL(0°, 100%, 50%), y en HSL 100% de luminosidad siempre es blanco. No copies números HSL en los controles HSB.

Cómo Adivinar Cualquier Color, Paso a Paso

En Color Guess ves un personaje de caricatura y debes indicar, de memoria, el color de una parte, como la camisa o el cabello. En cada ronda los controles empiezan en H 180°, S 50%, B 50%, un cian medio, así que siempre tienes que mover los tres. Sigue este orden:

1. 1

   Primero identifica la familia del tono

   Antes de tocar un control, di en voz alta la familia del color: rojo, naranja, amarillo, verde, cian, azul, morado o rosa. Luego lleva el Tono a esa parte de la rueda. El tono vale la mitad de tu puntuación, así que este paso es el más importante.

2. 2

   Afina el tono

   Decide hacia qué vecino se inclina el color. Un amarillo cálido está cerca de 45-55°, un amarillo limón cerca de 60°; un azul cielo cerca de 200°, un azul rey cerca de 225-240°. Mira cómo cambia la vista previa del personaje mientras lo mueves.

3. 3

   Ajusta la saturación

   Pregúntate qué tan vivo es. La ropa llamativa de las caricaturas suele estar entre 75-100%; la piel, los pasteles y el pelaje grisáceo están mucho más abajo. Si el color se ve apagado o grisáceo, baja la saturación, no el brillo.

4. 4

   Ajusta el brillo

   Pregúntate qué tan claro u oscuro es. La mayoría de los colores de caricatura son claros, así que empieza alto y solo baja para colores oscuros como azul marino, café o verde oscuro.

5. 5

   Compara y envía

   Mira la vista previa en vivo del personaje completo, ajusta el control que se vea más desviado y pulsa el botón ✓ para enviar. En las dificultades con tiempo, acierta primero el tono por si se acaba el reloj.

Cómo son los colores de los personajes

Entre los 65 colores que hay hoy en el juego, la mitad central tiene una saturación de entre 55% y 91% (mediana de 78%) y un brillo de entre 72% y 96% (mediana de 88%). El 78% de los objetivos tiene un brillo de 70% o más. En otras palabras: los colores de caricatura suelen ser claros, así que en la duda empieza con el brillo alto y concéntrate en el tono y la saturación.

Colores Difíciles: Café, Rosa, Azul Marino, Tonos de Piel y Pasteles

Algunos nombres de colores cotidianos ni siquiera están en la rueda de tonos. Son un tono con una saturación y un brillo específicos.

Cómo Funciona la Puntuación de Color Guess

• Cada ronda vale de 0 a 10 puntos comparando tus valores de H, S y B con el objetivo.
• El tono vale 50%, la saturación 25% y el brillo 25%. El tono se mide alrededor de la rueda, así que 350° y 10° están a solo 20° de distancia.
• Cada parte usa una curva de raíz cuadrada: puntuación = 1 − √(error ÷ error máximo), donde el máximo es 180° para el tono y 100% para la saturación y el brillo. Los primeros grados o puntos porcentuales de error cuestan más, y fallar por poco es mucho mejor que fallar por mucho.
• Usar la pista muestra una franja de ±36° de tono y ±20% de saturación y brillo alrededor de la respuesta, y cuesta 1 punto (una respuesta perfecta con pista vale 9,0).
• Fácil no tiene reloj, Medio da 15 segundos y Difícil 5 segundos por ronda. Cuando se acaba el tiempo, se envía automáticamente la posición actual de los controles.
• Una partida tiene 5 rondas y tu puntuación final es el promedio.

Puntuaciones reales del código de puntuación del juego cuando solo un control está desviado:

Consejos para sacar más puntos

• Asegura la familia del tono antes que nada: un tono equivocado cuesta el doble que una saturación o un brillo equivocados.
• Guarda la pista para los colores que de verdad no logras ubicar. Limita el tono a una franja de 72°, pero una buena respuesta sin ayuda suele valer más que la penalización de 1 punto.
• En Difícil (5 segundos), mueve primero el tono, luego sube el brillo y envía. Los detalles valen menos que un tono más o menos correcto.
• Entrena el ojo entre rondas con Color Match, donde el objetivo se queda en pantalla.

Preguntas Frecuentes sobre Adivinar Colores