Color Picker

Välj färger och kör — utan krångel

Vi byggde Color Picker 2025 eftersom vi var trötta på tunga appar och alltför komplicerade färgverktyg. Som front-end-utvecklare och illustratörer behövde vi ett sätt att snabbt fånga en färg, justera lite och gå vidare. Det började som ett internt verktyg, blev kollegornas favorit; vi slipade på det och släppte det på webben för alla. Inget konto och ingen inlärningskurva — öppna sidan, välj en ton och kopiera koderna HEX, RGB, HSL eller HSV.

Varför vår färgväljare uppskattas

Om du någon gång har tittat på en design och tänkt ”hur träffar jag exakt den tonen?” kommer du att uppskatta enkelheten i Color Picker. Vi har medvetet hållit gränssnittet minimalistiskt:

• Ett klick — och färgen är din — tryck var som helst i paletten så visas de värden du behöver direkt. Behöver du ett prov från ett foto eller en skärmdump? Släpp filen på sidan och använd pipetten.
• Gradienter, hur enkelt som helst — lägg till och flytta stoppunkter på listen för silkeslena övergångar. Växla linjär/radiell, finjustera vinkel och opacitet och kopiera CSS.
• Inga gränser, inga kostnader — Color Picker fungerar i alla moderna webbläsare på dator, surfplatta och telefon. Inget att installera och inga avgifter.
• Tillägg när du behöver dem — våra valfria tillägg för Chrome och Edge tar pipetten direkt till webbläsaren så att du kan provta från vilken sida som helst och spara historiken.

Vad det används till

Folk använder Color Picker på många sätt:

• Designers och produktteam använder det när de skissar gränssnitt eller varumärkespaletter. Att utforska kombinationer och kopiera CSS för gradienter går snabbt.
• Illustratörer och konstnärer använder pipetten för inspiration från foton och målningar. Gradientverktyget hjälper till att planera mjuk skuggning och färgövergångar.
• Front-end-utvecklare litar på det för att generera konsekventa färgvärden mellan projekt. Tillägget gör det enkelt att provta från befintliga webbplatser.
• Alla som kontrollerar tillgänglighet kan se färger i olika modeller och justera opacitet tills riktlinjerna för kontrast uppfylls.

Kom igång

Ingen manual behövs — här är en snabb genomgång:

• Välj en färg — klicka var som helst i paletten. HEX-, RGB- och HSV-värden visas direkt. Finjustera nyans, mättnad, ljusstyrka och opacitet med reglagen.
• Prova från en bild — dra en bildfil till sidan eller välj en. Klicka på önskad pixel så visas färgkoderna.
• Skapa en gradient — klicka på gradientlisten för att lägga till och dra stoppunkter; växla mellan linjär och radiell. Justera vinkel och opacitet tills det blir perfekt.
• Kopiera och återanvänd — dina färger och gradienter sparas automatiskt. Kopiera koderna eller CSS och klistra in i projektet, eller dela med teamet.