# Färgharmoni: varför vissa färger hör ihop [Canonical HTML page](https://gradiently.design/sv/guide/color-harmony) Färghjulet ger dig sex klassiska scheman. De hjälper, men de är bara halva harmonin. Den andra halvan är ljushet, mättnad och hur mycket du använder av varje färg. ## The short version - Färgharmoni är egenskapen hos en uppsättning färger som ser ut att höra ihop. - De sex klassiska harmonierna är monokromatisk, analog, komplementär, delad komplementär, triadisk och tetradisk, var och en definierad av positioner på färghjulet. - Nyansförhållanden ensamma garanterar inte harmoni: färger behöver också en förnuftig spridning av ljushet och kontrollerad mättnad. - En dominerande färg med mindre mängder av de andra ser nästan alltid mer harmonisk ut än lika mycket av varje färg. - Färger som delar en underton, som en antydan av värme eller av samma nyans, tenderar att se släkt ut även när de ligger långt ifrån varandra på hjulet. **Färgharmoni** är känslan av att en grupp färger hör ihop. Designers bygger den oftast på två sätt: genom att välja nyanser som står i ett känt förhållande på färghjulet, som grannar eller motsatser, och genom att balansera allt annat, alltså ljushet, mättnad och hur mycket av varje färg som syns. Får du det första rätt och det andra fel skorrar resultatet ändå. Får du båda rätt känns även ovanliga kombinationer lugna och avsiktliga. ## Färghjulet och varför det hjälper Hjulet ordnar nyanser i en cirkel så att förhållanden blir geometri. Grannar delar mycket av samma ljus och blandas mjukt; motsatser delar inget och driver varandra att se mer intensiva ut. Varje klassisk harmoni är en form lagd över hjulet. Om hjulet i sig är nytt för dig, börja med [färghjulet](https://gradiently.design/sv/guide/color-wheel). Ett färghjul: `conic-gradient(from 0deg, #e64545, #e6a645, #c8e645, #45e66a, #45e6d4, #4596e6, #6a45e6, #d445e6, #e64545)` Nyanser i måttlig styrka runt en cirkel. Varje harmoni nedan är ett mönster av punkter på den här ringen. ## De sex klassiska färgharmonierna Här är varje schema byggt från samma blågröna bas, `#30a69c`, så att du ser hur förhållandet ändrar stämningen medan startfärgen står kvar. - Monokromatisk: `linear-gradient(90deg, #d7f4f1 0% 25%, #88ddd6 25% 50%, #30a69c 50% 75%, #1d635d 75% 100%)` - Analog: `linear-gradient(90deg, #30a661 0% 33.3%, #30a69c 33.3% 66.6%, #3075a6 66.6% 100%)` - Komplementär: `linear-gradient(90deg, #30a69c 0% 50%, #a6303a 50% 100%)` - Delad komplementär: `linear-gradient(90deg, #30a69c 0% 33.3%, #a63075 33.3% 66.6%, #a66130 66.6% 100%)` - Triadisk: `linear-gradient(90deg, #30a69c 0% 33.3%, #9c30a6 33.3% 66.6%, #a69c30 66.6% 100%)` - Tetradisk: `linear-gradient(90deg, #30a69c 0% 25%, #6130a6 25% 50%, #a6303a 50% 75%, #75a630 75% 100%)` Varje remsa visar schemats nyanser i lika mättnad. Lägg märke till hur mycket högljuddare schemana blir när nyanserna sprids. | Harmoni | Nyanser på hjulet | Känns | Svåraste delen | | --- | --- | --- | --- | | Monokromatisk | En nyans, många ljushetssteg | Lugnt, förfinat, enhetligt | Att undvika platthet | | [Analog](https://gradiently.design/sv/guide/analogous-colors) | Tre grannar, ungefär 30 grader isär | Naturligt, varmt eller kallt, enkelt | Att få tillräcklig kontrast | | [Komplementär](https://gradiently.design/sv/guide/complementary-colors) | Två motsatser, 180 grader isär | Djärvt, energiskt | Att hindra färgerna från att slåss | | Delad komplementär | En bas plus de två grannarna till dess motsats | Livligt men mjukare än komplementärt | Att välja vilken färg som leder | | [Triadisk](https://gradiently.design/sv/guide/triadic-colors) | Tre nyanser, 120 grader isär | Lekfullt, balanserat | Att se barnsligt ut i full styrka | | [Tetradisk](https://gradiently.design/sv/guide/tetradic-colors) | Två komplementära par | Rikt, komplext | Att hålla ihop fyra färger | Varje schema har en egen artikel med koder och exempel. En grov vägledning för valet: ju färre och närmare nyanserna är, desto lättare är harmoni att uppnå. Monokromatiska och analoga scheman sköter sig nästan själva. Komplementära, triadiska och tetradiska scheman ger mer energi men kräver mer disciplin inom de tre nästa områdena. ## Harmoni är också ljushet och mättnad Titta på den triadiska remsan ovan. Nyanserna är lärobokens, men i lika styrka ser de ut som en leksakslåda. Det beror på att hjulet bara beskriver nyans. Två andra egenskaper avgör om färger faktiskt sitter bra ihop. - **Ljushet:** en harmonisk uppsättning spänner oftast över ljusa, mellan- och mörka värden. Fem färger med samma ljushet flyter ihop; ett spann ger ögat någonstans att vila och något att läsa. - **Mättnad:** håll de flesta färger lugna och låt en förbli levande. När varje färg är i full styrka konkurrerar de, och schemat läses som brus. - **Gemensam underton:** färger som alla lutar svagt åt det varma, eller alla bär en antydan av samma nyans, ser släkt ut även när de ligger långt isär på hjulet. Att lägga lite av din huvudfärg i de neutrala är det snabbaste sättet. - Blågrönt vitt #edf3f2: #edf3f2 - Ljust blågrönt #88ddd6: #88ddd6 - Blågrönt #30a69c: #30a69c - Blågrönt bläck #122b29: #122b29 - Korallaccent #e0525d: #e0525d Ett komplementärt schema tämjt: det blågröna leder i fyra ljushetssteg, de neutrala bär en antydan av blågrönt och det motsatta röda blir en enda korallaccent. För att göra de här justeringarna med siffror, använd ett format som skiljer ljushet från nyans. HSL är det välkända valet; [OKLCH](https://gradiently.design/sv/guide/oklch-explained) är bättre på att hålla ljusheten jämn när du ändrar nyans, vilket gör balanserade scheman mycket lättare att bygga. ## Proportion: låt en färg leda Den enskilt största skillnaden mellan en harmonisk design och en kaotisk är oftast proportion, inte nyans. Lika mycket av två eller tre färger får ögat att studsa mellan dem. En dominerande färg, en stödjande och en liten accent ger det en hierarki att följa. [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule) är en användbar utgångsfördelning. ### Krockar - Lika stora ytor av varje färg - Varje färg i full mättnad - Alla färger i samma ljushet - Rent gråa neutrala bredvid varma färger - Motsatser som rör vid varandra längs långa kanter ### Harmonierar - En färg tydligt dominerande - En levande accent, resten lugnare - En spridning från ljust till mörkt - Neutrala tonade med huvudnyansen - Motsatser åtskilda av luft eller en neutral Ett stående Instagram-inlägg som meddelar öppen keramikateljé på lördag, på en gradientbakgrund En Mark: lägg märke till vilken färg som leder, hur mycket av ramen den täcker och var orden vilar. Samma inlägg om öppen ateljé på en andra gradientbakgrund med en annan färgfamilj En andra Mark med samma ord. Färgförhållandet ändrar stämningen; budskapet förblir detsamma. ## Så bygger du en harmonisk palett i praktiken 1. **Utgå från en färg som betyder något** En varumärkesfärg, en produkt, en plats. Harmoni är lättare kring en fast punkt än från ingenting. 2. **Välj ett förhållande för stämningen** Analogt för lugn, komplementärt eller delat komplementärt för energi, monokromatiskt för återhållsamhet. 3. **Sprid ljusheten och lugna mättnaden** Gör en ljus, en medelton och en mörk version, sänk sedan mättnaden på allt utom accenten. 4. **Bestäm proportionerna** Namnge vilken färg som täcker mest yta, vilken som stöder och vilken som bara syns i små inslag. 5. **Testa den med riktiga ord** Lägg paletten på en verklig layout och kontrollera textkontrasten. Harmoni som inte kan bära en rubrik är inte färdig. Om du hellre utgår från en palett som redan har balanserats är varje Mark i Gradiently en färdig levande bakgrund vars färger, material och ljus komponerats tillsammans, och Studio lägger dina ord på den med auto ink som väljer ljus eller mörk text per rad. För att skapa din egen från grunden, se [färgpalettgeneratorer](https://gradiently.design/sv/guide/color-palette-generator). ## FAQ ### Vad är färgharmoni? Det är egenskapen hos färger som ser ut att höra ihop, oftast uppnådd genom nyansförhållanden på färghjulet i kombination med balanserad ljushet, mättnad och proportion. ### Vilka typer av färgharmoni finns det? De klassiska sex är monokromatisk, analog, komplementär, delad komplementär, triadisk och tetradisk. ### Vilken färgharmoni är lättast att använda? Monokromatiska och analoga scheman, eftersom deras nyanser ligger nära varandra och sällan krockar. De behöver en bra spridning av ljushet för att inte se platta ut. ### Varför krockar mina komplementfärger? Oftast är båda i full mättnad och lika stora mängder. Låt den ena dominera, lugna den andra till en accent och skilj dem åt med en neutral.