Färgväljare – välj färger och konvertera färgkoder

Ja, Color Picker är gratis och kan användas utan registrering. Alla omvandlingar sker direkt i din webbläsare: ingen uppladdning, ingen loggning och inga serverförfrågningar. Bara sidans URL får den aktuella färgen som ?color=, så att du kan dela den via länk eller spara den som bokmärke.

Klicka på det färgade fältet bredvid ”Närmaste CSS-färg:”, välj mättnad och ljusstyrka i rutan och nyans med reglaget under. HEX-koden visas högst upp i resultatet och kan kopieras med knappen bredvid. Om du redan känner till färgen som RGB, HSL, HSV eller CMYK skriver du värdet i rätt fält. För en färg från ett foto eller en skärmbild använder du Image Color Picker, eftersom det här verktyget inte läser bilder. Till Image Color Picker

Skriv eller klistra in värdet i RGB-fältet, till exempel 24, 232, 136 eller rgb(24, 232, 136). HEX-fältet visar genast #18e888, samtidigt som HSL, HSV och CMYK uppdateras. Åt andra hållet anger du HEX-koden med eller utan # i HEX-fältet. Båda skrivsätten beskriver samma skärmfärg: HEX skriver de tre RGB-värdena från 0 till 255 som hexadecimala par från 00 till ff.

RGB beskriver en färg utifrån andelarna rött, grönt och blått ljus som en skärm blandar. HSL (nyans/mättnad/ljushet) och HSV (nyans/mättnad/ljusvärde) är två olika omräkningar av samma RGB-värde som är mer intuitiva för människor. HSL passar bra för att göra en färg ljusare eller mörkare, medan HSV passar för att blanda den med en palett utifrån nyans, mättnad och ljusvärde. CMYK (cyan/magenta/gult/svart) beskriver däremot inte ljusblandning utan färgblandning med bläck eller toner, som vid tryck.

CMYK-värdet är en förenklad, rent matematisk uppskattning utan färgprofil och avrundas till hela procent. Det hjälper dig att bedöma en skärmfärg inför tryck, men ersätter inte ett provtryck med tryckeriets profil. Du kan till exempel ange CMYK som 0%, 61%, 72%, 0% eller cmyk(0%, 61%, 72%, 0%).

Ja. Med reglaget för opacitet ställer du in 0 till 100 %, och resultatet visar då färgen som rgba() och hsla() för kopiering. Om du anger ett värde med alfa, till exempel en HEX-kod med 4 eller 8 tecken (#rrggbbaa), rgba() eller hsla(), anpassas reglaget till den opaciteten när du lämnar fältet. HEX-koden i resultatet har fortfarande sex tecken.

Det mäter på en skala från 1:1 till 21:1 hur tydligt två färger, till exempel text och bakgrund, skiljer sig åt. Verktygets nivåer: AAA från 7:1, AA från 4.5:1 för vanlig text och AA (stor text) från 3:1 för stor eller fet text. Color Picker visar förhållandet mellan din färg och svart respektive vitt. För valfria förgrunds- och bakgrundsfärger använder du Contrast Checker. Till Contrast Checker

Bredvid färgrutan visar verktyget den närmaste CSS-färgen. Det beräknar det euklidiska avståndet mellan din färg och varje namngiven CSS-färg i RGB-färgrymden och visar den närmaste, till exempel tomato för #ff6347. Om färgerna inte matchar exakt står det ”liknande” efter namnet. Du kan kopiera namnet och använda det i CSS i stället för HEX-koden, men om det står ”liknande” är det bara en uppskattning.