Señor Herramientas

Cómo usar

Cómo usar el selector de color, imagen y transparencia

El selector de color, imagen y transparencia permite elegir colores con un selector 2D o desde una imagen, y revisar HEX, HEXA, RGB, RGBA, HSL y HSLA en el mismo espacio de trabajo. Úselo para comprobar códigos CSS, convertir valores de diseño, comparar tonos cercanos y reutilizar colores recientes. El flujo de selección, revisión y copia se completa en una sola pantalla, sin necesidad de cambiar de página para preparar los colores del proyecto.

Usar Selector de color, imagen y transparencia
Miniatura de Selector de color, imagen y transparenciaMiniatura de Selector de color, imagen y transparencia

Casos de uso

Cuándo usarla

  • Comprobar rápidamente un código de color CSS
  • Convertir valores RGB o HSL de una especificación de diseño
  • Comparar tonos similares lado a lado
  • Convertir un código de color de Figma o Photoshop a otro formato
  • Comparar tonos cercanos para comprobar la accesibilidad
  • Reutilizar rápidamente un color usado recientemente

Capacidades

Qué puede hacer esta herramienta

  • Conversión entre HEX, RGB y HSL
  • Vista previa del color actual y copia por formato
  • Reutilización de la paleta tonal y colores recientes
  • Seleccionar un color de la pantalla con el cuentagotas
  • Guardar automáticamente hasta 20 colores usados recientemente
  • Ajustar la opacidad con el control de alfa

Guía

Cómo usar cada zona de la pantalla

Aprenda a usar cada zona de la pantalla, incluidos ajustes, entrada, vistas previas, resultados y guardado.

01 HOWTO

Seleccione un color con el selector 2D

Arrastre en el selector 2D para elegir un color y use el control de tono para cambiarlo. Los códigos de color de la derecha se actualizan en tiempo real.

Selector 2D eligiendo un color con los códigos actualizándose en tiempo realSelector 2D eligiendo un color con los códigos actualizándose en tiempo real

Qué puede hacer esta zona

  • Ajustar la saturación y el brillo con el selector 2D
  • Cambiar la familia de color con el control de tono

Dónde usarla

01
Selector 2D

Empiece con el selector 2D y el control de tono para acercarse al color objetivo antes de ajustar detalles.

Captura de apoyo que muestra dónde usar Selector 2DCaptura de apoyo que muestra dónde usar Selector 2D
02
Saturación del color

Muévase a izquierda o derecha dentro del selector 2D para cambiar la intensidad del color seleccionado.

Captura de apoyo que muestra dónde usar Saturación del colorCaptura de apoyo que muestra dónde usar Saturación del color
03
Brillo del color

Muévase arriba o abajo dentro del selector 2D para ajustar el brillo sin cambiar el tono.

Captura de apoyo que muestra dónde usar Brillo del colorCaptura de apoyo que muestra dónde usar Brillo del color

02 HOWTO

Ajuste la transparencia y revise los códigos de color

Use el control de transparencia para ajustar la opacidad. Confirme que HEX, HEXA, RGB, RGBA, HSL y HSLA reflejen el mismo color de forma sincronizada a la derecha.

Control de transparencia y todos los formatos de código de color sincronizadosControl de transparencia y todos los formatos de código de color sincronizados

Qué puede hacer esta zona

  • Ajustar la transparencia desde opaco hasta transparente con el control de opacidad
  • Revisar el mismo color como HEX, HEXA, RGB, RGBA, HSL y HSLA

Dónde usarla

01
Comprobar HEX / HEXA

Use HEX cuando necesite un color sólido para CSS o archivos de configuración. Use HEXA cuando la transparencia deba incluirse.

Captura de apoyo que muestra dónde usar Comprobar HEX / HEXACaptura de apoyo que muestra dónde usar Comprobar HEX / HEXA
02
Formatos con transparencia

Cuando la transparencia sea importante, confirme que HEXA, RGBA y HSLA coincidan con el valor actual de alfa.

Captura de apoyo que muestra dónde usar Formatos con transparenciaCaptura de apoyo que muestra dónde usar Formatos con transparencia
03
Comprobar RGB / HSL

Revise RGB o HSL cuando necesite coincidir con una especificación de diseño o con código existente.

Captura de apoyo que muestra dónde usar Comprobar RGB / HSLCaptura de apoyo que muestra dónde usar Comprobar RGB / HSL

03 HOWTO

Copie en el formato que necesite

Haga clic en el botón de copia junto al formato deseado en el panel de códigos de color de la derecha. Puede copiar HEX, HEXA, RGB, RGBA, HSL o HSLA.

Botones de copia en el panel de códigos de colorBotones de copia en el panel de códigos de color

Qué puede hacer esta zona

  • Copiar el formato de código de color necesario para el destino
  • Elegir HEXA, RGBA o HSLA cuando deba incluirse transparencia

Dónde usarla

01
Copiar por formato

Copie HEX, HEXA, RGB, RGBA, HSL o HSLA según el lugar donde vaya a usar el color.

Captura de apoyo que muestra dónde usar Copiar por formatoCaptura de apoyo que muestra dónde usar Copiar por formato
02
Copiar sin transparencia

Use HEX, RGB o HSL para pegar un color sólido en CSS o valores de configuración.

Captura de apoyo que muestra dónde usar Copiar sin transparenciaCaptura de apoyo que muestra dónde usar Copiar sin transparencia
03
Copiar con transparencia

Use HEXA, RGBA o HSLA cuando el destino necesite un color transparente.

