Färgväljare & palettgenerator

Varje färg på skärmen kan beskrivas på tre olika sätt, och det här verktyget håller alla tre synkade: HEX är den korta skrivformen i CSS och designverktyg, RGB anger hur mycket rött, grönt och blått ljus som blandas för att ge färgen, och HSL — nyans, mättnad, ljushet — beskriver den som människor faktiskt tänker på färg: vilken nyans det är, hur stark den är och hur ljus eller mörk. Dra i den inbyggda färgrutan, skriv en HEX-kod eller justera valfritt R/G/B- eller H/S/L-fält direkt, så uppdateras alla andra fält på en gång. Du kan alltså växla mellan det sätt du är van att tänka på färg utan att räkna själv.

Färghjulet ligger till grund för sex klassiska harmoniregler, som alla genereras automatiskt utifrån den basfärg du väljer. Komplementfärger parar en färg med dess motsats för maximal kontrast. Analoga färger väljer grannar på hjulet för ett lugnt och sammanhängande intryck. Triad och tetrad fördelar tre eller fyra färger jämnt runt hjulet för en livlig men ändå balanserad palett. Delat komplement mjukar upp ett komplementpar genom att använda de två färgerna bredvid motsatsen i stället för själva motsatsen. Monokromatisk håller sig till en enda nyans och varierar bara ljushet, ofta det säkraste valet för ett gränssnitt som behöver en enhetlig varumärkesfärg i flera nyanser.

Alla bra paletter börjar inte i färgteori — ibland vill man bara se vad som dyker upp. Den slumpmässiga palettgeneratorn (tryck på mellanslag eller klicka på Generera) skapar fem färger på en gång, med nyans och ljushet justerade för att undvika sladdriga eller alltför pastelliga resultat. Klicka på låsikonen på en färgruta du vill behålla och generera igen: bara de olåsta färgerna ändras, så du kan bygga upp en palett steg för steg, ungefär som i verktyg som Coolors. Klicka på valfri färgruta för att kopiera dess HEX-kod, eller använd knapparna under paletten för att kopiera hela uppsättningen som CSS-variabler, SCSS-variabler, ett Tailwind-konfigurationsutdrag eller en JSON-lista, eller exportera en Adobe .ase-färgfil för Illustrator och Photoshop. Du kan också hämta en palett från vilken bild som helst (bearbetas lokalt, laddas aldrig upp) och spara paletter du gillar i webbläsaren till senare.

Att välja en snygg färg är inte detsamma som att välja en användbar — text i en färg som ligger för nära bakgrundens ljushet kan vara oläslig, och Web Content Accessibility Guidelines (WCAG) sätter tydliga gränser för det: ett kontrastförhållande på minst 4,5:1 för normal text för nivå AA, och 7:1 för den strängare nivån AAA. Kontrastkontrollen beräknar det exakta förhållandet mellan din valda färg och både vit och svart text med samma formel för relativ luminans som WCAG-specifikationen definierar, och visar om varje kombination klarar kraven. På så sätt upptäcker du en knapp eller rubrik med för låg kontrast innan den publiceras, inte efteråt.