Färgväljare - Konvertera RGB, Hex, CMYK & HSV färgkoder

Vad är en färgväljare?

En färgväljare är ett verktyg för att välja en färg och läsa av dess värde i olika färgformat. Den här färgväljaren visar färgen i RGB (röd, grön, blå), hex, CMYK (cyan, magenta, gul, svart) och HSV (färgton, mättnad, valör) samtidigt. Om något format ändras uppdateras de andra direkt.

Så använder du färgväljaren

Det finns tre sätt att välja en färg.

Klicka var som helst i spektrumrutan för att välja färgton och mättnad. Den horisontella positionen anger färgtonen (vilken färgfamilj, till exempel röd eller blå). Den vertikala positionen anger mättnaden (hur klar eller urvattnad färgen ser ut). Ett reglage under spektrumet styr ljusstyrkan, från svart till vänster till full ljusstyrka till höger.

Det går också att skriva in exakta värden. Hexfältet accepterar koder som #2ECC71, med eller utan #. RGB-fälten accepterar vart och ett ett heltal från 0 till 255. CMYK-fälten accepterar vart och ett ett heltal från 0 till 100. Ett värde som skrivs in över det tillåtna intervallet begränsas till maxvärdet.

Varje färgformat har en kopieringsknapp bredvid sig. När man klickar på den kopieras värdet till urklippet och ett kort meddelande med texten ”Kopierat!” visas.

Färgmodeller förklarade

RGB

RGB beskriver en färg som en blandning av rött, grönt och blått ljus, samma tre färger som en skärm använder för att skapa varje bildpunkt. Varje kanal sträcker sig från 0 till 255. RGB(255, 0, 0) är rent rött, och RGB(0, 0, 0) är svart. Webbläsare, appar och videoprogram använder alla RGB eftersom det motsvarar hur skärmar fungerar.

Hex

En hexkod skriver en RGB-färg i basen 16 i stället för basen 10. #2ECC71 har tre teckenpar: 2E för rött, CC för grönt och 71 för blått. Varje par sträcker sig från 00 till FF. Hexkoder är vanliga inom webbdesign eftersom CSS accepterar dem direkt och de är kortare att skriva än rgb(). Det finns också en kortform med tre tecken: #0F0 betyder samma sak som #00FF00.

CMYK

CMYK används vid tryckning. En skrivare bygger upp färg genom att lägga cyan, magenta, gul och svart färg på vitt papper i lager, så modellen fungerar genom att subtrahera ljus i stället för att addera det. Varje kanal anges som en procentsats från 0 till 100. CMYK(0, 0, 0, 0) innebär att inget bläck alls används, så det vita papperet syns. CMYK kan inte återge alla färger som en skärm kan visa; vissa klara skärmfärger, särskilt vissa blå och gröna, ser mattare ut efter tryckning.

HSV

HSV beskriver färgton, mättnad och ljusstyrka var för sig. Färgtonen är färgfamiljen och anges i grader från 0° till 360°, där 0° är rött, 120° är grönt och 240° är blått. Mättnad anger hur klar färgen är, från 0 % (grå) till 100 % (helt färgmättad). Ljusstyrka anger hur ljus färgen är, från 0 % (svart) till 100 % (full ljusstyrka). HSV ligger nära hur människor naturligt beskriver färg, vilket är anledningen till att spektrumet och reglaget för ljusstyrka i det här verktyget bygger på modellen.

Formel för omvandling från RGB till hex

Varje RGB-kanal, ett tal från 0 till 255, omvandlas till ett tvåsiffrigt hexadecimalt tal, varefter de tre paren sammanfogas med ett # framför.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Formel för omvandling från RGB till CMYK

Först skalas varje RGB-kanal till ett bråk mellan 0 och 1. Svart (K) bestäms utifrån den största kanalen. Cyan, magenta och gul beräknas sedan utifrån de återstående kanalerna och K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

