Señor Herramientas

Cómo usar

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

Una herramienta de color browser-only para elegir un color y convertirlo entre HEX, RGB y HSL. Puede revisar el color actual, comparar tonos cercanos y reutilizar colores recientes en el mismo espacio de trabajo. Verifique códigos CSS, convierta valores de especificación y compare tonos similares sin salir del navegador.

Miniatura de Selector de color, imagen y transparenciaMiniatura de Selector de color, imagen y transparencia
Pasos
2 pasos
Guía
Con capturas
Contenido
Notas y FAQ

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

Pasos

Pasos

Se enumeran el orden de las operaciones y los puntos de comprobación para que pueda avanzar mientras mira la pantalla.

PASO 1

Elija un color y ajuste los valores

Use el selector de color de la izquierda y, si lo necesita, ajuste el mismo color con los campos HEX, RGB y HSL.

Puntos de comprobación

  • La vista previa del color actual cambia al color seleccionado
  • HEX, RGB y HSL permanecen sincronizados como el mismo color
  • La entrada no válida aparece en el campo correspondiente

Acciones en esta pantalla

01
Selector de color

Empiece con el selector para acercarse al color objetivo antes de hacer ajustes finos.

Captura de apoyo que muestra dónde usar Selector de colorCaptura de apoyo que muestra dónde usar Selector de color
02
Comprobar HEX

Use HEX como referencia principal cuando vaya a pegar el valor en CSS o en archivos de configuración.

Captura de apoyo que muestra dónde usar Comprobar HEXCaptura de apoyo que muestra dónde usar Comprobar HEX
03
Ajustar RGB / HSL

Alinee valores numéricos cuando necesite coincidir con una especificación de diseño o con código existente.

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

PASO 2

Copie el formato necesario y reutilice colores cercanos o recientes

Copie HEX, RGB o HSL desde el panel del color actual y reutilice tonos cercanos o colores recientes cuando lo necesite.

Puntos de comprobación

  • Se puede copiar el formato necesario
  • Se pueden elegir tonos cercanos desde la paleta
  • Se pueden reutilizar colores recientes

Acciones en esta pantalla

01
Copiar por formato

Copie HEX, RGB o HSL 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
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
03
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

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 luego elija el formato

HEX, RGB y HSL son solo distintas formas de expresar el mismo color. Primero confirme el color actual 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.