Color Picker

Elige colores y ponte manos a la obra — sin complicaciones

Construimos Color Picker en 2025 porque estábamos cansados de apps pesadas y herramientas de color complicadas. Como desarrolladores front-end e ilustradores, necesitábamos algo para tomar un color, retocarlo y seguir. Empezó como una herramienta interna, se volvió popular entre colegas y la pulimos para publicarla en la web. Sin cuentas ni curva de aprendizaje — abre la página, elige un tono y copia los códigos HEX, RGB, HSL o HSV.

¿Por qué a la gente le gusta nuestro selector de color?

Si alguna vez te has quedado mirando un diseño pensando cómo clavar el tono exacto, apreciarás la sencillez de Color Picker. Hemos mantenido la interfaz deliberadamente mínima:

• Clic y ya tienes el color — toca cualquier punto de la paleta y la herramienta muestra al instante los valores que necesitas. ¿Quieres una muestra de una foto o captura? Suéltala en la página y usa el cuentagotas.
• Degradados, fácil — crea transiciones sedosas añadiendo y moviendo paradas en la barra. Alterna lineal/radial, ajusta ángulo y opacidad y copia el CSS.
• Sin límites, sin coste — Color Picker funciona en cualquier navegador moderno en ordenador, tableta o móvil. Nada que instalar y sin tarifas.
• Extensiones cuando hagan falta — nuestras extensiones opcionales para Chrome y Edge llevan el cuentagotas al navegador para muestrear colores de cualquier página y guardar tu historial.

Para qué sirve

La gente usa Color Picker de muchas formas:

• Diseñadores y equipos de producto lo usan al esbozar interfaces o paletas de marca. Es rápido explorar combinaciones y copiar el CSS necesario para los degradados.
• Ilustradores y artistas utilizan el cuentagotas para inspirarse en fotos y cuadros. La herramienta de degradados ayuda a planificar sombreados suaves y transiciones de color.
• Desarrolladores front-end confían en él para generar valores de color coherentes entre proyectos. La extensión hace que muestrear de sitios existentes sea muy sencillo.
• Cualquiera que compruebe la accesibilidad puede ver los colores en distintos modelos y ajustar la opacidad hasta cumplir las pautas de contraste.

Primeros pasos

No necesitas manual; aquí va un repaso rápido:

• Elige un color — haz clic en cualquier punto de la paleta. Verás al instante los valores HEX, RGB y HSV. Usa los deslizadores para ajustar tono, saturación, brillo y transparencia.
• Muestrear desde una imagen — arrastra un archivo de imagen a la página o selecciona uno. Haz clic en el píxel deseado y aparecerán los códigos de color.
• Construye un degradado — haz clic en la barra del degradado para añadir paradas y muévelas; cambia entre estilos lineal y radial. Ajusta ángulo y opacidad hasta que quede perfecto.
• Copiar y reutilizar — tus colores y degradados se guardan automáticamente. Copia códigos o CSS y pégalos en tu proyecto, o compártelos con el equipo.