Mesa de color
Selector Muestra
Un entorno para ajustar un color, copiar HEX/RGB/CMYK aproximado y saltar a RAL, NCS o impresion con el dato aplicado.
Control visual
Ajusta el color y conserva una salida operativa
La rueda define el matiz, la barra vertical la saturación y el deslizador inferior la luminosidad. La mesa mantiene HEX, RGB, CMYK aproximado y rutas a RAL/NCS en el mismo flujo.
Canales HSL
Ajuste fino del color base
Hue y saturación siguen la rueda. Luminosidad comparte el mismo estado con el deslizador para evitar desajustes.
Salida RGB
Canales operativos para web y apps
Si ajustas RGB directamente, el selector vuelve a calcular HSL y reposiciona rueda, saturación y vista previa al instante.
Color activo
#E94B3C
Copia el valor operativo, pega un HEX directo o continua hacia RAL, NCS y CMYK sin reconstruir el color en otra pagina.
#E94B3C RGB(233, 75, 60) HSL(7°, 80%, 57%)
#
Siguiente accion
Lleva este color a estandar fisico o impresion
El resultado usa distancia visual sobre referencias digitales cargadas. Sirve para elegir ruta y candidatos; la aprobacion final requiere muestra real.
Cómo usar la mesa de color
Este panel empieza con un color digital y lo convierte en una mesa de trabajo: ajuste visual, valores copiables y rutas a estandar fisico o impresion.
1Rueda de Matiz (Hue): Haz clic o arrastra el indicador por la rueda circular para cambiar el tono base en 360 grados.
2Control de Intensidad: Utiliza la barra vertical para modificar la Saturación de color y el deslizador horizontal para la Luminosidad.
3Continua con la cadena correcta: usa HEX a RAL, RGB a NCS, RGB a RAL o CMYK aproximado segun si el siguiente paso es proveedor, obra o impresion.
HSL versus RGB en el Diseño UI
Aunque las pantallas renderizan en RGB (Rojo, Verde, Azul), el sistema HSL (Tono, Saturación, Luminosidad) es mucho más intuitivo para la mente humana cuando buscamos variaciones de un mismo color.
| Modificar HSL | Efecto visual | Caso de Uso |
|---|---|---|
| Cambiar solo H | Mantiene la intensidad pero cambia la familia (ej. pasa de Rojo a Azul vivo) | Descubrir tonos complementarios para un diseño. |
| Reducir S | El color se apaga hacia el gris. Pierde fuerza. | Crear colores de estado inactivo, deshabilitado o bordes suaves. |
| Agitar L | Color más blanco (L alto) o más oscuro (L bajo) | Crear jerarquías de fondo (Dark mode) o texto sin cambiar el tinte del botón. |
Preguntas Frecuentes
¿Para qué sirve un selector de color avanzado?
A diferencia de los selectores básicos, este te permite ajustar con precisión micrométrica los valores de Matiz (Hue), Saturación y Luminosidad interactuando tanto visualmente como numéricamente.
¿Por qué la rueda cambia solo el Matiz (Hue)?
La rueda circular de color representa el espectro cromático de 360°, que es el canal "H" (Hue) en el modelo HSL. El centro representaría una pérdida de saturación, pero para mayor precisión, aquí controlas saturación y luminosidad usando deslizadores dedicados paralelos a la rueda.
¿Los valores HEX y RGB se calculan en base a HSL?
Sí. Esta herramienta utiliza el modelo HSL como base computacional. Cada cambio en un control genera un recálculo absoluto sincronizando HSL, RGB y HEX en tiempo real.
¿La mesa de color sustituye una muestra fisica?
No. La mesa sirve para preparar rutas hacia RAL, NCS y CMYK aproximado desde un color digital. Si el color final se compra, pinta o imprime, valida con muestra fisica y perfil real.