Tres descripciones de un color sRGB
Un color HEX de seis dígitos empaqueta los canales rojo, verde y azul en pares hexadecimales. RGB escribe esos tres canales como números decimales entre 0 y 255 en estas herramientas. HSL reorganiza el mismo color sRGB mediante tono, saturación y luminosidad. Ayuda a pensar en familias de colores, pero la luminosidad de HSL es un parámetro del modelo, no una medida directa del brillo percibido. HEX y RGB son dos notaciones para canales; HSL necesita un cálculo adicional. Los tres pueden especificar un color visual equivalente si el cálculo es coherente. Los convertidores MultiVerto aquí tratan colores opacos y los formatos de entrada mostrados, no toda la sintaxis CSS.
Un azul moderado paso a paso
Toma #336699. Sus pares 33, 66 y 99 en hexadecimal equivalen a 51, 102 y 153 en decimal. Por ello, HEX a RGB muestra rgb(51, 102, 153). Al convertir esos canales a HSL, la salida redondeada es hsl(210, 50%, 40%). El tono de 210 grados está en la zona azul; saturación y luminosidad describen las coordenadas de este color. Introduce #336699 abajo y pega el resultado RGB en la herramienta enlazada RGB a HSL. Invierte el recorrido con HSL a RGB y RGB a HEX. En este ejemplo, los valores sencillos permiten volver a los seis dígitos iniciales.
- HEX #336699 → canales 33 66 99
- RGB rgb(51, 102, 153)
- HSL hsl(210, 50%, 40%)
Ida, vuelta y precisión
Los pares HEX identifican exactamente valores enteros de los canales. Una representación HSL de canales RGB arbitrarios puede necesitar más cifras fraccionarias que una pantalla breve. MultiVerto redondea los componentes HSL visibles a dos decimales y el conversor inverso redondea RGB a enteros. En muchos casos la vuelta será visualmente próxima, pero un canal puede cambiar una unidad. Conserva el HEX o RGB original si necesitas un token exacto para un sistema de diseño. Un HEX abreviado de tres dígitos duplica cada uno: #369 se expande a #336699; no representa tres números decimales. Estos convertidores de ejemplo tampoco admiten transparencia alfa; para un color translúcido hace falta otro flujo.
Convertir no comprueba accesibilidad
El mismo color puede verse distinto sobre otros fondos o dispositivos. La luminosidad HSL no permite decidir si un texto blanco o negro cumple un requisito de contraste. El contraste depende de dos colores y de una fórmula de accesibilidad, no del porcentaje HSL de uno solo. Si el color se usa en texto, prueba el par real de primer plano y fondo conforme al criterio WCAG aplicable. Comprueba también estados de foco, interacción y desactivación, donde pueden aparecer otros colores. Estos conversores ayudan a mantener una notación entre CSS, tokens de diseño o una API; no seleccionan automáticamente una paleta accesible. No deduzcas legibilidad de una única salida.
Flujo de trabajo para tokens
Elige un token principal, como #336699, y registra dónde se utiliza. Conviértelo a RGB si un sistema pide canales, o a HSL si vas a modificar tono y saturación con intención. Después del cambio HSL, convierte el nuevo valor a RGB o HEX y guárdalo como otro token en lugar de sobrescribir silenciosamente el primero. Compara muestras renderizadas en la interfaz real y comprueba el contraste con los colores vecinos. Deja fuera de esta comparación simple los colores alfa y de gama amplia salvo que el destino los admita explícitamente. Un token de origen claro y variantes probadas facilitan el mantenimiento.