Cómo elegir un color y leer su código

El selector es un campo plano de tipo spectrum: arrastra dentro del cuadro para ajustar saturación y brillo, usa el deslizador vertical para el tono y el horizontal para la opacidad, o escribe un color directamente en el campo que hay debajo. Ese campo siempre contiene el color actual, como #rrggbb mientras es totalmente opaco y como rgba(...) en cuanto el deslizador de opacidad baja del 100 %.

La paleta que acompaña al cuadro tiene 66 muestras fijas en tres filas, y la fila inferior guarda los colores que mezclas tú. Elegir un color ocurre en la página: no se envía ninguna petición mientras arrastras, escribes o haces clic, y ningún valor de color sale del navegador.

  1. Arrastra dentro del cuadro para elegir un color, o haz clic en una de las 66 muestras de la paleta para partir de un valor conocido.
  2. Ajusta el tono con su deslizador y, si el color necesita transparencia, mueve el de opacidad; en ese momento el campo pasa a mostrar rgba(...).
  3. Escribe o pega un color CSS cuando ya lo conozcas: #rgb, #rrggbb, #rgba, #rrggbbaa, rgb(), rgba(), hsl(), un nombre como red o transparent. Pulsa Intro para aplicarlo.
  4. Lee el valor del campo y copia ese texto en tu hoja de estilos, o pulsa el pequeño control ✕ para vaciar la selección y empezar de nuevo.

La paleta, el campo de valor y lo que la herramienta no hace

Qué recuerda la paleta

Las tres filas superiores son fijas: seis grises, diez colores saturados y cincuenta tonos suaves. No cambian y hacer clic en una no se registra, porque un preajuste no es un color tuyo.

La fila inferior guarda hasta siete colores elegidos por ti, del más reciente al más antiguo: se añade lo que escribes, lo que clicas y lo que dejas fijado tras arrastrar. La lista se guarda en este navegador bajo una clave del dominio voritools.com, así que sobrevive a una recarga en este dispositivo, pero no se sincroniza y otro navegador empieza con la fila vacía.

Cómo leer el campo de valor

El campo es la salida de la herramienta: el color actual escrito como lo necesita el CSS. Los colores opacos aparecen como #rrggbb; los que tienen una opacidad inferior al 100 % aparecen como rgba(...), porque seis dígitos hexadecimales no pueden llevar canal alfa. La información emergente de cada muestra y la pequeña vista previa junto al campo muestran el mismo valor.

Los valores con alfa escritos en hexadecimal se interpretan como define CSS Color 4: #12345678 significa #123456 con alfa 0x78/255 y se muestra como el valor rgba(...) equivalente, y #abcd significa #aabbccdd. Un valor que el selector no puede leer conserva el borde rojo y la página muestra el aviso de que el color no se pudo interpretar.

Lo que esta herramienta no hace

Trabaja con un color cada vez y solo en esta página: no exporta paletas, no descarga variables CSS ni JSON, no comprueba contraste ni accesibilidad y no extrae colores de una foto o una captura. Para eso existe la herramienta hermana de colores de imagen.

Tampoco hay botón de copiar; el campo es un cuadro de texto normal, así que copias su contenido como cualquier otro valor. Y como la fila de recientes vive en el navegador, borrar los datos del sitio la elimina, mientras que una ventana privada empieza siempre con la fila vacía.

Herramientas recientes: