Färgväljare och palettgenerator
Välj färger och generera färgpaletter
Välj en färg
Färgpaletter
Material
Pastell
Modern
Monokrom
Färgtips
Klicka på valfri färg i harmoni- eller palettsektionerna för att välja den.
Använd knappen för slumpmässig färg för att hitta nya färgkombinationer.
Komplementfärger ger hög kontrast och visuellt intresse.
Analoga färger ger harmoniska och lugnande designer.
Triadiska färger ger levande kontrast samtidigt som harmonin bevaras.
Använd nyanser och toner för att hitta mörkare eller ljusare variationer av din färg.
Färgförhandsvisning
Färgformat
#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1)hsl(217, 91%, 60%)hsla(217, 91%, 60%, 1)Välj en färg för att se dess värden, harmonier och variationer.
Komplementfärger
Analoga färger
Triadiska färger
Delat komplement
Tetradiska färger
Nyanser och toner
Mörkare nyanser
Ljusare toner
Om färgväljaren
Vår kostnadsfria färgväljare online är ett omfattande verktyg för att välja och konvertera färger, utformat för designers, utvecklare och digitala kreatörer. Välj valfri färg med den interaktiva färginmatningen, se den i flera format, bland annat HEX, RGB, RGBA, HSL och HSLA, och utforska färgharmonier för att bygga vackra och sammanhängande färgscheman till dina projekt.
Oavsett om du utformar en webbplats, bygger en varumärkesidentitet, utvecklar ett användargränssnitt eller skapar digital konst är ett bra färgväljarverktyg oumbärligt. Vårt verktyg går längre än enkel färgval genom att automatiskt skapa komplementära, analoga, triadiska, delade komplementära och tetradiska färgharmonier, erbjuda utvalda färgpaletter (Material, Pastell, Modern, Monokrom) och låta dig kopiera varje färgformat till urklipp direkt.
Verktyget har en stor förhandsvisningsyta för färg, en generator för nyanser och toner, slumpmässig färggenerering för inspiration och klickbara färgrutor i paletterna som gör det snabbt och intuitivt att utforska färgkombinationer. Alla färgberäkningar sker direkt i din webbläsare utan serverbearbetning, vilket ger en snabb, privat och responsiv upplevelse.
Viktiga funktioner
- Interaktiv färgväljare med webbläsarens inbyggda färginmatning
- Fem färgformat: HEX, RGB, RGBA, HSL och HSLA
- Kopiering till urklipp med ett klick för alla färgformat
- Fem typer av färgharmoni: komplementär, analog, triadisk, delad komplementär och tetradisk
- Generator för nyanser och toner för att hitta mörkare eller ljusare variationer
- Fyra utvalda färgpaletter: Material Design, Pastell, Modern och Monokrom
- Slumpgenerator för färger för kreativ inspiration
- Stor förhandsvisningsyta för färg för en korrekt visuell bedömning
- Validering av hex-inmatning med återkoppling i realtid
- Responsiv layout anpassad för datorer och mobila enheter
Så använder du färgväljaren
- Välj en färg: Klicka på färgrutan för att öppna webbläsarens inbyggda färgväljare, eller skriv ett HEX-värde direkt i textfältet (t.ex. #3B82F6).
- Se färgformaten: Din valda färg visas i formaten HEX, RGB, RGBA, HSL och HSLA i avsnittet Färgformat under förhandsvisningen.
- Kopiera ett färgvärde: Klicka på kopieringsikonen bredvid ett färgformat för att kopiera just det värdet till urklipp och använda det i CSS, designverktyg eller kod.
- Utforska färgharmonier: Granska de automatiskt genererade färgharmonierna. Använd flikarna för att filtrera på en viss harmonityp eller visa alla samtidigt.
- Justera med nyanser och toner: Hitta mörkare eller ljusare variationer av den valda färgen i avsnittet Nyanser och toner.
- Bläddra bland paletterna: Klicka på en färgruta i paletterna Material, Pastell, Modern eller Monokrom för att välja färgen och se dess värden och harmonier.
- Generera slumpmässiga färger: Klicka på blandningsknappen bredvid färginmatningen för att hitta nya färger och oväntade kombinationer som inspiration.
Användningsområden
- Webbdesign och webbutveckling: Välj och konvertera färger för CSS-stilmallar, designtokens och frontend-ramverk. Kopiera HEX-, RGB- eller HSL-värden direkt in i din kod.
- Skapa varumärkesidentitet: Välj primära, sekundära och accentfärger för varumärkesriktlinjer och använd sedan färgharmonier för att bygga en komplett och sammanhängande varumärkespalett.
- UI/UX-design: Välj gränssnittsfärger med rätt kontrast och harmoni för knappar, bakgrunder, text och interaktiva element i användargränssnitt.
- Grafiska designprojekt: Hitta och finslipa exakta färger för illustrationer, grafik för sociala medier, marknadsföringsmaterial och tryckta designprojekt.
- Presentationsdesign: Välj professionella, harmoniska färgscheman för presentationer, rapporter och datavisualiseringar.
- Undervisning i färglära: Lär dig om komplementära, analoga, triadiska, delade komplementära och tetradiska färgsamband med den interaktiva harmonigeneratorn.
- Tillgänglighetstestning: Jämför färgvärden och experimentera med kontrastförhållanden för att säkerställa att dina designer uppfyller WCAG-standarderna för tillgänglighet.
- Digital konst och illustration: Utforska färgpaletter och hitta harmoniska kombinationer för digitala målningar, illustrationer och kreativa verk.
Vanliga frågor
Vilka färgformat stöder verktyget?
Färgväljaren stöder fem format: HEX (t.ex. #3B82F6), RGB (t.ex. rgb(59, 130, 246)), RGBA med alfakanal, HSL (t.ex. hsl(217, 91%, 60%)) och HSLA med alfakanal. Alla format skapas automatiskt utifrån din valda färg.
Vad är färgharmonier?
Färgharmonier är kombinationer av färger som är estetiskt tilltalande tillsammans. Vårt verktyg skapar fem typer: komplementär (motsatta på färghjulet), analog (intilliggande färger), triadisk (tre jämnt fördelade), delad komplementär (basfärgen plus de två som ligger intill dess komplementfärg) och tetradisk (fyra färger i ett rektangelmönster).
Kan jag ange en specifik HEX-kod?
Ja, du kan skriva valfri giltig HEX-färgkod direkt i textfältet bredvid färgväljaren. Verktyget validerar inmatningen i realtid och uppdaterar förhandsvisningen, färgformaten och harmonierna direkt när en giltig hex-kod anges.
Vad är nyanser och toner?
Verktyget skapar fem mörkare och fem ljusare variationer genom att ändra HSL-ljusheten i steg om 12 procentenheter, medan nyans och mättnad förblir desamma. Ljusheten är begränsad till 0-100 %, så vissa variationer kan upprepas vid svart eller vitt.
Är verktyget gratis?
Ja, vår färgväljare är helt gratis och utan begränsningar. Välj, konvertera och kopiera så många färger du behöver utan att skapa ett konto eller betala några avgifter.
Är mina data säkra?
Absolut. All färgval och konvertering sker helt i din webbläsare. Inga data skickas till någon server, och ingen information om dina färgval lagras eller spåras.
Tips och bästa praxis
- Börja med färgharmonier: När du bygger ett färgschema väljer du först din primärfärg och använder sedan de automatiskt genererade komplementära, analoga eller triadiska färgerna som utgångspunkt för din palett.
- Använd nyanser och toner för djup: När du har valt en primärfärg kan du använda nyanserna och tonerna för att skapa hovertillstånd, bakgrunder och kantlinjer som behåller den visuella konsekvensen.
- Använd slumpgeneratorn för inspiration: Om du kört fast med färgvalen kan du klicka på slumpknappen flera gånger för att hitta oväntade färger som kan ge en kreativ riktning.
- Testa färgerna i sitt sammanhang: En färg som ser bra ut i väljaren kan se annorlunda ut i din faktiska design. Testa alltid de kopierade färgvärdena i ditt projekt innan du bestämmer dig för en palett.
- Tänk på tillgängligheten: Se till att kontrasten mellan text- och bakgrundsfärger är tillräcklig. En vanlig riktlinje är ett kontrastförhållande på minst 4,5:1 för normal text och 3:1 för stor text (WCAG AA).
- Använd HSL för finjustering: Med HSL-formatet är det enkelt att skapa variationer av en färg genom att justera ljusheten (ljusare eller mörkare) eller mättnaden (mer levande eller mer dämpad) med bibehållen nyans.