Color Picker

Válaszd ki a színeket és kezdj dolgozni — macera nélkül

A Color Pickert 2025-ben építettük, mert elegünk lett a nehézkes appokból és a túlbonyolított színeszközökből. Frontend-fejlesztőként és illusztrátorként olyan megoldásra volt szükségünk, amellyel azonnal felvehetünk egy színt, kicsit finomhangoljuk, és lépünk tovább. Belső eszközként indult, a kollégák kedvence lett, mi pedig kicsiszoltuk és közzétettük a weben mindenkinek. Nincs fiók, nincs meredek tanulási görbe — nyisd meg az oldalt, válassz egy árnyalatot és másold a HEX-, RGB-, HSL- vagy HSV-kódokat.

Miért szeretik a színválasztónkat?

Ha néztél már egy tervet, és azon gondolkoztál, hogyan találd el a pontos árnyalatot, értékelni fogod a Color Picker egyszerűségét. A felületet szándékosan minimalista tartottuk:

• Kattintás — és a szín a tiéd — érints meg bármely pontot a palettán, és az eszköz azonnal megjeleníti a szükséges értékeket. Mintát vennél fotóból vagy képernyőmentésből? Dobd az oldalra és használd a pipettát.
• Színátmenetek egyszerűen — selymes átmeneteket készíthetsz a sávon lévő stoppontok hozzáadásával és mozgatásával. Válts lineáris/radiális között, finomhangold a szöget és az átlátszóságot, majd másold a CSS-t.
• Nincsenek korlátok, nincsenek költségek — a Color Picker bármely modern böngészőben fut asztali gépen, tableten vagy telefonon. Nincs telepítés és nincsenek díjak.
• Bővítmények, amikor kell — az opcionális Chrome- és Edge-bővítményeink a pipettát közvetlenül a böngészőbe hozzák, így bármely oldalról mintát vehetsz és megőrizheted az előzményeidet.

Mire való

Az emberek sokféleképpen használják a Color Pickert:

• Tervezők és termékcsapatok gyakran veszik elő, amikor felületeket vagy márkapalettákat vázolnak. A kombinációk felfedezése és a színátmenetekhez szükséges CSS másolása gyors.
• Illusztrátorok és művészek a pipettával fotókból és festményekből merítenek ihletet. A színátmenet-eszköz segít a lágy árnyékolás és színátmenetek megtervezésében.
• Frontend-fejlesztők megbízhatnak benne, ha következetes színértékeket kell előállítani projektek között. A bővítmény megkönnyíti a mintavételt meglévő webhelyekről.
• Bárki, aki akadálymentességet vizsgál megnézheti a színeket különböző modellekben, és állíthatja az átlátszóságot, amíg a kontrasztirányelvek teljesülnek.

Első lépések

Kézikönyvre nincs szükség — íme egy gyors áttekintés:

• Válassz egy színt — kattints a paletta bármely pontjára. Azonnal látod a HEX-, RGB- és HSV-értékeket. Csúszkákkal finomhangold a színtónust, telítettséget, fényerőt és átlátszóságot.
• Mintavétel képből — húzz egy képfájlt az oldalra, vagy válassz egyet. Kattints a kívánt pixelre, és megjelennek a színkódok.
• Készíts színátmenetet — kattints a színátmenet-sávra, hogy stoppont adj hozzá és húzd őket; válts lineáris és radiális stílus között. Állítsd a szöget és az átlátszóságot, amíg tökéletes nem lesz.
• Másold és használd újra — a színeid és színátmeneteid automatikusan mentésre kerülnek. Másold a kódokat vagy a CSS-t, illeszd be a projektedbe, vagy oszd meg a csapattal.