Color Picker

Tria i treballa amb colors sense complicacions

Vam crear Color Picker el 2025 perquè estàvem cansats d’apps pesades i selectors complicats. Com a desenvolupadors front-end i il·lustradors, necessitàvem una eina per agafar un color, retocar-lo i continuar. El que va començar com una eina interna es va fer popular entre els companys, així que la vam polir i la vam publicar al web. Sense comptes ni corba d’aprenentatge: obre la pàgina, tria un to i copia els codis HEX, RGB, HSL o HSV.

Per què agrada el nostre selector de color?

Si mai t’has preguntat com captar el to exacte en un disseny, apreciaràs la simplicitat de Color Picker. Hem mantingut la interfície al mínim expressament:

• Clíques i tens el color – toca qualsevol punt de la paleta i l’eina et dona al moment els valors que necessites. Vols prendre mostra d’una foto, una captura o una obra? Arrossega-la a la pàgina i usa el comptagotes.
• Degradats, fàcils – crea transicions sedoses afegint i movent punts a la barra. Canvia entre lineal i radial, ajusta l’angle i l’opacitat i copia el CSS.
• Sense límits ni cost – Color Picker funciona en qualsevol navegador modern a l’ordinador, tauleta o telèfon. Res a instal·lar i cap cost.
• Extensions quan cal – les nostres extensions opcionals per a Chrome i Edge porten el comptagotes al navegador, perquè puguis prendre colors de qualsevol pàgina i endur-te l’historial.

Per a què és útil

La gent fa servir Color Picker de maneres diverses:

• Dissenyadors i equips de producte hi recorren quan esbossen interfícies o paletes de marca. És ràpid explorar combinacions i copiar el CSS necessari per als degradats.
• Il·lustradors i artistes utilitzen el comptagotes per inspirar-se en fotos i pintures. L’eina de degradats ajuda a planificar ombrejats suaus i transicions de color.
• Desenvolupadors front-end confien en l’eina per generar valors de color coherents entre projectes. L’extensió facilita prendre colors de llocs existents.
• Qualsevol que comprovi l’accessibilitat pot veure els colors en diferents models i ajustar l’opacitat fins complir les pautes de contrast.

Primers passos

No cal cap manual, però aquí tens un resum ràpid:

• Tria un color – fes clic a qualsevol punt de la paleta. Veureu immediatament els valors HEX, RGB i HSV. Fes servir els controls lliscants per ajustar matís, saturació, brillantor i transparència.
• Mostra des d’una imatge – arrossega un fitxer d’imatge a la pàgina o selecciona’n un. Fes clic al píxel desitjat i apareixeran els codis de color.
• Construeix un degradat – fes clic a la barra del degradat per afegir punts i arrossegar-los; alterna entre els estils lineal i radial. Ajusta l’angle i l’opacitat fins que t’agradi el resultat.
• Copia i reutilitza – els teus colors i degradats es guarden automàticament. Copia els codis o el CSS i enganxa’ls al teu projecte o comparteix-los amb l’equip.