Selector de color online

¿Qué es un selector de color?

Un selector de color es una herramienta visual para elegir un tono concreto y obtener su código: hexadecimal, RGB o HSL. En vez de adivinar valores o probar a ciegas en un editor de CSS, ves el color en pantalla, lo ajustas moviendo el punto de saturación y brillo, y te llevas el código exacto que ese color necesita.

Este selector de color funciona entero en tu navegador: nada se sube a ningún servidor. Mueve el cuadrado de saturación y brillo, el deslizador de tono o el de opacidad, y los tres códigos —hex, rgb() y hsl()— se actualizan al instante, listos para pegar donde los necesites.

Cómo usarlo

1. Elige el tono y ajusta el color. Mueve el deslizador de arcoíris para fijar el tono y luego arrastra dentro del cuadrado para decidir cuán vivo y cuán claro es. Si ya tienes un código en mente, pégalo directamente en el campo hex y todo el selector saltará a ese color.
2. Ajusta la opacidad si la necesitas. Desliza el control de 0 a 100 % y compruébalo en la muestra sobre el tablero de cuadros, que deja ver la transparencia real del color.
3. Copia el código que te haga falta. Haz clic en hex, rgb() o hsl() para copiarlo tal cual (verás un check de confirmación), o usa el cuentagotas para tomar el color de cualquier punto de la pantalla en Chrome, Edge u Opera.

Para qué sirven los códigos de color

El código hexadecimal es el formato que más se usa en CSS y HTML: cualquier propiedad de color de una web lo acepta directamente, y es el que copian y pegan diseñadores y desarrolladores por costumbre. RGB resulta más cómodo cuando necesitas ajustar canales por separado o trabajar con opacidad en formato rgba(), y HSL es el favorito para retocar un color a ojo, porque separar el tono de la saturación y la luminosidad hace mucho más intuitivo aclarar, oscurecer o desaturar sin perder el matiz original.

Fuera del código también hacen falta estos valores todo el tiempo: para igualar el color de una marca en Figma, Photoshop o Canva, para documentar la paleta oficial de un proyecto, o para meter un color exacto en una hoja de cálculo o un documento cuando alguien pide “el mismo azul de siempre”. Tener el hex a mano evita el vaivén de capturas de pantalla y cuentagotas improvisados.

Limitaciones honestas

El código hex que te da esta herramienta es exacto, pero el color que ves en pantalla no lo es tanto: el mismo valor se percibe distinto según la gama y la calibración de cada pantalla, y si ese color termina impreso, la imprenta en CMYK no reproduce todos los tonos que sí muestra una pantalla. Además, el cuadrado trabaja internamente en HSV (tono, saturación, brillo), mientras que CSS usa HSL (tono, saturación, luminosidad); son dos formas distintas de describir el mismo color, así que la lectura HSL no siempre coincide punto por punto con la posición exacta dentro del cuadrado.

El cuentagotas depende de la API EyeDropper del navegador, que hoy solo está disponible en Chromium (Chrome, Edge, Opera); en Safari y Firefox el botón directamente no aparece, y cuando funciona, toma el color en espacio sRGB. Los valores de HSL y RGB se redondean a números enteros para que se lean con claridad, así que convertir de hex a HSL y volver a hex puede dejarte a una unidad de diferencia; el campo hex es siempre el valor sin redondear. Por último, el color con nombre más cercano se calcula por distancia numérica entre valores RGB, no por percepción humana: es el nombre matemáticamente más próximo, no necesariamente el que tu ojo elegiría.

¿Por qué es gratis?

Porque todo el cálculo ocurre en tu navegador: no hay servidor procesando nada, así que no hay coste que trasladarte. No pedimos cuenta, no ponemos marca de agua en los códigos que copias y no existe una versión de pago con más funciones escondidas detrás de un muro: el selector completo está aquí, gratis, todas las veces que lo necesites.