CodeKitHub¿Qué es esta herramienta?
Un selector de color convierte una elección visual —este tono de azul, ese píxel concreto de un logotipo— en los códigos numéricos que entiende el software. Un mismo color tiene varias notaciones equivalentes: el formato HEX (#3b82f6) predomina en CSS y en las entregas de diseño; el RGB (59, 130, 246) se ajusta a la forma en que las pantallas y el código representan el color, y HSL (217°, 91 %, 60 %) describe el tono, la saturación y la luminosidad de una forma que los humanos pueden comprender.
La segunda parte de la herramienta es un selector de color de imagen. Sube una captura de pantalla, un logotipo o una foto y haz clic en cualquier punto para obtener una muestra del color que hay debajo del cursor: la forma habitual de responder a la pregunta «¿qué color es este exactamente?». Si el navegador es compatible con la API EyeDropper, se utiliza la lupa nativa con función de ampliación; en otros navegadores, la herramienta lee el valor del píxel a partir de una copia de la imagen en un lienzo. En ambos casos, el procesamiento es local: la imagen nunca se sube a ningún servidor.
¿Por qué utilizarlo?
- Tres formatos a la vez: cada color seleccionado se muestra simultáneamente en formato HEX, RGB y HSL, cada uno con un botón para copiarlo con un solo clic, sin necesidad de realizar ningún paso de conversión por separado.
- Selecciona una imagen: sube cualquier foto y haz clic para obtener una muestra del color exacto del píxel; es ideal para extraer los colores de una marca a partir de un logotipo o para encontrar un color que coincida con el de una captura de pantalla.
- Utiliza el «EyeDropper» nativo del navegador con lupa cuando está disponible y, en el resto de casos, recurre a la lectura precisa de píxeles del lienzo.
- Una muestra de vista previa en tiempo real te permite ver el color actual de un vistazo, para que puedas comprobar la selección antes de copiarlo.
- Gratis, instantáneo y totalmente local: los colores se calculan y las imágenes se leen en tu navegador; no se sube, almacena ni registra nada.
Cómo utilizarlo
- Elige un color con el campo de color o pega o edita un valor directamente.
- Para seleccionar un color de una imagen, sube una imagen y haz clic en el punto cuyo color quieras elegir.
- Lee los valores HEX, RGB y HSL, que se muestran junto con una muestra de vista previa en tiempo real.
- Haz clic en el botón «Copiar» situado junto al formato que necesites: HEX para CSS, RGB o HSL para el código.
Ejemplo
Entrada
Clicking the blue area of an uploaded logoResultado
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Las tres líneas describen el mismo color. Utiliza el formato HEX en las hojas de estilo y las herramientas de diseño, el RGB cuando el código requiera valores de canal, y el HSL cuando quieras obtener variantes más claras u oscuras cambiando únicamente el último número.
¿Qué formato de color se debe utilizar para cada trabajo?
El CSS moderno admite los tres formatos en cualquier lugar donde se permita especificar un color, por lo que la elección depende del flujo de trabajo, no de la compatibilidad. Los equipos suelen estandarizar el formato HEX en los tokens de diseño y, a continuación, utilizan HSL al explorar variaciones: cambian la luminosidad entre 10 y 15 puntos para conseguir un estado de desplazamiento del cursor funcional sin alterar el matiz.
| Formato | Ejemplo | Ideal para |
|---|---|---|
| HEX | #3b82f6 | CSS, herramientas de diseño, compartir colores en el chat y especificaciones |
| RGB | rgb(59, 130, 246) | Código que manipula canales, dibujo en lienzo y transparencia con rgba() |
| HSL | hsl(217, 91 %, 60 %) | Crear variantes más claras, más oscuras y para el efecto de pasar el cursor, y crear paletas de colores |
Del color elegido al CSS final
Seleccionar un color suele ser el primer paso a la hora de diseñar. Si necesitas el mismo color en otros formatos —CMYK para impresión o un valor OKLCH para CSS de amplia gama de colores—, el «Color Converter» toma el relevo cuando este selector termina.
El color elegido suele traducirse directamente en un efecto visual: el «Box Shadow Generator» admite un valor HEX para crear sombras realistas, y las tarjetas redondeadas creadas con el «Border Radius Generator» completan el aspecto.
→ Convertidor de colores · Generador de Box Shadow · Generador de Border Radius
Preguntas frecuentes
¿Cuál es la diferencia entre HEX, RGB y HSL?
Son tres formas de expresar el mismo modelo de color. El formato HEX agrupa los canales de rojo, verde y azul en seis dígitos hexadecimales (#3b82f6) y es el más habitual en CSS y en las herramientas de diseño. RGB enumera esos mismos tres canales como números decimales del 0 al 255. HSL vuelve a expresar el color como tono (0–360°), saturación y luminosidad, lo cual resulta mucho más intuitivo cuando se busca «el mismo color, pero más claro». La conversión entre ellas nunca altera el color.
¿Cómo funciona la selección de un color de una imagen?
La imagen subida se dibuja en un lienzo invisible en tu navegador. Al hacer clic, la herramienta lee los valores de rojo, verde y azul del píxel situado en esa posición exacta y los convierte a HEX, RGB y HSL. En los navegadores compatibles con la API EyeDropper (Chrome y Edge en ordenador), se abre una lupa nativa que te permite seleccionar con precisión de píxel cualquier punto de la pantalla.
¿Se ha subido mi imagen a algún sitio?
No. La imagen se abre directamente en tu navegador y se lee localmente desde un «canvas»; en ningún momento se transmiten ni se almacenan archivos ni datos de color. Puedes cargar la página, quedarte sin conexión a Internet, y tanto el selector como el cuentagotas de la imagen seguirán funcionando, lo que lo hace seguro para diseños aún no publicados y capturas de pantalla internas.
¿Por qué el color seleccionado no coincide exactamente con lo que veo en la pantalla?
Hay dos razones habituales. Suavizado: los píxeles de los bordes del texto y las formas se difuminan con el fondo, por lo que al hacer clic un píxel más allá se obtiene un color intermedio; en su lugar, toma una muestra del centro de un área de color sólido. Gestión del color: los archivos JPG/PNG con perfiles de color poco habituales pueden mostrarse de forma ligeramente diferente en distintas pantallas; la herramienta muestra el valor del píxel tal y como está almacenado en el archivo, que es el valor que necesitas para tu trabajo de diseño.
¿Qué formato debo copiar para el CSS?
HEX es la opción predeterminada más segura: todos los navegadores y herramientas lo aceptan. Utiliza HSL cuando tengas previsto crear variantes para el efecto «hover» o el modo oscuro, ya que al ajustar únicamente el componente de luminosidad se mantienen constantes el tono y la saturación. El formato RGB resulta útil sobre todo cuando el código genera colores a partir de canales numéricos o al añadir transparencia, ya que rgba(59, 130, 246, 0,5) se lee con mayor claridad que un código HEX de ocho dígitos.