När K är lika med 1 (färgen är helt svart) sätts C, M och Y alla till 0 för att undvika division med noll.

Formel för omvandling från RGB till HSV

RGB skalas först till bråk mellan 0 och 1. Låt $C_{max}$ vara det största av de tre värdena, $C_{min}$ det minsta och $\Delta$ skillnaden mellan dem.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ annars } \frac{\Delta}{C_{max}}\times 100\%$

Färgtonen beror på vilken kanal som har högst värde:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## Räkneexempel Börja med RGB(46, 204, 113), en grön nyans. **Hex:** 46 i hex är `2E`, 204 är `CC` och 113 är `71`, vilket ger `#2ECC71`. **CMYK:** Efter skalning är R′ = 0,180, G′ = 0,800 och B′ = 0,443. Det största värdet är G′, så K = 1 − 0,800 = 0,20, vilket innebär 20 % svart. Sedan blir C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77 %, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0 % och Y = (1 − 0,443 − 0,20) / 0,800 × 100 ≈ 45 %. Resultatet är CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (grönt), $C_{min}$ = 0,180, så Δ = 0,620. Valören = 80 %. Mättnaden = 0,620 / 0,800 × 100 ≈ 77 %. Eftersom grönt är störst blir H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Resultatet är HSV(145°, 77 %, 80 %). ## Tillgängliga färgval Ungefär 1 av 12 män och cirka 1 av 200 kvinnor har någon form av nedsatt färgseende, oftast en försämrad förmåga att skilja rött från grönt. En design som enbart använder färg för att förmedla betydelse, till exempel ett rött felmeddelande utan ikon eller etikett, fungerar inte för dessa användare. En textetikett, ikon eller ett mönster bredvid färgen löser problemet. Text behöver också ha tillräcklig kontrast mot bakgrunden. Web Content Accessibility Guidelines (WCAG) rekommenderar ett kontrastförhållande på minst 4,5:1 för normal text och 3:1 för stor text. För att mäta kontrasten krävs ett särskilt verktyg för kontrastkontroll, eftersom det här verktyget inte beräknar kontrastförhållanden. ## Vanliga frågor **Vad är skillnaden mellan RGB och CMYK?** RGB används för skärmar och bygger upp färg genom att addera rött, grönt och blått ljus. CMYK används för tryckning och bygger upp färg genom att lägga bläck på papper i lager, vilket i stället subtraherar ljus. RGB kan skapa klarare färger än CMYK eftersom bläck inte kan återge hela det färgområde som en skärm kan avge. **Varför ser tryckta färger annorlunda ut än på skärmen?** En skärm avger ljus direkt, medan en tryckt sida endast reflekterar det ljus som träffar den. CMYK-bläck täcker också ett mindre färgområde än RGB-ljus, så vissa klara skärmfärger kan inte återges exakt på papper. **Vad betyder symbolen # i en hexkod?** Den markerar de följande tecknen som en hexadecimal färgkod, enligt en konvention från den tidiga HTML- och CSS-utvecklingen. Utan den känner en webbläsare inte igen värdet som en färg. **Varför har vissa hexkoder bara tre tecken?** En kod med tre tecken är en kortform av en kod med sex tecken, där varje par upprepar samma siffra. `#0F0` expanderas till `#00FF00`. **Är omvandlingarna mellan formaten exakta?** RGB till hex är exakt, eftersom det är samma tal skrivna i en annan bas. RGB till CMYK är en approximation, eftersom omvandlingen sker mellan ljus och bläck, som är olika fysiska processer med olika färgomfång. **Kan det här verktyget välja en färg direkt från en bild eller webbsida?** Nej. Ett webbläsartillägg eller operativsystemets inbyggda färgväljare, till exempel Digital Color Meter i macOS, kan läsa av en färg från skärmen. Det resulterande värdet kan sedan skrivas in i det här verktyget för att omvandlas.