Färgväljare

Vad är en färgväljare?

En färgväljare är ett onlineverktyg som låter dig välja färger visuellt för webbdesign, grafiskt arbete och UI/UX-utveckling och omvandla dem till format som HEX, RGB och HSL. Med färghjulet och reglaget för mättnad och ljushet hittar du snabbt den nyans du vill ha. Eftersom verktyget även stöder opacitet (alpha) kan du skapa färgkoder i både RGBA och HSLA.

Verktyget körs direkt i webbläsaren, så du behöver inte installera något separat program. I webbläsare som stöder EyeDropper API, till exempel Chrome och Edge, kan du hämta färger direkt från valfri del av skärmen. Det gör det enkelt att plocka upp färger från designreferenser eller bilder.

När använder du verktyget?

• Webbutveckling – Hitta och kopiera exakta färgkoder (HEX, RGB, HSL) för att använda dem direkt i CSS-stilmallar
• UI/UX-design – Bygg harmoniska färgpaletter för knappar, bakgrunder och text i appar eller på webbplatser
• Grafisk design – Välj och kombinera färger för affischer, banners och bilder för sociala medier
• Varumärkesidentitet – Definiera profilfärger för ditt företag eller projekt och dokumentera dem i flera format
• Tillgänglighetstest – Kontrollera färgvärden för att bedöma kontrasten mellan text och bakgrund
• Hämta färger från referenser – Använd EyeDropper för att plocka färger direkt från webbplatser eller bilder du gillar
• Presentationsmaterial – Hitta färgkoder för att ge presentationer och dokument ett enhetligt uttryck

Viktiga funktioner

• Färgval via färghjul – Välj nyans intuitivt på ett 360-graders färghjul. Bläddra mjukt mellan färger med musdrag eller touch.
• 2D-väljare för mättnad och ljushet – Justera mättnad och ljushet samtidigt utifrån vald nyans. Gå fritt från ljusa pasteller till djupa mörka färger.
• Alphareglage för opacitet – Justera opaciteten från 0 % till 100 % för att skapa halvtransparenta färger i RGBA- och HSLA-format. Praktiskt för överlägg och toningar.
• Stöd för flera färgformat – Konverterar och visar HEX, RGB och HSL i realtid. Vid lägre opacitet växlar verktyget automatiskt till RGBA och HSLA.
• Hämta skärmfärger med EyeDropper – Klicka var som helst på skärmen i Chrome eller Edge för att fånga en färg direkt. Du kan också hämta färger från bilder i andra flikar eller från skrivbordet.
• Automatiska färgharmonier – Skapar automatiskt komplementära, analoga, triadiska och monokroma paletter utifrån den valda färgen. Det gör det lätt att hitta kombinationer som fungerar enligt färgläran.
• Kopiera CSS-kod med ett klick – Kopiera den valda färgen som CSS-kod i formatet color: #D4AF37;. Välj mellan HEX, RGB och HSL.
• Färghistorik – De senaste 20 valda färgerna sparas automatiskt. Historiken finns kvar även efter att du stängt webbläsaren, så att du kan återanvända tidigare färger.

Så använder du verktyget

1. Välj nyans – Klicka eller dra på färghjulet för att välja det grundläggande färgområdet, till exempel rött, orange, gult, grönt, blått eller lila.
2. Justera mättnad och ljushet – I det fyrkantiga området nedanför ändrar du mättnad genom att gå åt vänster eller höger och ljushet genom att gå upp eller ner. Uppe till höger ligger den mest klara och ljusa färgen.
3. Ställ in opacitet – Behöver du en halvtransparent effekt justerar du alphareglaget. 100 % är helt täckande och 0 % helt transparent.
4. Granska och kopiera färgvärden – Kontrollera HEX-, RGB- och HSL-värdena i panelen till höger och klicka på kopieringsknappen bredvid varje format för att lägga dem på urklipp.
5. Använd CSS-koden – Välj önskat format (HEX/RGB/HSL) i CSS-avsnittet längst ned och använd knappen “Kopiera CSS” för att få kod som är redo att klistras in i dina stilmallar.

