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

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 med vanlig JavaScript, React eller Vue: TypeScript, Babel, CSS eller Sass, bilder, HtmlWebpackPlugin, en utvecklingsserver och raden för npm install.

CSS-laddningsgenerator

Skapa en cirkulär spinnare i ren CSS: ställ in diameter, kanttjocklek, accentfärg och rotationshastighet, förhandsvisa direkt och kopiera den färdiga CSS-koden. Ingen SVG, ingen JavaScript.

OpenAPI-validerare

Klistra in ett OpenAPI- eller Swagger-dokument i JSON eller YAML och kontrollera dess kärnstruktur: versionsfält, info-objekt och paths, med tydliga fel och varningar.

PHP-formaterare

Lägg till radbrytningar och indrag med 2 eller 4 blanksteg i ett enkelt PHP-kodstycke. Granska resultatet: detta är varken en PHP-parser eller en PSR-12-korrigerare.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

XSD-validerare

Validera ett XML-dokument mot ett XSD-schema och rapportera element- och typavvikelser med exakta radnummer.

Verktyget finns på andra språk