Herramienta selector de color v2.0

Acerca de Herramienta selector de color

Un selector de color es una herramienta que te permite elegir un color y obtener su código exacto en formatos como HEX, RGB o HSL para usarlo en tu código o tu diseño. El selector de color de ToolsPivot va más allá de eso: convierte un solo color a diez formatos distintos, captura cualquier píxel de tu pantalla con un cuentagotas, extrae paletas de una imagen y comprueba el contraste WCAG. Todo funciona en tu navegador, sin subir nada y sin crear cuenta, pensado para diseñadores, desarrolladores y autónomos que trabajan con color a diario.

Qué es el selector de color de ToolsPivot

Funcionalidad principal

El selector de color de ToolsPivot toma un color y lo traduce al instante a HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, OKLCH y el nombre CSS más cercano. Guarda internamente el color con precisión decimal, así que arrastrar los controles no altera el valor ni provoca el típico salto entre HEX y HSL. Cada formato tiene su propio botón de copiado, listo para pegar en tu CSS o en tu software de diseño.

Usuarios objetivo y casos de uso

Lo usan sobre todo diseñadores web, maquetadores front-end, ilustradores y responsables de marca que necesitan códigos de color fiables sin abrir cinco pestañas distintas. También resulta práctico para autónomos que preparan una identidad visual para un cliente o para creadores de contenido que igualan colores entre una miniatura y una plantilla de redes.

Problema y solución

El problema habitual es tener que combinar varias webs: una para convertir, otra para el contraste, otra para extraer color de una imagen. Aquí lo tienes todo en una sola página, incluida la conversión que antes buscabas en un convertidor de RGB a hexadecimal aparte. El resultado: menos pestañas, códigos consistentes y menos errores al copiar valores a mano.

Principales ventajas del selector de color

• Diez formatos de una vez: copias HEX, RGB, HSL, HSV, CMYK y OKLCH sin cambiar de herramienta, algo que la mayoría de selectores gratuitos no ofrece.
• Cuentagotas de pantalla: capturas el color de cualquier píxel visible, no solo de elementos de la página, gracias al cuentagotas nativo del navegador.
• Contraste accesible integrado: compruebas si dos colores cumplen los niveles WCAG AA y AAA sin recurrir a una segunda herramienta.
• Sin deriva de color: el valor interno de alta precisión mantiene los deslizadores exactos por muchos ajustes que hagas.
• Extracción desde imágenes: subes una foto y obtienes tanto el color de cada píxel como una paleta dominante automática.
• Privacidad real: nada se sube a ningún servidor porque todo el procesamiento ocurre en tu navegador, útil cuando trabajas con material confidencial de un cliente.
• Preparado para producción: los degradados y los códigos se copian ya formateados para CSS, igual que cuando pasas tus archivos por un minificador de CSS antes de publicar.
• Colores guardados: tu paleta persiste entre visitas, así retomas un proyecto sin volver a buscar los tonos, y encaja bien con flujos donde también comprimes imágenes antes de subirlas.

Funciones clave del selector de color

• Cuadro de saturación y valor: ajustas tono, saturación y brillo con precisión mediante el cuadro SV más el deslizador de matiz, con ratón o pantalla táctil.
• Canal alfa: controlas la transparencia con un deslizador de opacidad que se refleja en los formatos HEX8, RGBA y HSLA.
• Entrada directa de códigos: escribes un HEX, una función rgb() o un nombre CSS y la herramienta reconstruye el color al instante.
• Conversión a diez formatos: ves en paralelo HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, OKLCH y el nombre CSS más próximo entre 148 colores con nombre.
• Armonías de color: generas esquemas complementario, análogo, triádico, tetrádico, complementario dividido y monocromático a partir del color activo.
• Tintes, sombras y tonos: obtienes tres tiras de variaciones para construir una escala coherente, útil cuando defines estados de un botón junto a tu calculadora hexadecimal.
• Verificador de contraste: introduces dos colores y ves la relación numérica más el resultado AA, AA-Grande y AAA.
• Vista previa de legibilidad: compruebas cómo se ve texto negro y blanco sobre el color elegido antes de aplicarlo.
• Selección desde imagen: subes una imagen, haces clic en cualquier píxel y extraes su color, ideal tras generar una captura de pantalla de una web para copiar su paleta.
• Constructor de degradados CSS: añades un segundo color, eliges ángulo y tipo lineal o radial, y copias el CSS resultante.
• Cuentagotas nativo: muestreas el color de cualquier zona de la pantalla sin instalar extensiones.
• Compatibilidad con datos: exportas tus colores como valores listos para usar, igual de directo que convertir Base64 a imagen cuando manejas recursos gráficos.

Cómo funciona el selector de color de ToolsPivot

