Selector de color online
Elige un color a ojo y consigue sus códigos HEX, RGB y HSL en un solo lugar.
Este selector de color online te permite escoger un color visualmente, arrastrando por un campo de saturación y un deslizador de tono, y te da su código en todos los formatos habituales a la vez: HEX para CSS, RGB para scripts y trabajo con canvas, y HSL cuando quieres razonar en términos de luminosidad y saturación.
Es la forma más rápida de pasar de 'más o menos este azul' a un valor exacto que puedas usar. Los diseñadores lo usan para afinar un tono antes de fijarlo en una paleta; los desarrolladores, para sacar un color de acento rápido sin abrir una app de diseño; y cualquiera que escriba HTML o prepare una presentación puede encontrar un código sin adivinar.
El selector se ejecuta por completo en tu navegador. No hay nada que instalar ni cuenta que crear, y tus elecciones no se envían a ninguna parte. Pega un código HEX existente para cargar un color y ajustarlo desde ahí, muy útil para crear variantes más claras u oscuras de un color de marca.
Cómo usar el selector de color
- Arrastra el deslizador de tono para elegir la familia de color base.
- Haz clic o arrastra dentro del área de sombras para fijar la saturación y el brillo.
- Afina editando directamente los valores HEX, RGB o HSL si necesitas un objetivo preciso.
- Copia el formato que necesites con su botón de copiar.
- Pega un código hex existente en la entrada en cualquier momento para partir de un color conocido.
Qué hace este selector de color
El selector te permite escoger un color a ojo, arrastrando por un campo de saturación y brillo y un deslizador de tono, y comunica ese color exacto en todos los formatos habituales a la vez: HEX, RGB y HSL. En lugar de adivinar los códigos, llegas al tono visualmente y copias la notación que necesite tu proyecto.
Funciona en ambos sentidos. Pega un código HEX existente y el selector salta a ese color para que ajustes desde un punto de partida conocido, que es la forma rápida de construir una tinta más clara o un tono más oscuro de un color de marca sin salir de la página. Todo se ejecuta en tu navegador, sin nada que instalar.
HEX, RGB o HSL: ¿qué código deberías copiar?
Todos describen el mismo color. HEX es el estándar compacto para hojas de estilo y tokens de diseño. RGB es lo que esperan las APIs de canvas y muchas librerías, y rgba() te da transparencia sin complicaciones. HSL es el más humano para ajustar: mantén el tono fijo y cambia la luminosidad para construir una rampa coherente de matices.
Una pequeña advertencia: los colores pueden verse ligeramente distintos entre pantallas porque los monitores varían en calibración. El código es exacto; el cristal donde se muestra, no.
Cómo se corresponde el selector con valores reales
Los dos controles se corresponden directamente con el modelo HSL. El deslizador de tono recorre la rueda de color de 0 a 360 grados, mientras que el campo cuadrado fija la saturación en un eje y el brillo en el otro. Por eso HSL suele resultar el más intuitivo de manejar: la interfaz es en esencia un editor visual de HSL.
Por dentro, cada posición corresponde a valores sRGB precisos, así que las salidas HEX y RGB son la traducción exacta de dónde soltaste el cursor. Mueve un número HSL y el HEX y el RGB se actualizan al unísono, porque los tres son notaciones del mismo color subyacente.
Usos cotidianos
Los diseñadores recurren a un selector para afinar un tono antes de fijarlo en una paleta, o para derivar tintas y sombras que compartan tono y logren una interfaz coherente. Los desarrolladores lo usan para sacar un color de acento rápido sin abrir una app de diseño completa, y luego pegan el HEX directamente en el CSS.
Es igual de útil fuera del código. Cualquiera que prepare una presentación, dé estilo a un correo, elija el color de un gráfico o escoja un fondo para un documento puede encontrar aquí un valor exacto en lugar de conformarse con un color con nombre aproximado.
Crear paletas y variantes
Una forma fiable de crear una rampa de color es bloquear el tono y la saturación y variar solo la luminosidad en HSL: el mismo tono al 90 %, 70 %, 50 % y 30 % de luminosidad da un conjunto coherente de matices que parecen pertenecer al mismo grupo. El selector facilita esto porque puedes leer y editar los números HSL directamente.
Para colores de acento o complementarios, gira el deslizador de tono una cantidad fija, 30 grados para un color análogo o 180 para uno complementario, manteniendo estables la saturación y la luminosidad. Así la familia se mantiene equilibrada visualmente en lugar de ser una colección aleatoria de colores.
Elegir colores accesibles
Elegir un color es solo la mitad del trabajo; también tiene que ser legible. Las pautas de accesibilidad piden una proporción de contraste de al menos 4.5:1 entre el texto normal y su fondo, y de 3:1 para el texto grande. La luminosidad de HSL es una palanca útil aquí: oscurecer o aclarar un tono elegido suele bastar para superar el umbral sin abandonar el color.
Como el selector te da valores RGB exactos, puedes meterlos directamente en un verificador de contraste para comprobar una combinación. Cuando un color está al límite, ajusta la luminosidad en el selector y vuelve a probar en lugar de recurrir a un tono completamente distinto.
Herramientas de color relacionadas
Si ya tienes códigos fijos que traducir en lugar de un color que elegir, los convertidores dedicados de HEX a RGB y de RGB a HEX hacen esa única tarea con matemática exacta y sin pérdidas y una vista previa en vivo.
Una vez que tengas tus colores, el generador de degradados CSS los mezcla en fondos lineales o radiales listos para copiar. Todas estas herramientas se ejecutan localmente en tu navegador, así que tus elecciones de color nunca salen de tu equipo.
Preguntas frecuentes
¿Este selector de color es gratis?
Sí, completamente gratis, sin registro y sin límites. Elige y copia todos los colores que quieras.
¿Puedo tomar un color de una imagen o de mi pantalla?
Esta herramienta selecciona desde una paleta, no desde imágenes. Para muestrear un píxel de tu pantalla, usa el cuentagotas de las herramientas de desarrollador de tu navegador o una utilidad del sistema, y luego pega aquí el código resultante para afinarlo y convertirlo entre formatos.
¿Cuál es la diferencia entre HEX y HSL?
HEX codifica directamente el rojo, el verde y el azul; HSL describe tono, saturación y luminosidad. HSL es más fácil para las personas: 'mismo tono, 10 % más claro' es cambiar un número en HSL, pero un cambio opaco en HEX.
¿Se rastrea o se sube algo de lo que elijo?
No. El selector es JavaScript puro del lado del cliente. Tus elecciones de color nunca salen de tu navegador.
¿Funciona en pantallas táctiles?
Sí. El deslizador de tono y el área de sombras responden al tacto, así que funciona en iPhone, Android y tablets igual que con ratón.
¿Por qué el color se ve algo distinto en otra pantalla?
El código es exacto, pero los monitores varían en calibración, brillo y perfil de color, así que el mismo valor HEX puede aparecer un poco diferente de una pantalla a otra. Para trabajos donde el color es crítico, revisa tu diseño en más de una pantalla y, si es posible, en una calibrada.