Softonic

Komplementfärgsökare

Steg 1 / 3

Ange en basfärg

Stöder #RGB, #RRGGBB, rgb() med heltal och hsl() med procent. Beräkningen stannar i webbläsaren; färgen ingår i URL:en som skickas vid varje sidbegäran.

Nästa

Komplementfärger ligger mitt emot varandra på ett digitalt färghjul. Ange ett strikt HEX-, RGB- eller HSL-värde för att beräkna HSL-komplementet, delade komplement, tetradiska följefärger och exakta WCAG-kontrastvärden. All beräkning sker lokalt i webbläsaren.

Så beräknas komplementet

  1. 1

    Ange valfri färg

    Använd #RGB, #RRGGBB, rgb() med heltal eller hsl() med procent. Hela värdet valideras före beräkningen.

  2. 2

    Rotera nyansen 180°

    HSL-komplement: lägg till 180° på nyansen och behåll samma mättnad och ljushet.

  3. 3

    Härled split-complement

    Två färger 150° och 210° från basfärgen – ett mjukare alternativ till det direkta komplementet när kontrasten är för hög.

  4. 4

    Tillgänglighetstips visas

    Kontrastförhållandet för paret mot vit och svart, plus en varning om paret sannolikt inte klarar WCAG AA när det används som text/bakgrund.

Exempel

Grundfärg Hex Komplement (HSL) Hex
Ren röd #FF0000 Cyan #00FFFF
Korall #FF7F50 Aquaturkos #50D0FF
Skogsgrön #228B22 Lila #8B228B
Kungsblå #4169E1 Guldorange #E1B941
Lavendel #E6E6FA Ljusgul #FAFAE6

De visade HEX-, RGB- och HSL-värdena beskriver samma sRGB-färg. Kopiera ett resultat till CSS eller ett annat designverktyg.

HSL-komplement jämfört med RYB-komplement

  • HSL (skärm): rött ↔ cyan, grönt ↔ magenta, blått ↔ gult. Det är geometrin hos HSL-vinkeln som härleds ur sRGB och används i CSS, inte en simulering av ljusblandning.
  • RYB (konstnär): rött ↔ grönt, blått ↔ orange, gult ↔ lila. Det är en traditionell undervisningskonvention, inte en prognos för hur bestämda pigment blandas.

Sökaren använder enbart den digitala HSL-modellen. Den omvandlar inte till måleriets RYB-hjul, eftersom pigmentkomplement beror på material och blandning.

Där komplement fungerar bra

  • CTA-knappar mot varumärkesbakgrunder. Para ihop huvudfärgen med dess komplement för att få knappen att framträda.
  • Datavisualisering med diagram i två serier (vinst mot förlust, före mot efter).
  • Illustrationsskuggor: skuggan av en orange pumpa ser mer övertygande ut i blått än i en mörkare orange.
  • Sportvarumärken: många lag använder komplementära eller split-complement-paletter (blå/orange, röd/grön, gul/lila).

Där de misslyckas

  • Brödtext mot bakgrund: direkta komplement (rött på grönt, blått på orange) är obekväma att läsa. Hög kromatisk aberration ger visuell trötthet.
  • Användning över hela ytan: en skärm som är 50 % röd och 50 % grön är utmattande. Använd komplement till accenter (5–10 % av ytan), inte som huvudfärg.
  • Varumärkessammanhang: komplement känns röriga. De flesta moderna varumärken använder en monokrom eller analog palett + en accent, inte dubbla komplement.

Split-complement

Split-complement (bas + 150° + 210°) är ofta ett bättre praktiskt val:

  • Behåller hög kontrast mot komplementområdet.
  • Undviker det direkta komplementets vibration.
  • Ger två accenter för en lagrad design.

Exempel: bas = blå → komplement = orange (hårt) → split-complement = rödorange + gulorange (rikare).

Avmättade komplement

Rena komplement ser sällan bra ut vid full mättnad. Sänk mättnaden med 20–40 % på den ena eller båda för en lugnare palett:

  • Röd (S=100 %) + cyan (S=100 %) = vibrerar.
  • Röd (S=60 %) + cyan (S=60 %) = klassisk affischpalett.
  • Tegelröd varumärkesfärg (S=45 %) + dammig turkos (S=30 %) = modern och användbar.

Förnuftskoll innan du använder

  • Parets kontrastförhållande: sökaren anger detta. Under 4,5:1 klaras inte AA för text.
  • Testa mot neutral bakgrund: komplement ser olika ut mot vitt, grått och svart.
  • Utskriftstest om det är målet – CMYK kan förskjuta mättnad och komplementförhållanden jämfört med RGB.

Vanliga frågor

De ordnar nyanser enligt olika konventioner. HSL använder en numerisk vinkel härledd ur sRGB, medan det traditionella RYB-hjulet placerar konstnärers primärfärger på en begreppslig cirkel. Inget av dem förutsäger resultatet av att blanda verkligt ljus eller färg.

Ja – de är synonymer inom färgläran. “Motsatt på färghjulet” och “komplementär” syftar på samma relation.

Sällan. Direkta komplement klarar oftast inte WCAG-kontrasten när de används som text/bakgrund, eftersom de har liknande ljushet. Öka ljushetsskillnaden (mörk text på ljus bakgrund) för att klara kravet.

Ja – resultatpanelen innehåller direkt komplement, split-complement (två färger på sidorna) och en tetradisk fyrgrupp. Välj det som passar ditt designmål.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

CSS-pilgnerator

Skapa lokalt en CSS-pil med riktning, färg, storlek och ramens tjocklek och kopiera sedan regeln.

E-postvalidator

Validera en e-postadress: RFC 5322-syntaxkontroll, live-slagning av MX-poster samt detaljer om lokal del, domän och längd. Ingen e-post skickas.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Verktyget finns på andra språk