El matiz elige la familia
Recorre rojo, amarillo, verde, cian, azul y magenta alrededor de la rueda. Con saturación cero, el matiz apenas cambia la muestra.
Herramienta de color gratuita
Selector de color HSB y conversor HEX RGB
Elige un color con controles de matiz, saturación y brillo, o introduce un valor HEX o RGB exacto. Todos los formatos permanecen sincronizados para explorar y copiar el código necesario.
Actualizado el 18 de julio de 2026
selector de color HSB
¿Qué hace este selector de color HSB?
Este selector de color HSB permite editar el matiz de 0 a 360 grados y la saturación y el brillo de 0 a 100 por ciento. Convierte el mismo color visible a HEX de seis dígitos y RGB, mantiene sincronizadas todas las entradas y ofrece resultados listos para copiar. Úsalo para ajustar una paleta de estilo animado, revisar un token de diseño, entender qué canal cambia un tono o preparar dos colores antes de compararlos con la calculadora Delta E de Toon Tone.
HSB · HEX · RGB
Elige y convierte un color
Mueve un control, escribe un canal, elige un ajuste o introduce un HEX. La muestra y todos los formatos se actualizan desde el mismo color.
Vista previa en directo#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
Variable CSS
--toon-color: #2FB8D8;Ajustes de color estilo animado
Son ejemplos editables de Toon Tone, no especificaciones oficiales de franquicias.
Lee los tres canales HSB
HSB separa la decisión en familia, intensidad y nivel de luz. Cambia un canal cada vez para entender por qué un color se siente distinto.
La saturación controla la intensidad
Bajarla acerca el color al gris; subirla vuelve más vivo el matiz. No equivale simplemente a aclarar u oscurecer.
El brillo fija el techo de luz
Cero es negro. Al subirlo aparece el matiz elegido, aunque la luminosidad percibida depende también de la familia y de la pantalla.
Elige el control adecuado para cada tarea
Los formatos describen el mismo color desde perspectivas distintas. Empieza por la decisión real y utiliza el canal o la medida que la responda.
| Tarea | Primer control | Comprobación siguiente |
|---|---|---|
| Elegir una familia como rojo, verde o azul | Matiz | Saturación y después brillo |
| Volver un tono vivo o apagado | Saturación | Mantener estable el matiz |
| Aclarar u oscurecer | Brillo | Revisar contraste en el contexto real |
| Copiar un token web o de diseño | HEX o RGB | Registrar fuente y perfil de color |
| Medir la diferencia entre dos colores | Calculadora Delta E | Mirar muestras y diferencias HSB |
Cómo organiza HSB una decisión de color
HSB significa matiz, saturación y brillo. El matiz marca la posición en una rueda circular; la saturación indica cuánto se aleja el color de un gris neutro; y el brillo controla el nivel máximo de los canales que lo muestran. La separación se parece a una edición natural: primero eliges la familia general, después decides su intensidad y por último ajustas lo claro u oscuro del resultado. Los tres números describen juntos un color digital y ninguno funciona por sí solo como puntuación de calidad.
El modelo también se llama HSV, donde valor sustituye a brillo. En las herramientas digitales habituales, HSB y HSV suelen referirse a la misma operación matemática. HSL es diferente: su eje de luminosidad coloca los matices puros en un punto medio y mezcla hacia blanco por encima, de modo que un porcentaje HSL no debe pegarse en HSB como si fuera idéntico. Esta página mantiene visibles HEX y RGB para detectar mejor qué modelo y escala usa cada aplicación.
Flujo fiable de matiz, saturación y brillo
Empieza por el matiz mientras saturación y brillo sean suficientes para reconocer la familia. Sitúate en rojo, naranja, amarillo, verde, cian, azul o morado antes de perseguir diferencias pequeñas. Luego baja la saturación hasta conseguir la suavidad adecuada. Muchos colores animados recordados son menos intensos de lo que su nombre sugiere, especialmente cuando influyen sombras, compresión o colores vecinos. Ajusta el brillo al final para no confundir una versión oscura del matiz correcto con otra familia cromática.
En un trabajo preciso, cambia un solo canal y anota el valor anterior. Mover los tres a la vez puede producir un resultado agradable sin mostrar qué corrección resolvió el problema. Los campos HEX y RGB sincronizados sirven como entrega estable después de la exploración visual. Si ya existe un token aprobado, escríbelo directamente en lugar de reconstruirlo con controles. La herramienta conecta exploración y valor exacto; no debería sustituir una fuente conocida por una aproximación nueva.
Qué ocurre al convertir HEX, RGB y HSB
HEX y RGB codifican cantidades de rojo, verde y azul para una pantalla. Un HEX de seis dígitos guarda dos cifras hexadecimales por canal, mientras RGB suele expresar los mismos canales con valores decimales de 0 a 255. El selector convierte esas cantidades a HSB, permite editar sus coordenadas y devuelve el resultado a un color RGB visible. Un HEX abreviado de tres dígitos se expande antes de convertir. Puede aparecer una diferencia mínima de ida y vuelta cuando un porcentaje continuo se redondea al entero mostrado.
La conversión no descubre un nombre oficial, una especificación de marca, una fórmula de pintura ni una muestra física. Tampoco calibra el monitor, interpreta automáticamente el perfil de una imagen ni garantiza la misma apariencia en otro dispositivo. Conserva el token original cuando importe la reproducción exacta y registra si procede de un sistema de diseño, arte fuente o captura. Una imagen comprimida puede contener píxeles alterados: el cálculo será correcto para el valor introducido aunque ese valor no sea el color autorizado que querías obtener.
Uso del selector en paletas animadas e ilustración
La animación suele trabajar con familias claras, pero la identidad memorable de un tono depende de algo más que una etiqueta básica. Un amarillo puede inclinarse hacia verde o naranja, un azul ser pálido o muy intenso y un rojo acercarse a coral, naranja o magenta. Usa HSB para construir una familia pequeña de tonos relacionados sin perder el punto inicial. Copia el HEX en tus notas y modifica saturación o brillo de forma deliberada para crear luces, sombras, acentos de interfaz o muestras comparables.
Los ajustes de esta página son ejemplos genéricos de Toon Tone. Sirven para aprender los controles, no como códigos oficiales de un estudio, personaje, franquicia, impresora o producto. Si un proyecto tiene una paleta aprobada, sigue esa fuente. Al estudiar una imagen, conserva visible el área muestreada y las condiciones. Un acento pequeño, un fotograma sombreado y una gran superficie plana pueden producir colores representativos diferentes aunque una persona los describa con la misma palabra cotidiana.
Pantallas, contraste y diferencia perceptual
La muestra la genera el navegador y su apariencia depende de calibración, brillo de pantalla, gestión de color, ángulo, luz ambiente y colores cercanos. El brillo HSB no mide brillo percibido ni representa una relación de contraste accesible. Un amarillo y un azul con brillo HSB al cien por ciento pueden verse muy distintos en luminosidad. Comprueba texto, iconos, focos y controles con el método de contraste adecuado usando la combinación real de primer plano y fondo.
Para comparar dos colores guardados utiliza la calculadora Delta E como medida separada y mira las muestras junto al número. Delta E modela diferencia perceptual general; los canales HSB ofrecen direcciones intuitivas de edición. Ninguno crea por sí solo un umbral universal para marca, accesibilidad, impresión o fabricación. La decisión final debe seguir la especificación pertinente, un flujo calibrado y las condiciones reales de salida, no un único valor cómodo de una herramienta general del navegador.
Sigue trabajando con este color
Preguntas sobre el selector de color HSB
¿HSB y HSV son lo mismo?
Normalmente sí. HSB llama brillo al tercer canal y HSV lo llama valor. Comprueba siempre los rangos documentados antes de trasladar cifras entre aplicaciones.
¿HSB es igual que HSL?
No. Ambos usan matiz y saturación, pero HSL calcula luminosidad de otra forma. Los mismos porcentajes pueden producir colores diferentes cerca de blanco y negro.
¿Puedo convertir un HEX de tres dígitos?
Sí. Un valor como #0af se expande a #00AAFF antes de convertir. También se aceptan seis dígitos con o sin almohadilla.
¿La herramienta sube o guarda mi color?
No requiere cuenta ni subida al servidor. Funciona en el navegador y los botones solo copian el texto mostrado cuando el portapapeles está disponible.
¿El brillo HSB demuestra contraste accesible?
No. El contraste accesible compara luminancia relativa entre primer plano y fondo. El brillo HSB por sí solo no es un cálculo WCAG.
¿Por qué otro selector muestra cifras distintas?
Puede redondear de otra forma, usar HSL, aplicar gestión de color o mostrar más decimales. Compara el HEX o RGB final y el modelo documentado.