1. Elige un color arrastrando en el cuadro de saturación y valor, escribiendo un código o usando el cuentagotas de pantalla.
2. Revisa la vista previa y los formatos: la herramienta muestra los diez a la vez y actualiza cada uno en tiempo real.
3. Copia el formato que necesites con su botón o guarda el color en tu paleta para más adelante.
4. Genera armonías, variaciones o un degradado, o comprueba el contraste con un segundo color.
5. Para trabajar con imágenes, súbela y haz clic en un píxel, del mismo modo que al pasar una imagen a Base64 para insertarla en tu código.

Cuándo usar el selector de color

El selector de color es más útil cuando necesitas un código exacto y consistente en varios formatos, o cuando quieres capturar un color que ya existe en una imagen o en la pantalla. Estos son los escenarios donde marca la diferencia:

• Definir la paleta de una marca: fijas los colores corporativos y los exportas en HEX para web y CMYK para imprenta.
• Copiar un color de referencia: usas el cuentagotas para clonar el tono exacto de un logotipo o una captura.
• Revisar accesibilidad: compruebas el contraste de texto y fondo antes de entregar una interfaz.
• Construir variaciones de un componente: generas tintes y sombras para los estados de un botón antes de recortar una imagen de apoyo.
• Extraer una paleta de una foto: subes una imagen y sacas los colores dominantes para inspirar un diseño, y luego puedes ajustar su tamaño según el formato final.
• Crear un degradado CSS: combinas dos colores y copias el código listo para tu hoja de estilos.
• Igualar colores entre plataformas: mantienes el mismo tono en Wallapop, Vinted o Instagram al preparar anuncios y publicaciones.

En pantallas sin calibrar, un mismo código puede verse ligeramente distinto, así que conviene revisar el color en el dispositivo final antes de dar por cerrada una paleta.

Casos de uso y aplicaciones

Autónomo que diseña para clientes

Contexto: un diseñador autónomo en Madrid prepara la identidad visual de una tienda que vende en Amazon.es y en su propia web.

• Captura con el cuentagotas los colores del logotipo que ya tiene el cliente.
• Genera armonías y tintes para las secciones de la web.
• Exporta cada color en HEX para pantalla y en CMYK para el material impreso.

Resultado: una paleta coherente entre el escaparate digital y los folletos, sin discrepancias de tono.

Desarrollador front-end en una pyme

Contexto: un desarrollador de una pyme maqueta una interfaz y necesita cumplir los requisitos de accesibilidad.

• Comprueba el contraste de cada par de texto y fondo con el verificador WCAG.
• Ajusta la luminosidad hasta alcanzar el nivel AA sin perder la identidad de marca.
• Copia los valores en OKLCH para variables CSS modernas y mantenibles.

Resultado: una interfaz accesible que pasa las revisiones sin retoques de última hora.

Creador de contenido y redes

Contexto: una creadora igual el estilo de sus miniaturas de YouTube con sus publicaciones de Instagram.

• Sube una miniatura y extrae su paleta dominante.
• Guarda los colores para reutilizarlos en cada plantilla.
• Prepara un favicon con el color principal de su marca.

Resultado: un feed reconocible con el mismo lenguaje visual en todas las plataformas.

Equipo de marketing que hace pruebas

Contexto: un equipo de marketing valida variantes de color para una landing antes de un lanzamiento.

• Genera degradados y variaciones para probar distintas llamadas a la acción.
• Usa imágenes de marcador de posición con esos colores para maquetar rápido.
• Comparte los códigos exactos con diseño y desarrollo.

Resultado: pruebas A/B con colores documentados y reproducibles por todo el equipo.

OKLCH y CMYK: por qué importan los formatos modernos

OKLCH es un formato de color perceptualmente uniforme que casi ningún selector gratuito en español ofrece todavía. Se basa en el espacio OKLab y ordena el color por luminosidad, croma y tono, de forma que dos colores con la misma luminosidad se perciben igual de claros, algo que HSL no garantiza. Esto lo hace ideal para crear escalas de color consistentes en CSS moderno y para diseñar temas que se vean equilibrados en distintas pantallas.

CMYK, en cambio, aproxima cómo se reproducirá un color en imprenta mezclando cian, magenta, amarillo y negro. Tenerlo junto a los formatos de pantalla evita sorpresas cuando un mismo diseño salta de la web al papel.

Puntos clave:

• OKLCH: luminosidad perceptual uniforme, perfecto para escalas y temas coherentes.
• CMYK: aproximación de imprenta para no llevarte sorpresas en el material impreso.
• HEX8 y alfa: control de transparencia directo en tus estilos.

Contraste y accesibilidad: qué comprueba el test WCAG

El test de contraste compara dos colores y te dice si su relación cumple las Pautas de Accesibilidad WCAG. La norma marca un mínimo de 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA, y sube a 7:1 y 4,5:1 en el nivel AAA. Comprobar esto importa porque alrededor del 8 % de los hombres tiene algún tipo de daltonismo y un contraste bajo deja a mucha gente sin poder leer tu contenido.

