Färgväljare (Color Picker)

Välj färger och kopiera användbara värden

En pålitlig färgväljare ska göra mer än att visa en snygg ruta. Designers, utvecklare och innehållsskapare behöver ofta samma färg i flera format beroende på användningen. CSS accepterar HEX, RGB och HSL, designsystem dokumenterar ofta tokens som HEX, och snabba prototypjusteringar är ofta enklare i HSL eftersom nyans, mättnad och ljushet kan ändras var för sig. Det här verktyget visar formaten sida vid sida så att du väljer färgen en gång och kopierar det värde som passar ditt arbetsflöde.

Allt sker lokalt i webbläsaren. Färgvalet, omvandlingarna och kopieringsknapparna körs med JavaScript på klientsidan, så det krävs inget konto, ingen uppladdning och ingen bearbetning på distans. Det gör verktyget användbart för privata varumärkespaletter, osläppta produktteman, kunduppdrag och snabba UI-experiment som inte ska lämna din dator.

Använda toner och nyanser i gränssnitt

Toner och nyanser hjälper en enda varumärkesfärg att bära ett helt gränssnitt. Ljusare toner fungerar för diskreta bakgrunder, hover-tillstånd, notispaneler och markerade rader. Mörkare nyanser kan ge kanter, nedtryckta tillstånd, accenter för mörkt läge eller starkt betonad text när originalfärgen är för ljus. Färgrutorna här behåller nyans och mättnad men ändrar ljusheten, vilket ger en enkel skala som känns besläktad med basfärgen.

Se den genererade skalan som en startpunkt snarare än ett färdigt designsystem. Mänsklig uppfattning är inte helt linjär, och vissa nyanser behöver justeras manuellt för att upplevas som jämnt fördelade. Blått och lila tål ofta stora ljushetsintervall, medan gult kan kräva mörkare nyanser för läsbar text. Kopiera värdena, testa dem i den riktiga komponenten och finslipa de steg som betyder mest.

Välja mellan HEX, RGB och HSL

HEX är kompakt och vanligt vid överlämning av design, vilket gör det till ett bra standardval för dokumentation. RGB är praktiskt när ett verktyg ber om numeriska röda, gröna och blå kanaler eller när du tänker direkt i skärmljus. HSL är oftast det vänligaste formatet för små justeringar: flytta nyansen för att rotera runt färghjulet, sänk mättnaden för en lugnare ton eller ändra ljusheten för en tonad eller mörkare variant. Om du har alla tre synliga minskar risken för misstag när du växlar mellan designverktyg, CSS-filer och komponentbibliotek.