Utilore

Selector de color

Recorre el cuadro para elegir un color, o toma uno que ya existe: de una imagen con el cuentagotas o, donde el navegador lo permite, de cualquier punto de la pantalla. El código aparece al instante en las tres notaciones.

Elige un color

Recientes

Sacar el color de cualquier punto de la pantalla es una función que solo tienen Chrome y Edge. En Safari y Firefox el botón ni siquiera aparece: prometerlo y luego negarlo sería peor que no ofrecerlo. Ahí usa una imagen: una captura sirve igual.

La imagen se queda en esta pestaña: el color se lee de un lienzo aquí mismo, no se sube nada. Los colores recientes se recuerdan solo en este dispositivo.

Cerca: Convertidor de color · Generador de paletas de colores · Generador de degradados CSS · HEX a RGB

Cómo usarlo

  1. Arrastra por el cuadro para elegir el tono, y usa el deslizador de abajo para cambiar la familia de color.
  2. Ajusta la opacidad si necesitas un color semitransparente: aparecerá en el código como rgba o como dos caracteres más en HEX.
  3. Para tomar un color existente, pulsa «Sacar de una imagen» y haz clic en la foto. En Chrome y Edge también puedes sacarlo de la pantalla.
  4. Pulsa «Copiar» junto a la notación que necesites. El color va a la tira de recientes por si quieres volver a él.

Lo que conviene saber

Por qué el cuadro se basa en HSV

En HSV el cuadro de saturación contra brillo está lleno de lado a lado: cada punto es un color distinto. Construye el mismo cuadro sobre HSL y degenera: la fila de arriba es todo blanco y la de abajo todo negro, y la mitad del área no elige nada. Esa es toda la razón de la elección, y es justo lo que vigila la prueba.

Tres entradas, porque se llega con preguntas distintas

Elegir un color y encontrar un color son trabajos diferentes. El cuadro es para elegir. El cuentagotas sobre una imagen es para un color que ya existe en algún sitio: una captura, un logotipo, una fotografía. Sacarlo de la pantalla es lo mismo sin salir de la ventana, y solo Chrome y Edge saben hacerlo.

Dónde aparece la transparencia

La opacidad se escribe solo cuando no es total: «rgb(31, 95, 214)» y no «rgba(31, 95, 214, 1)», porque lo segundo se acaba limpiando a mano. En HEX la transparencia son dos caracteres más al final: los navegadores actuales lo entienden, las herramientas viejas no, así que con opacidad total la cola no se escribe.

Preguntas frecuentes

¿Por qué en mi navegador no hay botón de «sacar de la pantalla»?

Porque Safari y Firefox no saben hacerlo. Es una función del navegador, no nuestra, y solo la tienen Chrome y Edge. Mostrar el botón y luego negarse sería peor que no ofrecerlo, así que simplemente no está. Haz una captura y trabaja con la imagen: el resultado es idéntico.

¿Cómo saco el color de un píxel de una foto?

Pulsa «Sacar de una imagen», elige el archivo y mueve el puntero por la foto: el color sigue al puntero. Haz clic para quedártelo. La imagen no se sube a ningún sitio: se dibuja en un lienzo de esta pestaña y se lee de ahí.

¿Puedo escribir el color en lugar de elegirlo?

Sí. Escríbelo en cualquiera de los tres campos en cualquier forma habitual —#1f5fd6, 1f5fd6, rgb(31, 95, 214)— y los otros dos se rellenan solos junto con el cuadro. Si solo necesitas pasar de una notación a otra, el conversor de color de al lado es el camino más corto.

El deslizador de tono salta cuando bajo el brillo a cero.

No debería, y no lo hace: el negro y el blanco no tienen tono, así que el deslizador conserva el anterior en vez de irse al rojo. Es a propósito: si no, cada bajada al fondo del cuadro perdería la familia de color en la que estabas trabajando.

¿Dónde se guardan los colores recientes?

En este dispositivo, en el navegador. No se envían a ningún sitio ni te identifican: borra los datos del sitio y la tira vuelve a estar vacía.

Herramientas relacionadas