En España, el contraste no es solo una buena práctica. El Real Decreto 1112/2018 exige accesibilidad conforme a WCAG en los sitios del sector público, y la normativa de accesibilidad para productos y servicios digitales privados amplía estas exigencias a cada vez más empresas. Verificar el contraste desde el principio te ahorra rehacer trabajo, igual que revisar un texto con el comprobador de legibilidad antes de publicarlo.

Limitaciones honestas

El cuentagotas de pantalla usa una función nativa del navegador disponible en Chrome y Edge; en navegadores que no la admiten queda oculto y puedes muestrear color subiendo una imagen. Los valores CMYK son una aproximación calculada a partir de sRGB, no un perfil de imprenta profesional, así que para tiradas exigentes conviene confirmar con tu imprenta. Y como cualquier código de color depende de la pantalla, un monitor sin calibrar puede mostrar tonos ligeramente distintos.

Preguntas frecuentes

¿Qué es un selector de color?

Un selector de color es una herramienta que te permite elegir un color de forma visual y obtener su código exacto en formatos como HEX, RGB o HSL. Se usa en diseño web, desarrollo y diseño gráfico para reproducir un tono con precisión en el código o en el software de diseño.

¿Es gratis el selector de color de ToolsPivot?

Sí, es totalmente gratuito y no requiere registro. Puedes usar todas sus funciones, incluidos el cuentagotas, las armonías y el test de contraste, sin crear cuenta ni pagar nada.

¿Cómo saco el código de un color de mi pantalla?

Activa el cuentagotas y haz clic sobre el píxel cuyo color quieras capturar en tu pantalla. La herramienta detecta el tono exacto y te muestra su valor en los diez formatos, listo para copiar.

¿Qué formatos de color puedo copiar?

Puedes copiar HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, OKLCH y el nombre CSS más cercano. Cada formato tiene su propio botón de copiado para pegarlo directamente en tu código o en tu herramienta de diseño.

¿Qué diferencia hay entre HEX, RGB y HSL?

HEX y RGB describen el mismo color mezclando rojo, verde y azul, mientras que HSL lo describe por tono, saturación y luminosidad. HEX es el formato compacto habitual en CSS, RGB resulta intuitivo para pantalla y HSL facilita crear versiones más claras u oscuras sin cambiar el tono base.

¿Para qué sirve el formato OKLCH?

OKLCH sirve para trabajar con colores de forma perceptualmente uniforme en CSS moderno. Al basarse en luminosidad, croma y tono, permite crear escalas de color donde dos tonos con la misma luminosidad se perciben igual de claros, algo difícil de lograr con HSL.

¿Puedo extraer los colores de una imagen?

Sí, puedes subir una imagen y hacer clic en cualquier píxel para obtener su color exacto. La herramienta también genera automáticamente una paleta con los colores dominantes de la imagen.

¿El cuentagotas funciona en todos los navegadores?

El cuentagotas de pantalla funciona en navegadores basados en Chromium, como Chrome y Edge, que admiten la función nativa. En navegadores que no la soportan, la opción se oculta y puedes muestrear color a partir de una imagen subida, igual que compruebas una web con la prueba de compatibilidad móvil.

¿Qué es la relación de contraste WCAG?

La relación de contraste WCAG es una medida de la diferencia de luminosidad entre dos colores, expresada como un cociente. El nivel AA exige al menos 4,5:1 para texto normal y el nivel AAA sube a 7:1, para garantizar que el texto sea legible.

¿Se suben mis imágenes a algún servidor?

No, nada se sube a ningún servidor porque todo el procesamiento ocurre en tu navegador. Tanto la selección de color como la extracción de paletas de una imagen se realizan en local, sin transmitir tus archivos.

¿Puedo guardar mis colores favoritos?

Sí, los colores que guardas persisten entre visitas en tu propio navegador. Así puedes retomar un proyecto y reutilizar tu paleta sin volver a buscar cada tono.

¿Cómo genero un degradado CSS?

Elige un color, añade un segundo color y selecciona el ángulo y el tipo lineal o radial. La herramienta genera el degradado y te da el CSS listo para copiar en tu hoja de estilos, que después puedes editar en un editor HTML online.

¿El selector de color sirve para impresión?

Sí, incluye el formato CMYK, que aproxima cómo se reproducirá un color en imprenta. Ten en cuenta que es una aproximación calculada desde sRGB, por lo que para tiradas exigentes conviene confirmar el resultado con tu imprenta.

¿En qué se diferencia de otros selectores de color gratuitos?

Se diferencia en que reúne diez formatos, cuentagotas de pantalla, armonías, contraste WCAG, extracción desde imágenes y degradados en una sola página. La mayoría de selectores gratuitos se quedan en tres formatos y reparten el resto de funciones entre varias webs distintas.

Related Tools You Might Like

Texto a imagen Cambiador de tamaño de imagen Base64 a imagen Eliminador de datos EXIF Compresor de imágenes Búsqueda inversa de imágenes