# Triadfärger och delad komplementfärg, förklarat [Canonical HTML page](https://gradiently.design/sv/guide/triadic-colors) Tre färger med jämna mellanrum kan få en palett att kännas djärv och balanserad på en gång, eller som en leksakslåda. Skillnaden handlar nästan helt om vilken färg som leder. ## The short version - Triadfärger är tre nyanser med jämna mellanrum runt färgcirkeln, en tredjedels varv från varandra, till exempel rött, gult och blått på målarens cirkel. - En triadpalett fungerar när en färg dominerar, en andra stödjer och den tredje används som en liten accent. - Att dämpa två av de tre färgerna är det snabbaste sättet att få en triadpalett att se vuxen ut. - En palett med delad komplementfärg använder en nyans plus de två nyanserna på var sida om dess motsats, vilket ger stark kontrast med mindre spänning. - Triadfärger används oftast bättre som separata ytor än blandade i en enda gradient. **Triadfärger** är tre nyanser med jämna mellanrum runt färgcirkeln, var och en en tredjedels varv från de andra. På målarens cirkel bildar rött, gult och blått en triad, liksom orange, grönt och violett. Eftersom de tre ligger lika långt från varandra tar ingen över de andra bara genom sitt läge, vilket gör att triadpaletter känns livfulla och balanserade. Det gör dem också lätta att ta i för mycket med. Den här guiden går igenom triader, regeln som hindrar dem från att se ut som en leksakslåda och färgschemat delad komplementfärg, en nära släkting som är lättare att styra. Guiden om [färgcirkeln](https://gradiently.design/sv/guide/color-wheel) förklarar de två sorters cirklar som nämns nedan. ## Triadiska färgscheman på cirkeln | Triad | Cirkel | Karaktär | | --- | --- | --- | | Rött, gult, blått | Målarens (primärfärger) | Djärv, grafisk, välbekant | | Orange, grönt, violett | Målarens (sekundärfärger) | Jordnära, ovanlig, rik | | Rödorange, gulgrönt, blåviolett | Målarens (tertiärfärger) | Modern, mindre väntad | | Rött, grönt, blått | Skärmens (RGB) | Teknisk, högljudd i full styrka | | Cyan, magenta, gult | Skärmens (RGB) | Tryckliknande, lekfull | Vanliga triader. Vrid triangeln var som helst på cirkeln för fler. - Marin (blått): #1e3a8a - Senap (gult): #d4a017 - Tegel (rött): #b91c1c - Oliv (grönt): #4d7c0f - Plommon (violett): #6b21a8 - Bränd orange: #c2410c Primärtriaden och sekundärtriaden, båda fördjupade från full mättnad så att de lättare sitter ihop. ## Dominansregeln: en färg leder Tre klara färger i lika delar tävlar om uppmärksamheten och ser barnsliga ut. Lösningen är att rangordna dem. En färg täcker det mesta av designen, en andra stödjer och den tredje syns bara där du vill att blicken ska landa. En fördelning på 60, 30 och 10 är en bra början, som i [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule). - Lika tredjedelar: de tävlar: `linear-gradient(90deg, #b91c1c 0% 33.3%, #d4a017 33.3% 66.6%, #1e3a8a 66.6% 100%)` - 60, 30, 10: marinblått leder: `linear-gradient(90deg, #1e3a8a 0% 60%, #d4a017 60% 90%, #b91c1c 90% 100%)` - 60, 30, 10: oliv leder: `linear-gradient(90deg, #4d7c0f 0% 60%, #6b21a8 60% 90%, #c2410c 90% 100%)` Samma sorts triad i olika proportioner. När färgerna rangordnas blir brus en palett. Vilken färg ska leda? Oftast den mörkaste eller minst mättade, eftersom stora ytor av en klar färg är tröttande. Spara den klaraste till accenten. Om din varumärkesfärg ingår i triaden är den ofta det givna valet. ## Dämpa en triad Det andra verktyget är mättnad. Behåll en färg stark och dra de andra två mot grått, mörkare eller ljusare. Triadens struktur består, så paletten känns fortfarande balanserad, men den förlorar lågstadieklarheten. Många redaktionella och traditionella paletter är triader i förklädnad: marinblått, ockra och tegel, eller oliv, plommon och rost. - Bläckmarin: #1f2a44 - Havre: #e9dcc3 - Ockra: #b98b2e - Tegel: #9b3d33 En dämpad primärtriad med en varm neutral. Den läses som redaktionell snarare än lekfull. ## Där triadpaletter fungerar Triader passar varumärken och projekt som vill kännas energiska, inkluderande eller lekfulla utan att se slumpmässiga ut: barnutbildning, spel, festivaler, mat och gemenskapsprojekt. De är också användbara för system som behöver tre tydligt åtskilda kategorier, till exempel tre produktlinjer, tre kursnivåer eller tre sorters evenemang, eftersom varje färg ligger så långt som möjligt från de två andra. - **Tre kategorier:** ge varje kategori sin egen färg i triaden och håll layouterna identiska, så att färgen står för sorteringen. - **Ett varumärke, en ledare:** använd den ledande färgen överallt och ta in de andra två för illustration, diagram och markeringar. - **Affischer och förpackningar:** en dämpad triad på en varm neutral ger en tryckt känsla från mitten av förra seklet. Planera färgerna för tryckfärg; se [trycka gradienter](https://gradiently.design/sv/guide/print-gradients). - **Gränssnitt:** spara triaden för status och illustration och låt neutrala toner bära skärmarna, annars känns varje sida högljudd. ## Delad komplementfärg Ett schema med delad komplementfärg börjar med en nyans och använder, i stället för dess direkta motsats, de två nyanserna på var sida om den motsatsen. Du behåller det mesta av kontrasten i ett [komplementärt par](https://gradiently.design/sv/guide/complementary-colors) men slipper den frontala kollisionen, och du får en tredje färg att arbeta med. Det är ett av de mest förlåtande färgscheman för nybörjare. - Bas: violett: #5b21b6 - Delad: lime: #a3e635 - Delad: bärnsten: #f59e0b - Neutral: lilavit: #f5f3ff Violetts motsats på målarens cirkel är gult. Den delade varianten använder färgerna på var sida om det, lime och bärnsten. - **Basfärg:** ledaren, som används i det mesta av designen. - **Första delade färgen:** stöd, i mindre ytor eller en tystare version. - **Andra delade färgen:** accenten, som används sparsamt. - **Neutral:** en nästan vit eller nästan svart ton som håller ihop det. ## Triadfärger i gradienter Blandar du alla tre färgerna i en triad i en gradient tvingas blandningen genom varje nyans däremellan, och minst en övergång blir oftast matt. Triader fungerar bättre som separata ytor, eller som en tvåfärgsgradient med den tredje färgen som accent. - Alla tre blandade: grumlig andra hälft: `linear-gradient(90deg, #b91c1c 0%, #d4a017 50%, #1e3a8a 100%)` - Marinblått till tegel, via plommon: `linear-gradient(135deg, #1e3a8a 0%, #6b2a6e 55%, #b91c1c 100%)` - Senap som en skarpt avgränsad accent: `linear-gradient(135deg, #1e3a8a 0%, #6b2a6e 50%, #b91c1c 86%, #d4a017 86%, #d4a017 100%)` Två triadfärger blandas; den tredje står för sig. Gult till blått i den första halvan av första exemplet visar varför. ## Vanliga misstag med triadpaletter ### Undvik - Tre mättade färger i lika delar - Text i accentfärgen - Alla tre blandade i en gradient - Ingen neutral som ögat kan vila på ### Gör så här - En ledare, ett stöd, en accent - Text i en neutral med stark kontrast - Separata ytor, eller två blandade plus en accent - En nästan vit eller nästan svart ton bredvid Känns en triad fortfarande för högljudd kan du gå ned till en [analog palett](https://gradiently.design/sv/guide/analogous-colors), där färgerna är grannar i stället för motsatser. ## FAQ ### Vad är triadfärger? Triadfärger är tre nyanser med jämna mellanrum runt färgcirkeln, var och en en tredjedels varv från de andra, till exempel rött, gult och blått på målarens cirkel. ### Hur använder man ett triadiskt färgschema? Låt en färg dominera, en andra stödja och den tredje fungera som en liten accent. Att dämpa två av de tre gör paletten lättare att leva med. ### Vad är ett färgschema med delad komplementfärg? En basnyans plus de två nyanserna på var sida om dess komplementfärg. Det behåller stark kontrast med mindre spänning än ett direkt komplementärt par. ### Vad är skillnaden mellan triadfärger och komplementfärger? Komplementfärger använder två motsatta nyanser; triadfärger använder tre nyanser med jämna mellanrum runt cirkeln. Triader är mer varierade och oftast lite mindre spända.