Captura de apoyo que muestra dónde usar Copiar con transparenciaCaptura de apoyo que muestra dónde usar Copiar con transparencia

04 HOWTO

Tome un color de una imagen

Añada un archivo de imagen en el área de imagen de la parte inferior izquierda y haga clic en cualquier punto de la vista previa para usar ese color como color actual.

Tomando un color de una imagen y aplicándolo como color actualTomando un color de una imagen y aplicándolo como color actual

Qué puede hacer esta zona

  • Añadir un archivo de imagen y tomar un color desde la vista previa
  • Usar el color tomado como color actual para ajustarlo o copiarlo

Dónde usarla

01
Tomar color desde imagen

Añada un archivo de imagen y haga clic en la vista previa para aplicar el color del píxel como color actual.

Captura de apoyo que muestra dónde usar Tomar color desde imagenCaptura de apoyo que muestra dónde usar Tomar color desde imagen
02
Añadir imagen

Elija un archivo de imagen para mostrar una vista previa desde la que tomar colores.

Captura de apoyo que muestra dónde usar Añadir imagenCaptura de apoyo que muestra dónde usar Añadir imagen
03
Hacer clic en la vista previa

Haga clic en el color deseado de la vista previa para aplicarlo como color actual.

Captura de apoyo que muestra dónde usar Hacer clic en la vista previaCaptura de apoyo que muestra dónde usar Hacer clic en la vista previa

05 HOWTO

Reutilice colores desde la paleta y el historial

Seleccione un tono cercano en la paleta de tonos de la derecha para comparar opciones. Los colores usados recientemente se guardan en el navegador y pueden reutilizarse sin recrearlos.

Panel de paleta tonal y colores recientes para reutilizar coloresPanel de paleta tonal y colores recientes para reutilizar colores

Qué puede hacer esta zona

  • Elegir colores cercanos más claros u oscuros desde la paleta tonal
  • Reutilizar colores recientes desde el historial del navegador

Dónde usarla

01
Paleta tonal

Seleccione una variante un poco más clara u oscura desde la paleta para compararla rápidamente.

Captura de apoyo que muestra dónde usar Paleta tonalCaptura de apoyo que muestra dónde usar Paleta tonal
02
Colores recientes

Los colores usados recientemente se guardan en el navegador para reutilizarlos sin volver a crear el mismo valor.

Captura de apoyo que muestra dónde usar Colores recientesCaptura de apoyo que muestra dónde usar Colores recientes
03
Aplicar el color seleccionado

Los colores elegidos desde la paleta o el historial actualizan a la vez el color actual, los códigos y el área de copia.

Captura de apoyo que muestra dónde usar Aplicar el color seleccionadoCaptura de apoyo que muestra dónde usar Aplicar el color seleccionado

Notas

Notas

Los puntos importantes se agrupan junto con sus razones para que pueda decidir antes de usar la herramienta.

Qué comprobar

Fije primero el color actual y la transparencia

HEX, HEXA, RGB, RGBA, HSL y HSLA son distintas formas de expresar el mismo color. Primero confirme el color actual y la transparencia, y después elija el formato que necesita.

Qué comprobar

Compare colores cercanos desde la paleta tonal

Si quiere probar una variante un poco más clara u oscura, suele ser más rápido elegirla desde la paleta tonal que repetir ajustes manuales.

Nota

Los colores guardados dependen del almacenamiento del navegador

Los colores usados recientemente se almacenan solo en el navegador. Si borra los datos del navegador, también se borrará el historial de colores. Anote los códigos de color importantes por separado.

FAQ

Preguntas sobre Selector de color, imagen y transparencia

Primero se resumen las preguntas que ayudan a decidir antes de usarla.

¿Los colores seleccionados se envían a algún sitio?

No. La selección, conversión, copia y el guardado de colores recientes se realizan dentro del navegador.

¿Dónde se guardan los colores recientes?

Los colores recientes solo se guardan en el almacenamiento del navegador para reutilizarlos en el mismo dispositivo y navegador.

¿Puedo seleccionar un color de la pantalla con el cuentagotas?

Sí. El cuentagotas permite seleccionar cualquier color visible en pantalla. No está disponible en navegadores que no admiten la EyeDropper API.

¿Puedo configurar la opacidad?

Sí. Use el control de opacidad para trabajar con los formatos RGBA y HSLA.

¿Puedo escribir un código de color directamente?

Sí. Puede escribir valores directamente en los campos HEX, RGB y HSL.

¿Dónde puedo ver los colores que he guardado?

Hasta 20 colores usados recientemente aparecen en la sección de colores recientes. Se pueden reutilizar en el mismo navegador.

Siguientes guías

Guías relacionadas

Las guías relacionadas se muestran a continuación para que pueda continuar sin perderse.

Cómo usar Compresión de imágenes

Comprime varias imágenes sin cambiar su formato, compara el tamaño y guarda los resultados.

Ver guía
Cómo usar Compresión de imágenes

Cómo usar Conversión de formato de imagen

Explica dónde cargar varias imágenes, elegir formato y calidad, revisar resultados, descargar individualmente, descargar como ZIP y convertir de nuevo.

Ver guía
Cómo usar Conversión de formato de imagen

Cómo usar Recortar y redimensionar imagen

Explica dónde cargar una imagen, recortar, redimensionar, mantener proporción, elegir formato y calidad, previsualizar, copiar y descargar.

Ver guía
Cómo usar Recortar y redimensionar imagen
Herramientas de imagenHerramientas de videoHerramientas de textoHerramientas de desarrolloHerramientas de diseñoHerramientas de generación