Kortversionen
- En färgcirkel ordnar nyanserna i en ring, så att sambanden mellan dem, till exempel motsatser och grannar, blir lätta att se.
- Målarens cirkel har rött, gult och blått som primärfärger, medan skärmens cirkel har rött, grönt och blått, så deras motfärger skiljer sig åt.
- Färgharmonier som komplementfärger, analoga färger och triader är fasta positioner på cirkeln.
- En färgcirkel visar bara nyans, så varje palett du hämtar från den behöver ändå ljusa och mörka varianter för text och bakgrunder.
- Enkla digitala färgcirklar är inte perceptuellt jämna: vid samma inställning ser gult mycket ljusare ut än blått.
På den här sidan
En färgcirkel (eller ett färghjul) ordnar nyanserna i en ring, i samma ordning som i en regnbåge, med ändarna hopkopplade. Dess värde är att sambanden blir geometri: färger mitt emot varandra kontrasterar kraftigt, färger bredvid varandra flyter lätt ihop och färger med jämna mellanrum runt cirkeln balanserar varandra. För att använda en väljer du en startnyans och sedan följeslagare efter deras position.
Den här guiden går igenom hur cirkeln är uppbyggd, vilken cirkel du ska lita på, hur du läser harmonier ur den och hur du kommer från några få nyanser till en användbar palett. För den större bilden börjar du med grunderna i färglära.
Primära, sekundära och tertiära färger
Varje färgcirkel börjar med tre primärfärger. Blandar du två primärfärger får du en sekundärfärg, och blandar du en primärfärg med en angränsande sekundärfärg får du en tertiärfärg. Tre primärfärger, tre sekundärfärger och sex tertiärfärger ger den välbekanta cirkeln med tolv fält.
conic-gradient(from 0deg, #d7263d, #e8572a, #f28c28, #f6b82f, #f4e04d, #9bc53d, #3a9d4a, #1b8a8f, #2156a5, #4b3a9a, #7b2d8e, #b0266f, #d7263d)Målarens cirkel och skärmens cirkel
Två cirklar används i vanliga fall, och de är inte överens. Målarens cirkel bygger på rött, gult och blått (RYB), från blandning av pigment. Skärmar skapar färg av rött, grönt och blått ljus (RGB), och en cirkel byggd på dem har andra primärfärger, andra sekundärfärger och andra motsatser.
| Egenskap | Målarens cirkel (RYB) | Skärmens cirkel (RGB) |
|---|---|---|
| Primärfärger | Rött, gult, blått | Rött, grönt, blått |
| Sekundärfärger | Orange, grönt, violett | Gult, cyan, magenta |
| Motsats till rött | Grönt | Cyan |
| Motsats till blått | Orange | Gult |
| Motsats till gult | Violett | Blått |
| Används av | Målare, konstutbildning, många palettguider | Färgväljare, nyansvärden i CSS, de flesta designprogram |
conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)Vilken ska du använda? För digitalt arbete stämmer skärmens cirkel med dina verktyg, så nyanstalen du skriver in matchar det du ser. Målarens cirkel ger ofta trevligare motsatser, som blått och orange, eftersom den ger de varma färgerna mer utrymme. Många designers läser harmonier ur målarens cirkel och väljer sedan exakta värden på skärmen. Båda går bra, så länge du är konsekvent.
Så läser du färgharmonier ur cirkeln
Harmonier är former som läggs över cirkeln. Vrid formen så får du en ny palett med samma balans.
- Komplementfärger: två nyanser rakt emot varandra. Maximal kontrast. Se komplementfärger.
- Analoga: tre till fem grannar i rad. Lugna och naturliga. Se analoga färger.
- Triad: tre nyanser en tredjedels cirkel från varandra. Djärv men balanserad. Se triadiska färger.
- Delad komplementfärg: en nyans plus de två som ligger på var sida om dess motsats. Kontrast med mindre spänning.
- Kvadrat eller tetrad: fyra nyanser med jämna mellanrum, eller två komplementpar. Rik men svår att styra.
- Monokrom: en nyans i många ljushetsgrader. Se monokroma paletter.
Vad färgcirkeln inte visar
En färgcirkel visar nyans. Den säger ingenting om ljushet eller mättnad, och det är de som avgör det mesta av hur en palett faktiskt ser ut. Blått och orange i full styrka är skarpa tillsammans. Djupt marinblått med en mjuk aprikos använder samma två nyanser och ser förfinat ut. Varje palett du läser ur en färgcirkel behöver ändå en mörk, en ljus och några stillsammare versioner av sina färger.
Enkla digitala färgcirklar är ojämna
I HSL har rent gult och rent blått samma ljushetsvärde, men gult ser mycket ljusare ut. Det beror på att HSL bygger på skärmens kanaler, inte på hur ögat uppfattar ljusstyrka. Perceptuella färgrum som OKLCH rättar till det: lika ljushetsvärden ser lika ljusa ut över alla nyanser, vilket gör dem bättre för att bygga paletter och mjuka gradienter.
Så bygger du en palett med färgcirkeln
- 1
Välj din ankarnyans
Börja med den färg som måste finnas med: en varumärkesfärg, en produktfärg eller en som du hämtat från ett foto.
- 2
Välj en harmoni efter stämningen
Analoga eller monokroma färger för lugn, komplementfärger, delad komplementfärg eller triad för energi.
- 3
Låt en färg leda
Använd ankarfärgen för det mesta av designen och de andra i mindre mängder. Lika mycket av varje färg ser sällan genomtänkt ut.
- 4
Variera ljushet och mättnad
Lägg till en mörk och en ljus version och dämpa de stödjande färgerna. Det är så nyanser blir en palett.
- 5
Testa i en verklig layout
Lägg text på den, kontrollera kontrasten och titta på den i den storlek folk kommer att se den.
När en palett fungerar som färgrutor kan du prova den som gradient. Närliggande nyanser blandas vackert, motsatta nyanser behöver en mellanfärg. Färgkombinationer för gradienter har testade exempel.
Vanliga frågor
Vad är en färgcirkel?
En färgcirkel är en ring av nyanser i spektral ordning som visar hur färger förhåller sig till varandra: motsatser kontrasterar, grannar harmonierar och nyanser med jämna mellanrum balanserar.
Vilka är primärfärgerna på färgcirkeln?
På målarens traditionella cirkel är det rött, gult och blått. På skärmens cirkel, som digitala verktyg använder, är det rött, grönt och blått.
Varför skiljer sig komplementfärgerna åt mellan olika cirklar?
Målarens cirkel och skärmens cirkel har olika primärfärger, så ringen är fördelad olika. På målarens cirkel är blåttets motsats orange, på skärmens cirkel är den gul.
Vilken färgcirkel ska designers använda?
För digitalt arbete stämmer skärmens cirkel med dina verktyg. Många designers läser harmonier ur målarens cirkel och väljer exakta värden på skärmen. Konsekvens spelar större roll än valet.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
