Selector de color
Elige un color a ojo o escribe un valor. Copia el código HEX, el RGB, el HSL o el HSV. Captura cualquier color de la pantalla con el cuentagotas. Arma una paleta y expórtala como variables CSS o como JSON. Todo ocurre dentro de tu propio navegador: no se sube nada a ningún servidor.
Tintes y sombras
Haz clic en una muestra para convertirla en el color activo. Al pasar el cursor por encima verás su código HEX.
Historial de colores
Todavía no hay colores: elige uno arriba para empezar.
Paleta personalizada
Añade colores con el botón "+ Añadir a la paleta" de arriba.
Referencia de formatos de color
| Formato | Ejemplo | Rango | Cuándo usarlo |
|---|---|---|---|
| HEX | #5b8cff | #000000–#FFFFFF | CSS y HTML, tokens de diseño |
| RGB | rgb(91, 140, 255) | 0–255 por canal | CSS, gráficos en pantalla, mezclas |
| HSL | hsl(225, 100%, 68%) | H: 0–360°, S/L: 0–100% | CSS y ajustes a mano (aclarar, oscurecer) |
| HSV / HSB | hsv(225, 64%, 100%) | H: 0–360°, S/V: 0–100% | Programas de diseño (Figma, Photoshop) |
| rgba / hsla | rgba(91,140,255,0.8) | Alfa: 0–1 | Transparencia en CSS |
| HEX de 8 dígitos | #5b8cffcc | #00000000–#FFFFFFFF | CSS4, Android, SVG con alfa |
Cómo se convierte un color de un formato a otro
Tomemos el color inicial de este selector, rgb(91, 140, 255):
- RGB → HEX: cada canal se escribe en base 16. 91 = 0x5B, 140 = 0x8C y 255 = 0xFF, así que el código queda en
#5B8CFF. Por eso un HEX de seis dígitos son tres pares: dos para el rojo, dos para el verde y dos para el azul. - RGB → HSL: la luminosidad es el punto medio entre el canal más alto y el más bajo. Aquí el máximo es 255 (azul) y el mínimo 91 (rojo), de modo que la luminosidad vale (255 + 91) / 2 / 255 ≈ 67,8 %, que se redondea al 68 % del campo HSL. Como el máximo llega al tope de la escala, la saturación es del 100 % y el tono cae en el sector azul del círculo cromático.
- Alfa: un alfa de 0,8 se escribe en HEX como CC, porque 0,8 × 255 = 204 y 204 en base 16 es CC. De ahí salen
#5B8CFFCCyrgba(91,140,255,0.8), dos formas de escribir exactamente el mismo color con un 80 % de opacidad.
Cómo funciona un selector de color
Un selector gráfico son en realidad tres controles trabajando juntos. El cuadro grande es un campo de saturación y valor de dos dimensiones: al moverte de izquierda a derecha cambias la intensidad del color, y al subir o bajar cambias su brillo. La banda estrecha de al lado es el control de tono, que elige el color base y recorre el rojo, el naranja, el amarillo, el verde, el cian, el azul y el magenta antes de volver al rojo a los 360°. El tercer control, opcional, ajusta el alfa, es decir, la opacidad, y suele dibujarse sobre un damero para que se vea de verdad cuánto deja pasar el color.
Ese esquema de «un cuadro más dos barras» se apoya en el modelo HSV, y no en RGB, por un motivo muy humano: primero decidimos qué color queremos, y solo después cuán vivo y cuán claro debe ser. Mover tres números independientes de 0 a 255 hasta dar con un azul cielo algo apagado es mucho más difícil que arrastrar un puntero por un cuadro. Como la barra fija el tono mientras exploras, el selector puede dibujar todo el plano de saturación y valor de ese tono como un degradado continuo: exactamente el campo que ves en esta página.
El botón de cuentagotas usa la EyeDropper API del navegador, que permite capturar el color de cualquier píxel visible en la pantalla, incluso fuera de esta página. Por privacidad solo puede arrancar con un clic tuyo, exige una conexión segura HTTPS y se cancela con la tecla Escape. De momento la admiten los navegadores basados en Chromium (Chrome, Edge y Opera); en Firefox y Safari el botón aparece desactivado. Lo que captures no viaja a ningún sitio: el color se calcula dentro de tu propio dispositivo, igual que el historial y la paleta, que se guardan en el almacenamiento local del navegador.
HEX, RGB y HSL: cuál conviene copiar
Los tres describen el mismo color; lo que cambia es para qué sirve cada notación. El HEX (#rrggbb, u ocho dígitos si añades el alfa) es la moneda corriente de la web: corto, fácil de pegar y aceptado en todas partes, pero ilegible para una persona. Nadie mira #5b8cff y deduce que es un azul claro. El RGB muestra los mismos tres canales en decimal, de 0 a 255, y resulta cómodo cuando escribes código o mezclas colores; conviene recordar que es un modelo aditivo, pensado para pantallas que emiten luz, no para tinta sobre papel.
El HSL (tono, saturación, luminosidad) es el más fácil de retocar a mano. Si solo bajas la luminosidad, el color se oscurece de forma previsible sin estropear su tono, que es justo lo que necesitas para generar estados de hover, bordes y fondos de una misma familia. Su primo el HSV se comporta distinto en los extremos: en HSL el 100 % de luminosidad es blanco y el color puro vive en el 50 %, mientras que en HSV el 100 % de valor es el color pleno y el blanco solo se consigue bajando la saturación. Como regla práctica: piensa y ajusta en HSL o HSV, y guarda y comparte en HEX o RGB.
Contraste y accesibilidad: la cifra que hay que respetar
Elegir un color que guste no es lo mismo que elegir uno que funcione para todo el mundo. Alrededor del 8 % de los hombres y el 0,5 % de las mujeres de ascendencia noreuropea tienen alguna dificultad para distinguir colores, casi siempre en el eje rojo-verde, porque los tipos más comunes dependen de genes del cromosoma X. De ahí la vieja regla de accesibilidad: nunca uses el color como único portador de información. Un error en rojo lleva además un icono o un texto, las series de un gráfico se separan también por trama o etiqueta, y los enlaces se subrayan además de colorearse.
La legibilidad es la otra mitad del problema, y aquí la cifra es exacta. Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen una relación de contraste entre el texto y su fondo y, en el nivel AA que casi todo el mundo adopta, exigen como mínimo 4,5:1 para el texto de tamaño normal y 3:1 para el texto grande (alrededor de 18 pt, o 14 pt en negrita), así como para los controles de la interfaz. Por eso, cuando este selector te devuelve un HEX destinado a un párrafo, la pregunta útil no es si es bonito, sino si supera el 4,5:1 contra su fondo. La rutina sana es elegir el color aquí y comprobar después la pareja en un verificador de contraste antes de darla por buena.
Preguntas frecuentes
- ¿Cuál es la diferencia entre HEX, RGB y HSL?
- Los tres representan el mismo color. HEX lo escribe en base 16 y es el formato estándar de la web; RGB da los mismos tres canales en decimal, de 0 a 255, y es cómodo para mezclar colores en código; HSL lo describe como tono, saturación y luminosidad, que es la forma más fácil de aclararlo u oscurecerlo a mano sin cambiarle el tono. Puedes editar cualquiera de los campos de arriba y los demás se actualizan solos.
- ¿Qué relación de contraste necesita el texto para ser accesible?
- El nivel AA de las WCAG pide al menos 4,5:1 entre el texto de tamaño normal y su fondo, y 3:1 para el texto grande (unos 18 pt, o 14 pt en negrita) y para los controles de la interfaz. Elige el color aquí y comprueba la pareja en el verificador de contraste antes de usarla.
- ¿Cómo funciona el cuentagotas y en qué navegadores está?
- Usa la EyeDropper API, que captura el color de cualquier píxel visible en la pantalla. Está disponible en Chrome, Edge y Opera; Firefox y Safari todavía no la admiten, y en ellos el botón aparece desactivado. No se envía ninguna imagen ni ningún dato: el color se calcula dentro de tu navegador.
- ¿Se guardan mis colores en algún servidor?
- No. Toda la herramienta se ejecuta en tu propio navegador y no sube nada. El historial y la paleta personalizada se guardan en el almacenamiento local de tu dispositivo, siguen ahí en tu próxima visita y puedes vaciarlos cuando quieras con los botones correspondientes.