Artikel
Färgverktyg för webben: hex, paletter och tillgänglighet
Att välja färger till en webbplats verkar enkelt tills du ställs inför hex-koder, RGB-tripletter och HSL-vinklar som alla beskriver samma sak på olika sätt. Den här artikeln förklarar hur formaten hänger ihop, hur du gör en enda varumärkesfärg till en användbar palett, och hur du säkerställer att resultatet förblir läsbart för personer som ser färger annorlunda.
Hex, RGB och HSL beskriver samma färg
En färg på skärmen blandas av rött, grönt och blått ljus. Hex-notation skriver dessa tre kanaler som en kod på sex tecken, till exempel #2563eb, där varje teckenpar är en kanal från 00 till ff. RGB skriver samma tre tal i decimalform, från 0 till 255, vilket är lättare att läsa men inte säger något mer. HSL tar en annan vinkel: den beskriver en färg med dess nyans (en position på färghjulet från 0 till 360 grader), dess mättnad (hur livfull den är) och dess ljushet (hur nära vitt eller svart den ligger). HSL är det format som formgivare tar till när de vill putta lite på en färg, eftersom att höja ljusheten eller flytta nyansen är en enda intuitiv ändring i stället för tre sammankopplade tal. Ett konverteringsverktyg låter dig röra dig mellan alla tre, så att du kan läsa ett värde i ett format och använda det i ett annat.
Att göra en palett av en enda färg
En enda varumärkesfärg räcker sällan. En palett som fungerar behöver oftast en primärfärg, en eller två accenter och en uppsättning neutrala gråtoner för text och bakgrunder. Förhållandena mellan färger följer enkla regler på färghjulet: komplementfärger ligger mitt emot varandra, analoga färger ligger bredvid varandra för en lugn känsla, och en triad sprider tre färger jämnt för kontrast utan att de skär sig. Ett verktyg för färgscheman tillämpar dessa regler på din utgångsfärg och ger dig de matchande hex-koderna, så att du inte behöver räkna ut vinklarna för hand. Om du redan har en bild vars stämning du gillar läser en palettextraktor ut de dominerande färgerna ur den, vilket är ett snabbt sätt att bygga en webbplats utifrån ett foto eller en logotyp.
Kontrast och färgblindhet
En palett som ser bra ut på din skärm kan ändå svika läsare. Ungefär en av tolv män och en av tvåhundra kvinnor har någon form av nedsatt färgseende, vanligast är svårigheter att skilja rött från grönt. Om din enda signal för ett fel är röd text på en grön knapp missar de läsarna den. Lösningen är inte att undvika färg utan att aldrig förlita sig på enbart färg: kombinera den med en ikon, en etikett eller en form, och håll tillräcklig ljushetskontrast mellan text och dess bakgrund. En färgblindhetssimulator visar hur din palett ser ut under de vanliga typerna av färgseende, så att du kan fånga ett problem innan det går i drift i stället för efter ett klagomål.
Att göra allt detta i webbläsaren
Inget av dessa steg behöver en server. Att konvertera en hex-kod, generera ett schema, läsa ut färger ur en bild och simulera färgblindhet är alla små beräkningar som en webbläsare klarar omedelbart. Det spelar roll när bilden du tar prover från är en outgiven design eller en kundlogotyp: med verktygen här stannar filen på din enhet och inget laddas upp. Du får samma resultat som du skulle få från en onlinetjänst, utan att lämna ifrån dig materialet. Färgkonverteraren, färgschemageneratorn, palettextraktorn och färgblindhetssimulatorn körs alla lokalt och fungerar likadant offline när sidan väl har laddats.
OKLCH och bredare färgrymder
Hex, RGB och HSL beskriver alla färger inom sRGB-rymden som skärmar har använt i många år. Nyare skärmar visar mer, och CSS kan nu nå det med funktionen color() och färgrymden Display P3, som lägger till livliga gröna och röda nyanser som sRGB inte kan återge. Den större förändringen är OKLCH, ett sätt att skriva färg som ljushet, chroma och nyans som speglar hur ögat faktiskt uppfattar ljusstyrka. I HSL ser en gul och en blå färg vid samma 50% ljushet inte alls likadana ut: den gula uppfattas som ljus, den blå som mörk. I OKLCH ger ett fast ljushetsvärde med enbart nyansändringar en jämn uppfattad ljusstyrka. Det gör det praktiskt att bygga en palett där varje nyans träffar samma kontrastmål genom att låsa ett enda värde, i stället för att finjustera varje färg för hand.
Verktyg i den här artikeln
- FärgkonverterareKonvertera färger mellan HEX, RGB, HSL, HSV och CMYK. WCAG-kontrastkontroll ingår. Ingen uppladdning.
- FärgschemageneratorGenerera komplementära, analoga, triadiska, tetradiska och monokromatiska paletter från en basfärg. Ingen uppladdning.
- FärgpalettextraherareExtrahera dominerande färger från en bild som HEX-nyanser. Kopiera valfri färg. Ingen uppladdning.
- FärgblindhetssimulatorSimulera protanopi, deuteranopi, tritanopi och akromasi på en bild. Ingen uppladdning.
Vanliga frågor
Vad är skillnaden mellan hex och RGB?
Det är två sätt att skriva samma färg. Hex packar de röda, gröna och blå kanalerna i en kod på sex tecken i bas 16, medan RGB listar samma tre kanaler som decimaltal från 0 till 255. #ff0000 och rgb(255, 0, 0) är samma röda färg. Hex är kompakt och vanligt i CSS och designfiler, RGB är lättare att läsa vid en snabb blick, och att konvertera mellan dem ändrar ingenting hos själva färgen.
Hur vet jag om mina färger är läsbara för färgblinda användare?
Kör din palett genom en färgblindhetssimulator, som ritar om dina färger så som någon med varje vanlig typ av färgseende skulle se dem. Håll utkik efter par som faller samman till samma ton, särskilt rött och grönt. Den säkraste vanan är att aldrig använda färg som enda ledtråd: backa upp den med text, en ikon eller ett mönster, och håll en tydlig ljushetsskillnad mellan förgrund och bakgrund så att betydelsen överlever även när nyansen inte gör det.