Färghjul — Online färgväljarhjul och komplementfärger

Använd denna interaktiva färghjul till välj en färg, hitta komplementfärger, och utforska analog, triadisk, tetradisk, och split-komplementär system. Det är ett snabbt sätt att matcha en färg, testa kontrasterande färger och skapa färgkombinationer som passar bra ihop.

Vald
HEX: #165DFF
HSL: hsl(225, 100%, 56%)
RGB: rgb(22, 93, 255)
Palett

Drag

  • Interaktiv färgväljarhjul (HSV) med smidig dragning och exakta inmatningar (HEX/RGB/HSL).
  • Omedelbar kompletterande färggenerator plus analoga, triadiska, split-komplementära, tetratiska och monokromatiska alternativ.
  • WCAG kontrasttips för läsbar UI-text och knappar med kontrasterande färger.
  • Palettexport till PNG, Svg, eller CSS-variabler för snabb överlämning.
  • Responsiv canvas som håller full färgcirkel syns på varje skärm.

Ansökningar

Varumärke och användargränssnitt: Bygg harmoniska paletter som passar ditt varumärkes personlighet. Använd kompletterande färghjul för att skapa högeffektiva CTA:er, eller en triadisk färg schema för balanserad navigation och sjökortsfärger.

Illustration och kläder: Utforska analoga scheman för gradienter som känns naturliga. När du behöver färger som passar ihop till plagg hjälper verktyget till hitta komplementfärger som kommer in i en look ("komplementfärger i passform").

Interiör och målarfärg: Översätt RGB färghjul till a måla färghjul tankesätt; börja med din ankarskärm och testa motsatta färger eller avstängd tertiära färger för balans.

Dvs datum: Välj paletter med tillräckligt med kontrast för diagram; a split-komplementär set undviker ofta förvirring samtidigt som variationen bevaras.

Så här fungerar det

  1. Välj en färg: dra på hjulet eller ange HEX/RGB/HSL.
  2. Välj ett schema: komplementär, analog, triadisk, split-komplementär, tetradisk eller monokromatisk.
  3. Förfina värde: justera ljusstyrka (värde) för att kontrollera ljus/mörker.
  4. Kontrollera kontrasten: se till att text möter WCAG på ljus/mörk bakgrund.
  5. Exportera: ladda ner PNG/SVG eller kopiera CSS-variabler för dev hand-off.

Tips: När du behöver en snabb färgkombinationsgenerator, börja med Singel → Kompletterande → Triadisk för att jämföra humör och läsbarhet.

FAQ

Vad är färghjulet i färglära?

De färgteorihjul arrangerar nyanser i en cirkel så att du kan se relationer som komplementära (motsatser), analoga (grannar) och triadiska (jämnt fördelade). Det är grunden för färg harmoni och välja färger som passar ihop.

Hur hittar jag komplementfärger?

Välj en baston; dess komplementfärg sitter mittemot på hjulet. Använd appens "komplementära" schema för att generera paret direkt och utvärdera kontrasten.

Vad är primära, sekundära och tertiära färger?

Primära nyanser är basfärger; att blanda dem ger sekundära färger, och att blanda en primär med en närliggande sekundär skapar tertiära färger, bildar ett klassiskt 12-färgshjul.

RGB-färghjul kontra målarfärgcirkel?

De RGB färghjul modeller tillsatsljus för skärmar; traditionella RYB-lackhjul är subtraktiva. Komplementpar skiljer sig något mellan modellerna.

Vilka är regnbågens färger i ordning?

Röd, orange, gul, grön, blå, indigo, violett—användbart när du bygger en färgspektrumhjul eller lära ut grunderna i färgteori.

Vilka färger passar bra ihop för UI?

Försök analog för mjuk harmoni, triadisk för balanserad kontrast, eller komplementär för stark betoning (knappar, varningar). Kontrollera alltid kontrastförhållanden.

Ordlista (Color Theory)

Kompletterande färger: motsatta nyanser på hjulet som maximerar kontrasten (t.ex. blått ↔ orange).

Analog: närliggande nyanser som skapar milda gradienter och visuell sammanhållning.

Triadisk: tre nyanser åtskilda 120°; levande men ändå balanserad.

tetradisk: två komplementära par; rik men kräver noggrann balans.

Primär/sekundär/tertiär: bastoner, deras blandningar och de mellanliggande stegen i ett 12-färgshjul.

Nyans/mättnad/värde (HSV): vinkel på hjulet, färgintensitet och ljusstyrka.

Tillgänglighet & Kontrast

Använd kontrasttipsen för att säkerställa läsbar text. För normal text, sikta på ett förhållande på ≥ 4,5:1; för stor text, ≥ 3:1. Om du är osäker, välj en ljusare bakgrund och en mörkare komplementfärg, eller öka ljusstyrkan/värdet för bättre läsbarhet.