Förstå färgteori och färgharmonier

Principen bakom färghjulet

Färghjulet går tillbaka till Isaac Newtons experiment från 1666, där han använde ett prisma för att dela upp ljus. Moderna färghjul brukar delas in i den traditionella RYB-modellen med röd-gul-blå och den digitala RGB-modellen med röd-grön-blå. Det här verktyget bygger på färgmodellen HSL (Hue-Saturation-Lightness), där nyans uttrycks som en vinkel från 0° till 360°.

HSL vs. RGB vs. HEX

• HEX (hexadecimal) – Det vanligaste formatet på webben. Visar rött, grönt och blått som 00-FF (0-255) i formatet #RRGGBB. Exempel: #D4AF37 är en gyllene färg.
• RGB (röd, grön, blå) – Bygger på ljusets tre grundfärger, där varje kanal anges som ett värde mellan 0 och 255. I CSS används det som rgb(212, 175, 55).
• HSL (nyans, mättnad, ljushet) – En modell som ligger nära hur människor uppfattar färg. Den består av nyans (0°-360°), mättnad (0 %-100 %) och ljushet (0 %-100 %). Därför är det lätt att justera klarhet eller intensitet inom samma nyans.

Typer av färgharmonier

• Komplementär – Två färger som ligger mitt emot varandra på färghjulet. Ger stark kontrast och drar snabbt uppmärksamhet. Exempel: komplementfärgen till blått (240°) är gult (60°).
• Analog – Färger som ligger bredvid varandra på färghjulet. De förekommer ofta i naturen och ger ett harmoniskt och behagligt intryck. Exempel: orange, gul och limegrön.
• Triadisk – Färger som delar färghjulet i tre lika delar. Ger balanserad kontrast men känns mjukare än komplementära kombinationer. Exempel: röd, gul och blå.
• Monokrom – Färger som bara varierar i mättnad och ljushet inom samma nyans. Ger ett rent och genomarbetat intryck och används ofta i varumärkesdesign.

Använd opacitet (alpha)

Alphakanalen styr färgens opacitet. 0 % är helt transparent och 100 % helt täckande. Halvtransparenta färger används ofta i webbdesign för överlägg, toningar och hovringslägen. RGBA- och HSLA-format stöds sedan CSS3 och HEX-koder med transparens (#RRGGBBAA) fungerar i moderna webbläsare.

Om EyeDropper API

EyeDropper API är ett webb-API som gör att du kan hämta färger direkt från skärmen i webbläsaren. Funktionen stöds i dag i Chrome 95+ och Edge 95+. Firefox och Safari stöder den ännu inte.

Med EyeDropper kan du hämta färger inte bara från den aktuella fliken utan också från andra flikar, andra program och till och med skrivbordet. Det är mycket användbart när du snabbt vill få fram exakta färgvärden från designreferenser, konkurrenters webbplatser eller inspirerande bilder.

Tips för användning

• Dokumentera profilfärger – När du har valt huvudfärgerna för ditt företag eller projekt bör du spara alla HEX-, RGB- och HSL-värden så att samma färger används konsekvent på webben, i tryck och i video.
• Tänk på tillgänglighet – När du väljer text- och bakgrundsfärger behöver du se till att skillnaden i ljushet är tillräcklig. WCAG rekommenderar minst 4,5:1 i kontrast för vanlig text och 3:1 för stor text.
• Bygg en färgpalett – Börja med en huvudfärg och använd sedan färgharmonierna för att enkelt skapa en professionell palett. Ofta består den av 1 huvudfärg, 1-2 sekundära färger och 1 accentfärg.
• Använd halvtransparenta effekter – När du lägger text ovanpå bakgrundsbilder kan ett halvtransparent överlägg, till exempel rgba(0, 0, 0, 0.5), förbättra läsbarheten.

Detaljer

Resultaten från den här färgväljaren skapas utifrån dina inmatade värden och valda alternativ.

För viktiga beslut bör du alltid kontrollera resultatet mot officiella riktlinjer eller en expertgranskning.

Vanliga frågor