Färg

Färgteori, paletter och gradientfärger, med koder du kan kopiera.

200 guider · 11 ämnen

Färg

Färglärans grunder för dig som inte är formgivare

5 minuters läsning

Du behöver ingen konstskola för att välja färger väl. Sex idéer förklarar nästan varje färgval, och var och en går att lära sig på några minuter.

Färg

Så använder du en färgcirkel för att välja en palett

5 minuters läsning

Färgcirkeln är färgens äldsta verktyg och fortfarande det mest användbara. Här är hur du läser en, varför målarens cirkel och skärmens cirkel inte är överens och hur du gör den till en palett.

Färg

Komplementfärger: kontrast som ändå känns balanserad

5 minuters läsning

Motsatta färger ger den starkaste kontrast som färg kan erbjuda, och den snabbaste vägen till en design som surrar eller en som skriker. Skillnaden är proportion och ljushet.

Färg

Analoga färger: den enklaste vägen till en lugn färgpalett

4 minuters läsning

Välj tre grannar i färgcirkeln så kan du knappt göra fel. Konsten är att ge dem tillräckligt med kontrast för att hålla intresset uppe, och att veta när lugnet ska brytas.

Färg

Triadfärger och delad komplementfärg, förklarat

4 minuters läsning

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.

Färg

Monokromatiskt färgschema: en nyans, en hel identitet

5 minuters läsning

En nyans låter begränsande tills du ser hur stort omfång som ryms i den. Byggd på rätt sätt kan en enda färg täcka bakgrunder, text, knappar och gradienter, och se mer särpräglad ut än en regnbåge.

Färg

Så väljer du varumärkesfärger: en metod steg för steg

5 minuters läsning

Varumärkesfärger väljs, de hittas inte. En tydlig metod tar dig från ett tomt blad till en palett som är särpräglad, läsbar och fortfarande rätt om två år.

Färg

Färgpsykologi: vad som är sant och vad som är myt

5 minuters läsning

Scheman som säger att rött betyder hunger och blått betyder tillit finns överallt, och är oftast för förenklade för att vara användbara. Här är en ärligare bild av vad färg gör och hur du använder den väl.

Färg

Färgers betydelse i olika kulturer: en försiktig guide

5 minuters läsning

Vitt kan betyda bröllop eller begravning. Rött kan betyda fara eller lycka. Om dina designer ska resa är det här vad de viktigaste färgerna bär på olika håll, och hur du kontrollerar innan du lanserar.

Färg

Lila gradienter: paletter, koder och hur du använder dem

5 minuters läsning

Lila är en av de mest använda gradientfärgerna på webben, vilket gör den både ett tryggt val och lätt att försvinna i. Här är paletter som känns genomtänkta, med koderna för att använda dem.

Färg

Blå gradienter: 20 paletter från is till midnatt

5 minuters läsning

Blått är den tryggaste färgen i design, och just därför ser så många blå gradienter likadana ut. Här är tjugo som inte gör det, ordnade från ljusast till mörkast, med koderna och tanken bakom dem.

Färg

Rosa gradienter som känns moderna, inte sockersöta

4 minuters läsning

Rosa kan se ut som en godisbutik eller ett modemagasin. Skillnaden ligger sällan i själva rosan utan i vad du sätter bredvid den. Här är paletter, kombinationer och koder för rosa som känns aktuellt.

Färg

Solnedgångsgradienter: orange, korall och skymningspaletter

4 minuters läsning

De flesta solnedgångsgradienter går fel på samma ställe: mitten, där blått möter orange och blir grått. En riktig himmel gör aldrig så. Här är ordningen naturen använder, och tio paletter byggda på den.

Färg

Gröna gradienter: fräscha, djupa och elektriska

5 minuters läsning

Grönt kan vara en vårmorgon, en privat herrklubb eller en raveaffisch. Här är gröna gradienter för alla tre, med koder, och en väg ut ur bladgröna klichéer.

Färg

Svarta gradienter: så designar du med nästan svart

6 minuters läsning

Rent svart är ett hål i skärmen. De svarta gradienter som känns exklusiva är byggda av nästan-svarta toner med lite färg i, och ett ljus som rör sig.

Färg

Röd gradient: energi utan larmkänsla

5 minuters läsning

Rött får uppmärksamhet snabbare än någon annan färg, och det är just därför det går fel. Så bygger du röda gradienter som känns levande, varma och trygga i stället för högljudda.

Färg

Regnbågsgradient som inte ser ut som en standardmall

5 minuters läsning

Standardregnbågen har en bländande gul rand och ett mörkblått hål. Rätta ljusheten, välj din båge, så blir spektrumet ett av de gladaste verktyg du har.

Färg

Färgkontrast: läsbar text för alla

5 minuters läsning

Kontrast är skillnaden mellan ord som folk läser och ord som folk hoppar över. WCAG-siffrorna på klarspråk, hur du kontrollerar dem och vad som händer när bakgrunden är en gradient.

Färg

Hexkoder för färg, RGB, HSL och OKLCH förklarade

5 minuters läsning

#7c3aed, rgb(124 58 237), hsl(262 83% 58%) och oklch(54.1% 0.247 293) är samma violett. Här är vad varje skrivsätt egentligen säger, och när var och en gör nytta.

Färg

Färgpalett från bild: så plockar du fram en ur ett foto

5 minuters läsning

En pipett ger dig en pixel. En palett behöver de färger du minns från bilden, i rätt proportioner. Så tar du dig från det ena till det andra.

Färg

60-30-10-regeln: färgproportioner för design och varumärke

5 minuters läsning

De flesta paletter misslyckas på proportionerna, inte på valet. Tre siffror visar hur mycket av varje färg du ska använda, och de fungerar lika bra på en mobilskärm som i vardagsrummen där de kommer ifrån.

Färg

Varma och kalla färger: använd temperatur med avsikt

5 minuters läsning

Varje färg har en temperatur, även dina gråa och vita. Lär dig läsa den så kan du få en design att kännas närmare, lugnare eller ljusare utan att ändra en enda nyans.