🎨 Selector de Color
Seleccione un color y obtenga instantáneamente valores HEX, RGB y HSL.
¿Qué es esta herramienta?
Un selector de color es una utilidad que le permite elegir un color de una paleta visual y ver al instante sus valores en los tres formatos de color más comunes usados en la web: HEX, RGB y HSL. Los diseñadores, desarrolladores y artistas se mueven constantemente entre estas representaciones porque diferentes herramientas y contextos esperan diferentes formatos. Las hojas de estilo CSS a menudo aceptan cualquiera de los tres, pero el software de diseño como Figma o Photoshop puede mostrar HEX por defecto, mientras que las bibliotecas de visualización de datos frecuentemente piden tuplas RGB o HSL. Esta herramienta cierra esas brechas mostrando los tres valores lado a lado y manteniéndolos sincronizados mientras ajusta el color, para que nunca tenga que buscar un conversor aparte. La entrada de color integrada abre el selector nativo de su sistema operativo, que soporta una selección fina en todo el espectro, mientras que el campo HEX manual le permite pegar un código existente para inspeccionarlo o convertirlo. La muestra de vista previa grande muestra el color exacto en un tamaño generoso para que pueda juzgarlo con precisión, y los botones de copia con un clic envían cada valor a su portapapeles listo para pegar en una hoja de estilo, una biblioteca de componentes o un archivo de diseño. Como las conversiones se realizan con matemáticas estándar de espacio de color, los valores son precisos y consistentes entre navegadores. Ya sea que esté construyendo una paleta de marca, eligiendo un color de acento para un botón o traduciendo el código HEX de un diseñador al HSL que su biblioteca de gráficos necesita, esta herramienta le da el valor correcto en el formato correcto sin fricción.Cómo funciona
La herramienta mantiene una única fuente de verdad para el color actual y lo convierte entre formatos siempre que la fuente cambia. Cuando usa la entrada de color visual, el navegador devuelve una cadena HEX como #3b82f6, que la herramienta lee y divide en sus componentes rojo, verde y azul analizando los pares hexadecimales. Esos tres valores, cada uno entre cero y doscientos cincuenta y cinco, forman la tupla RGB que se muestra. Para producir la representación HSL, la herramienta normaliza los canales RGB a un rango de cero a uno y encuentra los valores máximo y mínimo para calcular la luminosidad, luego deriva la saturación de la dispersión entre ellos, y finalmente calcula el tono como un ángulo alrededor de la rueda de colores basándose en qué canal es el mayor. Cuando escribe un código HEX manualmente, la herramienta valida la entrada, acepta códigos con o sin el símbolo # inicial, y expande la abreviatura de tres dígitos, luego ejecuta el mismo proceso de conversión para que las salidas RGB y HSL se actualicen al instante. La muestra de vista previa del color se actualiza estableciendo su fondo al valor HEX actual, dándole una representación precisa y a tamaño completo del color elegido. Cada conversión ocurre localmente en JavaScript, por lo que la herramienta es rápida, privada y funciona sin conexión, sin llamadas de red necesarias para ninguno de los cálculos.Cómo usar
Seleccionar y convertir un color toma solo un momento.
- Haga clic en el cuadro de color para abrir el selector de color nativo de su sistema y elegir cualquier color visualmente. Alternativamente, escriba un código HEX de seis dígitos en el campo de entrada HEX, con o sin el símbolo # inicial.
- A medida que cambia el color, la muestra de vista previa se actualiza instantáneamente y los valores HEX, RGB y HSL se recalculan en tiempo real.
- Revise los tres valores mostrados debajo de la vista previa. Cada uno se muestra en el formato exacto listo para pegar en CSS o una herramienta de diseño.
- Haga clic en el botón Copiar junto al formato que necesita para enviar ese valor a su portapapeles, luego péguelo en su hoja de estilo, componente o documento. Puede cambiar entre colores tantas veces como quiera, y cada valor permanece perfectamente sincronizado.
Preguntas Frecuentes
Preguntas Frecuentes
¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX expresa un color como una cadena hexadecimal de seis dígitos como #FF5733, donde cada par de dígitos representa los canales rojo, verde y azul. RGB enumera esos mismos tres valores de canal como números decimales de 0 a 255, por ejemplo rgb(255, 87, 51). HSL describe un color por tono, saturación y luminosidad, lo que a menudo se siente más intuitivo porque puede oscurecer o saturar un color ajustando un solo valor.
¿Puedo introducir un código HEX manualmente?
Sí. Escriba cualquier código HEX válido de seis dígitos, con o sin el símbolo # inicial, en el campo HEX y la herramienta actualiza instantáneamente la vista previa y muestra los valores RGB y HSL correspondientes. La abreviatura de tres dígitos como #3b5 también se acepta y se expande a su forma de seis dígitos.
¿Qué formato debo usar en mi CSS?
Los tres formatos son válidos en CSS moderno, por lo que la elección es principalmente una cuestión de conveniencia. HEX es compacto y ampliamente usado en hojas de estilo. RGB es claro cuando necesita ajustar la opacidad con la notación rgba(). HSL es especialmente útil cuando quiere crear tintes y sombras del mismo tono, porque puede cambiar solo la luminosidad manteniendo el tono y la saturación fijos.
¿Son precisos los valores convertidos?
Sí. Las conversiones usan matemáticas estándar de espacio de color, por lo que los valores HEX, RGB y HSL son precisos y consistentes entre navegadores. Como estos formatos describen todos el mismo espacio de color sRGB, convertir entre ellos nunca pierde información.
Consejos y Recomendaciones
Al construir una paleta de colores, comience desde un solo color de marca y use la lectura HSL para generar variantes armónicas ajustando la luminosidad y la saturación mientras mantiene el tono constante, lo que produce tintes y sombras que parecen pertenecer juntos. Para interfaces accesibles, siempre verifique la relación de contraste entre su color elegido y el texto o fondo sobre el que se sitúa, porque un color que luce impactante aún puede fallar los estándares de legibilidad. Recuerde que la luminosidad HSL del cincuenta por ciento no es lo mismo que el brillo perceptual, por lo que amarillos muy brillantes y azules muy oscuros en la misma luminosidad HSL pueden lucir bastante diferentes. Si está entregando colores a un desarrollador, proporcione el código HEX como valor canónico e incluya los equivalentes RGB y HSL como referencias. Finalmente, almacene su paleta final en un archivo de tokens compartido para que cada miembro del equipo referencie los mismos valores, lo que previene la deriva sutil que ocurre cuando los colores se copian a ojo de una herramienta a otra.