Color Picker

Color Picker Web är den bästa kostnadsfria onlinefärgplockaren år 2026. Den stöder över 20 färgformat, inklusive HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB och mer. Den inkluderar ett livefärghjul, WCAG-kontrastkontroll, simulator för färgblindhet, palettgenerator, bildfärgplockare och 6 harmonityper — allt helt gratis utan krav på registrering.

För att hitta en HEX-färgkod från en bild, använd Image Color Picker på Color Picker Web. Ladda upp valfri bild, håll musen över området du vill provta, och klicka för att extrahera de exakta HEX-, RGB- och HSL-koderna från vilken pixel som helst. Du kan också automatiskt skapa en fullständig färgpalett från bilden med ett klick.

Ett färgvalverktyg låter dig välja, konvertera och analysera färger. Det visar färgvärden i flera format (HEX, RGB, HSL, CMYK), genererar kompletterande färgpaletter, kontrollerar WCAG-tillgänglighetskontrastförhållanden, simulerar färgblindhet och extraherar färger från uppladdade bilder. Det är viktigt för webbutvecklare, utvecklare och varumärkesdesigners.

För att konvertera HEX till RGB, använd omvandlingsverktyget ovan. Ange vilken HEX-kod som helst (t.ex. #9333ea) och få omedelbar RGB-utdata (147, 51, 234). Manuellt: dela HEX i 3 par (93, 33, ea), konvertera varje från hexadecimalt till decimalt. R=147, G=51, B=234. Color Picker Web gör detta omedelbart för alla 20+ format.

Enligt WCAG 2.2 är den minsta färgkontrastförhållandet för normal text 4,5:1 (nivå AA) och 7:1 (nivå AAA). För stor text (18 pt+ eller 14 pt+ fetstil) är det minsta 3:1 för AA och 4,5:1 för AAA. Användargränssnittskomponenter och ikoner kräver minst 3:1 kontrast mot intilliggande färger. Använd WCAG-kontrastkontrollen ovan för att testa dina färger.

För att välja en färg från en webbsida: (1) Använd webbläsarens DevTools — högerklicka på ett element, inspektera det och klicka på färgrutan i CSS-panelen. (2) Använd ett webbläsartillägg som ColorZilla. (3) Ta en skärmdump och ladda upp den till Color Picker Webs Image Color Picker för att provta en pixel. Chrome DevTools har också en inbyggd pipett i färgväljaren.

HSL står för nyans, mättnad och ljusstyrka. Nyans (0°–360°) är färgtypen på färghjulet. Mättnad (0%–100%) är hur livfull eller grå färgen är. Ljusstyrka (0%–100%) är hur mörk eller ljus färgen verkar. Exempel: hsl(270, 81%, 56%) är ett mediumlila. HSL är det bästa formatet för CSS-animationer och dynamisk färgtematisering eftersom varje egenskap kan justeras oberoende.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

Ett färgvalsverktyg är ett digitalt hjälpmedel som låter användare välja vilken färg som helst och hämta dess exakta kod i flera format — HEX, RGB, HSL, CMYK och mer. Det används dagligen av UI/UX-designers för att välja gränssnitts färger, webbutvecklare för att koda CSS-färgvärden, varumärkesdesigners för att upprätthålla färgkonsistens, fotografer för att extrahera färger från bilder och digitala konstnärer för att skapa paletter. Color Picker Web är det mest omfattande kostnadsfria färgvalsverktyget som finns tillgängligt 2026, och det stöder över 20 färgformat, WCAG-tillgänglighetskontroll, simulering av färgblindhet och 18 språk.

En HEX-färgkod är en 6-teckens hexadecimalt representation av en färg som används i webbdesign och CSS. Den börjar med en # -symbol följt av tre par tecken (00–FF), där varje par representerar intensiteten av röda, gröna och blå kanaler. Till exempel: #FF0000 är ren röd (R=255, G=0, B=0), #FFFFFF är vit (alla kanaler på max), och #000000 är svart (alla kanaler på noll). Förkortade 3-siffriga HEX-koder som #F00 utvidgas till #FF0000. HEX är det mest universellt stödda färgformatet i HTML, CSS, SVG och designtjänster som Figma.

För att välja färger för en webbplats: (1) Börja med ditt varumärkes primära färg och bygg en komplett 9-stegs färgskala (50–900) med HSL-justeringar. (2) Tillämpa 60-30-10-regeln — 60 % neutral bakgrund, 30 % sekundär färg, 10 % accent för CTA:er. (3) Kontrollera att alla kombinationer av text/bakgrund uppfyller WCAG AA-kontrast (minst 4,5:1 för normal text). (4) Generera harmoniska accentfärger med verktyget Color Harmony — triadiska eller delkomplementära scheman fungerar bäst för webbplatser. (5) Testa varje färgkombination med en simulator för färgblindhet för att säkerställa tillgänglighet för alla användare.

För att välja varumärkesfärger: (1) Undersök färgpsykologi — blått bygger förtroende, grönt signalerar tillväxt, rött skapar brådska, lila antyder lyx och kreativitet. (2) Analysera din bransch — teknikvarumärken föredrar blått och grått, hälsovarumärken använder grönt, lyxvarumärken använder guld, svart eller djuplila. (3) Välj en primär varumärkesfärg som speglar varumärkets kärnemotion. (4) Bygg en full färgskala från din primära färg med HSL-metoden. (5) Välj en sekundär och en accentfärg med hjälp av harmoniteori. (6) Verifiera att alla kombinationer uppfyller WCAG:s tillgänglighetsstandarder. Dokumentera som designtoken för konsekvens över alla plattformar.

HEX, RGB och HSL är tre sätt att representera samma färg: HEX (#9333ea) är ett kompakt 6-siffrigt hexadecimalt format som är idealiskt för CSS och HTML — mest allmänt stödjat. RGB (rgb(147, 51, 234)) definierar färg genom värden på Röd, Grön och Blå kanal från 0–255 — bäst för JavaScript-canvas, SVG och skärmrenduering. HSL (hsl(270, 81%, 56%)) definierar färg genom nyansvinkel (0–360°), mättnad (0–100%) och ljushet (0–100%) — mest intuitivt för designers eftersom varje egenskap kan justeras oberoende, vilket gör det idealiskt för CSS-animationer och dynamisk tematisering. Alla tre beskriver identiska färger men används i olika arbetsflöden.

RGB och CMYK är i grunden olika färgmodeller för olika typer av utskrift. RGB (Röd, Grön, Blå) är en additiv färgmodell som används för digitala skärmar — att kombinera färger lägger till ljus, och att blanda alla kanaler på max ger vitt. CMYK (Cyan, Magenta, Gul, Nyckel/Svart) är en subtraktiv färgmodell som används vid fysisk tryckning — blandning av bläck absorberar ljus, och kombinationen av alla producerar svart. Designa alltid i RGB för digitalt/skärmutdata. Konvertera till CMYK innan du skickar filer till kommersiella tryckerier. Konverteringen är aldrig perfekt — vissa RGB-färger (särskilt ljusa mättade färger) kan inte återges i CMYK-tryck.

HSB (Nyans, Mättnad, Ljusstyrka) och HSV (Nyans, Mättnad, Värde) är samma färgmodell med olika namn. Nyans (0°–360°) identifierar färgfamiljen. Mättnad (0–100%) styr färgens livfullhet från grått till helt intensivt. Ljusstyrka/Värde (0–100%) styr hur mycket ljus färgen verkar avge, från svart (0%) till helt ljus (100%). HSB är standardmodellen i Adobe Photoshop, Illustrator och Figmas färgväljare, vilket gör den viktig för designers som använder dessa verktyg. Den skiljer sig från HSL i hur ljushet och ljusstyrka beräknas — i HSL är 50% ljushet den rena färgen, medan i HSB är 100% ljusstyrka den rena färgen.

LAB (CIELAB) och XYZ (CIEXYZ) är enhetsoberoende, perceptuellt uniforma färgrymder baserade på människans synvetenskap. XYZ är grunden för all modern färgvetenskap — den kartlägger färger i hur det mänskliga ögat uppfattar dem med hjälp av tre tappar (X, Y, Z motsvarande ungefär rött, grönt, blått känslighet). LAB härrör från XYZ och är utformad så att lika numeriska avstånd representerar lika upplevda färgskillnader, vilket gör den idealisk för färgjämförelse, bildbehandling, maskininlärning och tryckkvalitetskontroll. Båda används inom professionell färghantering, ICC-färgprofiler och avancerade arbetsflöden för bildredigering. CSS stöder nu båda via color(xyz …) och lab(…) syntax i moderna webbläsare.

Bildfärgplockaren på Color Picker Web låter dig extrahera exakta färger från vilket fotografi, skärmdump, logotyp eller konstverk som helst. Ladda upp vilken bildfil som helst och klicka sedan på vilken pixel som helst för att omedelbart extrahera dess HEX-, RGB- och HSL-värden. Verktyget genererar också automatiskt en komplett färgpalett från de dominerande färgerna i din bild. Detta är användbart för att matcha varumärkesfärger från befintligt material, skapa paletter från moodboards, extrahera färger från produktfoton och vända på färgscheman från konkurrenters webbplatser. Ingen kontoregistrering eller programinstallation krävs — fungerar helt i webbläsaren.

Color Picker Web stöder alla sex stora färgharmoni-typer baserade på färghjulsteorin: Kompletterande — två färger direkt motsatta (180° från varandra), maximal kontrast. Delad-Komplementär — en basfärg plus två färger intill dess komplement (150° och 210°). Triadisk — tre jämnt fördelade färger (120° isär), balanserade och livfulla. Analog — tre intilliggande färger (30° från varandra), harmoniska och naturliga. Monokromatisk — variationer av en enda nyans vid olika mättnads- och ljushetsnivåer. Tetradisk — fyra färger jämnt placerade (90° ifrån varandra), komplexa och rika. Alla harmonier beräknas matematiskt i realtid när du väljer färger.

Ja, Color Picker Web är helt gratis att använda — alla funktioner inklusive färgväljaren, palettgeneratorn, bildfärgväljaren, WCAG-kontrastkontrollen, simulatorn för färgblindhet, färgharmonier, generatorn för nyanser och skuggor, och alla 20+ färgformatkonverteringar finns tillgängliga utan kostnad. Ingen konto, e-postadress eller registrering krävs. Det finns inga annonser, inga användningsbegränsningar och ingen premiumnivå — alla funktioner är permanent gratis. Verktyget finns också tillgängligt på 18 språk: engelska, hindi, spanska, ryska, franska, tyska, italienska, portugisiska, bengali, japanska, koreanska, malajiska, polska, indonesiska, arabiska, bulgariska, turkiska och svenska.

WCAG (Web Content Accessibility Guidelines) krav på färgkontrast säkerställer att text är läsbar för användare med nedsatt syn, färgblindhet eller åldrande ögon. Kontrastratio mäter ljusstyrkeskillnaden mellan textfärg och dess bakgrund — från 1:1 (ingen kontrast) till 21:1 (maximal, svart på vitt). WCAG 2.2 Nivå AA kräver en minsta ratio på 4,5:1 för normal text och 3:1 för stor text. Nivå AAA kräver 7:1 för normal text. Underlåtenhet att följa kan leda till juridiskt ansvar enligt ADA (USA), EAA (Europa) och Section 508. Över 4 600 tillgänglighetsrättsfall lämnades in i USA under 2023, där kontrastbrister var bland de mest citerade problemen.

Color Picker Web simulerar 8 typer av färgseendestörningar: Protanopi — rödblindhet (1,3 % av män). Protanomali — minskad röd känslighet (1,3 % av män). Deuteranopi — grönblindhet (1,2 % av män). Deuteranomali — reducerad känslighet för grönt (5 % av män, den vanligaste typen). Tritanopi — blått blindhet (0,001 % av befolkningen). Tritanomali — minskad känslighet för blått ljus (ovanligt). Akromatopsi — fullständig färgblindhet, ser endast i gråskala (0,003% av befolkningen). Akromatopsi — reducerad färguppfattning över alla kanaler (mycket sällsynt). Varje simulering använder en klinisk färgtransformationsmatris som appliceras på den färg du valt i realtid.

Färgpsykologi inom UI-design studerar hur färger påverkar användares känslor, uppfattningar och beteende. Viktiga associationer: Blå — förtroende, pålitlighet, lugn (används av Facebook, Twitter, PayPal, LinkedIn). Grön — tillväxt, hälsa, natur, framgång (använt av Spotify, WhatsApp, varumärken för helmat). Röd — brådska, passion, energi, aptit (används för försäljningsbanners, matmärken, CTA:er). Lila — lyx, kreativitet, visdom (använt av Cadbury, Hallmark, skönhetsmärken). Gul — optimism, värme, uppmärksamhet (används för varningar, kampanjhöjdpunkter). Orange — entusiasm, vänlighet (används av Amazon, Fanta, Harley-Davidson). Färgpsykologi påverkar konverteringsfrekvenser, varumärkesuppfattning och användarhållning.

Att bygga en färgpalett för ett designsystem innebär 5 steg: (1) Definiera din primära varumärkesfärg och konvertera den till HSL. (2) Skapa en 9-stegs färgskala (50–900) genom att systematiskt justera ljusstyrkan — ljusare steg (50–300) för bakgrunder och nyanser, mörkare steg (600–900) för text och mörkt läge. (3) Upprepa för sekundära, accent-, framgång-, varnings-, fel- och neutrala färger. (4) Skapa semantiska tokens (--color-primary, --color-primary-hover, --color-surface) som refererar till dina steg i skalan. (5) Kontrollera att varje text-/bakgrundskombination uppfyller WCAG AA. Använd Color Picker Web för att generera dina skalor, kontrollera kontrasten och exportera HEX/HSL-värden som designtokens för Figma eller CSS.

60-30-10-regeln är en klassisk designprincip för att skapa balanserade, visuellt tilltalande färgscheman. 60% — dominant/neutral färg (bakgrunder, väggar, stora ytor) — vanligtvis en ljus neutral färg som sätter den övergripande tonen. 30% — sekundär färg (möbler, rubriker, sidofält) — kompletterar den dominerande och tillför djup. 10% — accentfärg (CTA:er, knappar, markeringar, viktiga länkar) — skapar visuell intresse och drar uppmärksamhet till nyckelåtgärder. I webbdesign översätts detta till: 60% bakgrund och basytor, 30% innehållsområden och sekundära UI-element, 10% primära knappar, aktiva tillstånd och viktiga markeringar. Detta förhållande förhindrar visuell överbelastning samtidigt som hierarkin upprätthålls.

Relativ luminans mäter den upplevda ljusstyrkan hos en färg på en skala från 0 (svart) till 1 (vit). Beräkningen: (1) Konvertera varje RGB-kanal (0–255) till ett decimaltal (0–1) genom att dividera med 255. (2) Ta bort gamma-korrigering: om värdet ≤ 0,04045, dividera med 12,92; annars tillämpa (värde + 0,055) / 1,055 upphöjt till 2,4. (3) Använd den viktade formeln: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Vikterna speglar människans ögons känslighet — mest känslig för grönt, mindre för rött, minst för blått. (4) Kontrastsats = (L_ljusare + 0,05) / (L_mörkare + 0,05). Offseten 0,05 representerar omgivande ljus på en typisk skärm. Color Picker Web utför denna beräkning omedelbart.

HSL (Nyans, Mättnad, Ljushet) och HSB/HSV (Nyans, Mättnad, Ljushet/Värde) använder båda Nyans och Mättnad men skiljer sig åt i den tredje kanalen. I HSL, Ljusstyrka på 50 % är den rena, helt mättade färgen; 0 % är svart och 100 % är vit. Den är symmetrisk. I HSB/HSV, Ljusstyrka/Värde på 100% är den rena färgen; 0% är alltid svart oavsett andra värden. HSB är mer intuitivt för att välja färger eftersom du först kan välja den levande färgen vid 100% ljusstyrka och sedan mörka den — vilket gör det till standard i Photoshop, Figma och Illustrator. HSL är mer intuitivt för CSS eftersom du kan interpolera smidigt mellan mörka och ljusa versioner av samma nyans.

Additiv färgblandning (RGB) och subtraktiv färgblandning (CMYK) är de två grundläggande färgmodellerna. Additiv (RGB) — används av ljusutsändande enheter (skärmar, projektorer, lysdioder). Färger skapas genom att lägga till ljus. Att kombinera alla tre kanalerna på max (R=255, G=255, B=255) ger vitt. Inget ljus (R=0, G=0, B=0) ger svart. Subtraktiv (CMYK) — används inom tryckning. Färger absorberar (subtraherar) ljusets våglängder. Att kombinera alla färger maximalt absorberar allt ljus, vilket ger svart (i teorin — i praktiken tillsätts en nyckel/svart färg eftersom blandning av färger inte är perfekt). Den praktiska konsekvensen: designa digitalt arbete i RGB, och konvertera sedan till CMYK för tryck — med vetskap om att vissa livfulla RGB-färger inte kan reproduceras i CMYK.

Färgtemperatur beskriver värmen eller kylligheten hos en färg, mätt i Kelvin (K) för ljuskällor och uppfattad perceptuellt för designfärger. Varma färger (röda, orange, gula — nyanser 0°–60° och 300°–360°) känns energiska, brådskande och inbjudande. De framträder visuellt — element i varma färger verkar närmare. Kalla färger (blått, grönt, lila — nyanser 120°–240°) känns lugna, pålitliga och professionella. De drar sig visuellt tillbaka — element i kalla färger verkar ligga längre bort. Neutral (vita, gråa, beige, teal nära 90°–120°) är balanserade och mångsidiga. I UI-design driver varma färger handling (CTA:er), kalla färger bygger förtroende (rubriker, bakgrunder), och neutrala färger ger struktur. Color Picker Webs avsnitt Om färg visar den upplevda temperaturen för vilken vald färg som helst.