Färgverktyg

Gratis online-färgverktyg — färgväljare, palettgenerator, formatomvandlare, simulator för färgblindhet, gradientgenerator, WCAG-kontrastkontroll, extraktor för dominerande färg, blandare, färgtemperatur och traditionella kinesiska färger. Allt i webbläsaren.
För att skriva HTML/CSS (hex/rgb/hsl-motsvarigheter, 148 namngivna färger, 216 webbsäkra paletter, färdiga deklarationer) använd hjälpverktyget HTML-färgkoder.
HEX:#ff0000
RGB:255, 0, 0
HSL:0, 100%, 50%
Så fungerar varje läge
Väljare: Den stora kvadraten är en mättnads-ljushetskarta vid den aktuella nyansen — från vänster till höger ökar mättnaden, uppifrån och ned minskar ljusheten. Klicka var som helst för att välja färg. Den smala vertikala stapeln till höger är nyansreglaget (0° till 360°) — dra i den för att ändra basnyansen, så ritas kvadraten om. Till höger visas den valda färgen i formaten HEX, RGB och HSL — klicka på valfritt värde för att kopiera det.
Palett: Den vänstra färgväljaren och den högra redigeringsrutan lagrar samma basfärg — de är synkade åt båda hållen (välj en färg eller skriv ett hexvärde, så uppdateras båda). De fem palettraderna nedan är alla härledda från denna basfärg genom att rotera dess nyans runt färghjulet: komplementär (nyans +180°, starkast kontrast), triadisk (+120° / +240°, balanserad triad), tetradisk (+90° / +180° / +270°, rektangulär fyrfärgsuppsättning), analog (-30° / bas / +30° / +60°, harmoniska grannar) och delat komplementär (+150° / +210°, mjukare än den rena komplementära). Det första färgprovet i varje rad är alltid basfärgen själv, och de övriga är dess nyansroterade varianter.
Konvertera: Ange valfri giltig färg — HEX (#3b82f6), CSS-funktion (rgb(59,130,246) / hsl(217,90%,60%)) eller namngiven färg (dodgerblue) — och få omedelbar omvandling till alla huvudformat. Formatrullistan kan ge tolkaren ett tips om autodetekteringen väljer fel format. Utdata visar HEX, RGB (0–255), HSL (grader, %, %), HSV och CMYK. Klicka på valfritt värde för att kopiera det.
Färgblindhet: Ladda upp en bild och välj en typ av färgseendebrist att simulera. Verktyget tillämpar en konmatristransformation på varje bildpunkt och mappar om RGB-värdena för att ungefärligt visa hur personer med olika former av färgblindhet uppfattar bilden. Den vänstra canvasen visar originalet, den högra den simulerade vyn. Rullistan täcker tre dikromatitetstyper (där ett av konpigmenten saknas: protanopi, deuteranopi, tritanopi), fullständig akromatopsi (ingen färgsyn) och tre anomala trikromatitetstyper (svag konrespons). Bilder med lägre upplösning laddas snabbare.
Gradient: Det här är en visuell CSS-gradientbyggare. Välj linjär (riktad) eller radiell (från mitten utåt), ställ in vinkeln (0° = nedifrån och upp, 90° = vänster till höger) och definiera färgstopp. Varje stopp har en färgväljare och är jämnt fördelat (0 %, 50 %, 100 % för tre stopp). Klicka på + Stopp för att lägga till mellanliggande färgpunkter för mer komplexa gradienter. Förhandsvisningen uppdateras direkt, och den genererade CSS:en kan kopieras nedan.
Kontrast: Beräknar WCAG 2.1-kontrastförhållandet mellan förgrundstext och bakgrundsfärg med formeln för relativ luminans från sRGB-värden (gammakorrigerade). Förhållandet ligger mellan 1:1 (identiska färger) och 21:1 (svart mot vitt). Resultaten visar godkänt/underkänt på tre efterlevnadsnivåer: AA normal text (förhållande ≥ 4,5:1), AAA stor text (förhållande ≥ 4,5:1 för text ≥ 18 pt eller fet ≥ 14 pt) och AAA normal text (förhållande ≥ 7:1). Exempeltexten uppdateras i realtid när färgerna justeras.
Extrahera: Ladda upp valfri bild så identifierar verktyget dess dominerande färgpalett med färgkvantisering. Bilden skalas ned till 100×100 px, varefter varje bildpunkt sorteras in i ett histogram med 4 bitar per kanal (16 nivåer per R/G/B = 4096 fack). Transparenta bildpunkter hoppas över. De vanligaste facken sorteras efter antal bildpunkter, och facks mittfärg blir en färgprov. Varje färgprov visar sitt HEX-värde och andelen bildpunkter det representerar. Justera antalsreglaget (2–12) för att styra hur många dominerande färger som extraheras.
Blandare: Blandar två färger i RGB-färgrymden genom linjär interpolation. Reglaget för förhållandet avgör blandningen: 0 % är ren Färg 1, 100 % är ren Färg 2 och 50 % är en jämn blandning. Varje kanal R, G och B interpoleras oberoende (t.ex. röd + blå vid 50 % ger lila). Resultatförhandsvisningen och HEX/RGB-värdena uppdateras direkt när reglaget dras eller någon av färgerna ändras.
Temp: Omvandlar svartkroppens färgtemperatur i kelvin till motsvarande synliga färg med Tanner Hellands approximationsalgoritm. Låga temperaturer (1000–3000 K) ger varma orange/röda toner som ljus från ett stearinljus och glödlampor; mellanområdet (4000–6500 K) ger neutralt vitt till dagsljus; högre temperaturer (8000–40000 K) skiftar mot kall blå som en mulen himmel och djupt vatten. Etiketten nedan identifierar den närmaste verkliga ljuskällan för varje temperatur.
Namngivna: Bläddra i en samlad samling av 80 traditionella kinesiska färger (胭脂, 朱砂, 黛蓝 m.fl. — namn hämtade från klassisk kinesisk litteratur, målarkonst och färgningstraditioner) och 140+ namngivna CSS-färger (den vanliga webbpaletten). Använd sökrutan för att filtrera efter namn eller HEX-värde, eller byt kategori i rullistan. Klicka på valfri färgruta för att se en stor förhandsvisning med namn och HEX-kod — klicka på koden för att kopiera den.