# Färgkombinationer för logotyper som fungerar, med hex-koder [Canonical HTML page](https://gradiently.design/sv/guide/color-combinations-for-logos) En logotyp måste överleva en favicon, en grå kopia och en rubrik i mörkt läge. De här paren och trion är valda för att klara det, med koder och kontrast du kan kontrollera själv. ## The short version - De flesta starka logotyper använder en eller två färger, eftersom varje extra färg gör märket svårare att återge litet, i tryck och på varierande bakgrunder. - En bra tvåfärgad logotyp parar en mörk färg med en ljus eller klar, så att formerna förblir tydliga även när färgerna är svåra att skilja åt. - Två färger med liknande ljushet, som ett medelrött och ett mellanblått, verkar vibrera där de möts och tappar sin kant när de skrivs ut i grått. - Varje logotyp ska också fungera i en enda färg, i svart och i vitt, innan någon färg läggs till. - En logotyps färger behöver inte vara hela varumärkespaletten: märket kan förbli enkelt medan bakgrunderna runt det bär den rikare färgen. De **färgkombinationer för logotyper** som fungerar bäst parar en mörk färg med en ljus eller klar, som marinblått och guld, skogsgrönt och grädde eller kol och lime. Skillnaden i ljushet håller formerna läsbara i favicon-storlek och i gråskala, medan skillnaden i nyans ger märket dess personlighet. Nedan finns tio testade par och tre trior med hex-koder och kontrastvärden, och sedan ett snabbt sätt att kontrollera vilken kombination som helst själv. ## Därför använder logotyper så få färger En logotyp är det mest reproducerade ett företag äger. Den syns som en webbläsarikon på 16 pixlar, broderad på en skjorta, stämplad på en kaffekopp och tryckt i en färg på ett kvitto. Varje färg du lägger till är en sak till som kan gå fel på något av de ställena. Det är därför så många välkända märken är enfärgade, och de flesta andra tvåfärgade. Börja i svart. Om formen fungerar i svart på vitt och vitt på svart kan färg bara hjälpa. Om den inte gör det räddar ingen kombination den. [Grunderna i logotypdesign](https://gradiently.design/sv/guide/logo-design-basics) tar upp formsidan; den här artikeln utgår från att formen är klar. ## Tio tvåfärgade logotypkombinationer - Marinblått och guld: `linear-gradient(90deg, #14213d 0%, #14213d 55%, #fca311 55%, #fca311 100%)` - Skogsgrönt och grädde: `linear-gradient(90deg, #1b4332 0%, #1b4332 55%, #f1e9da 55%, #f1e9da 100%)` - Kol och lime: `linear-gradient(90deg, #2d2d2d 0%, #2d2d2d 55%, #c6f432 55%, #c6f432 100%)` - Plommon och blekrosa: `linear-gradient(90deg, #4a1942 0%, #4a1942 55%, #f7c8d0 55%, #f7c8d0 100%)` - Vinrött och sand: `linear-gradient(90deg, #6b0f1a 0%, #6b0f1a 55%, #e9d8a6 55%, #e9d8a6 100%)` - Bläck och orange: `linear-gradient(90deg, #1c1917 0%, #1c1917 55%, #f97316 55%, #f97316 100%)` - Lila och mynta: `linear-gradient(90deg, #5b21b6 0%, #5b21b6 55%, #a7f3d0 55%, #a7f3d0 100%)` - Koboltblått och vitt: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 55%, #ffffff 55%, #ffffff 100%)` - Svart och signalrött: `linear-gradient(90deg, #111111 0%, #111111 55%, #e63946 55%, #e63946 100%)` - Blågrönt och korall: `linear-gradient(90deg, #0f766e 0%, #0f766e 55%, #ff7f6e 55%, #ff7f6e 100%)` Tio par visade som hårda delningar, så som de möts inuti ett märke. Klicka på en färgruta för att kopiera dess kod. | Par | Koder | Kontrast | Känns som | | --- | --- | --- | --- | | Marinblått och guld | `#14213d` `#fca311` | 7,9:1 | Etablerat, självsäkert, lite klassiskt | | Skogsgrönt och grädde | `#1b4332` `#f1e9da` | 9,2:1 | Naturligt, hantverksmässigt, lugnt | | Kol och lime | `#2d2d2d` `#c6f432` | 10,7:1 | Energiskt, sportigt, tekniskt | | Plommon och blekrosa | `#4a1942` `#f7c8d0` | 9,4:1 | Varmt, skönhet, butik | | Vinrött och sand | `#6b0f1a` `#e9d8a6` | 8,7:1 | Arv, vin, gästfrihet | | Bläck och orange | `#1c1917` `#f97316` | 6,2:1 | Praktiskt, vänligt, hantverk och verktyg | | Lila och mynta | `#5b21b6` `#a7f3d0` | 7,0:1 | Modernt, lekfullt, mjukvara | | Koboltblått och vitt | `#1d4ed8` `#ffffff` | 6,7:1 | Tydligt, pålitligt, digitalt | | Svart och signalrött | `#111111` `#e63946` | 4,5:1 | Djärvt, brådskande, redaktionellt | | Blågrönt och korall | `#0f766e` `#ff7f6e` | 2,2:1 | Livligt, men bara som formerna intill varandra, aldrig text på text | WCAG-kontrastvärden mellan varje par. Över 4,5:1 kan den ena färgen ligga på den andra som text; lägre par ska ligga sida vid sida som former. Lägg märke till att blågrönt och korall är udda. Båda färgerna har liknande ljushet, så korallfärgade bokstäver på ett blågrönt märke skulle vara svåra att läsa och skulle bli en enda grå klump i ett svartvitt tryck. Paret fungerar ändå när färgerna är separata former, som en blågrön symbol bredvid ett korallfärgat ordmärke, var och en på vit eller mörk bakgrund. Siffrorna kommer från WCAG-formeln som förklaras i [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility). ## Trefärgade logotypkombinationer Tre färger passar märken byggda av separata delar: en symbol av brickor, ett ordmärke med en färgad prick, en uppsättning former för ett barnvarumärke. Förankra trion med en mörk färg och välj sedan två som skiljer sig tydligt i nyans. Att sprida dem runt färghjulet, som i [triadiska färger](https://gradiently.design/sv/guide/triadic-colors), hindrar dem från att konkurrera. - Djuphav: #003049 - Vallmo: #d62828 - Senap: #fcbf49 Primärfärger, vuxna. Ett mörkt blått förankrar ett rött och ett gult som annars skulle skrika. Bra för skolor, idrott och leksaker riktade till föräldrar. - Skifferblågrönt: #264653 - Saffran: #e9c46a - Bränd korall: #e76f51 Kustvärme. Skifferblågrönt bär ordmärket; saffran och bränd korall fyller symbolens former. - Natt: #10002b - Magenta: #f72585 - Cyan: #4cc9f0 Digitalt och högljutt. Magenta och cyan glöder mot ett nästan svart ankare, för märken inom musik, spel och nattliv. ## Logotypfärgkombinationer att undvika ### Undvik - Medelrött och mellanblått som möts: de verkar vibrera - Rent rött och rent grönt tillsammans: svårt för många färgblinda - Gult eller bleka pastellfärger på vitt: märket försvinner - Fyra eller fler färger av lika tyngd - En gradient som enda version av logotypen ### I stället - Gör den ena i paret mycket mörkare - Skilj dem åt på ljushet, inte bara nyans - Lägg bleka färger på mörk bakgrund, eller ge dem kontur - En ledande färg, en eller två stödjande - En platt version först, gradienten som variant Gradientlogotyper är ett specialfall. De kan se superba ut stora, men de får band i tryck och suddas ut i små storlekar. Behåll en platt version i en eller två färger och behandla gradienten som en variant; [gradientlogotyper](https://gradiently.design/sv/guide/gradient-logo) förklarar hur du bygger båda. ## Så testar du en logotypfärgkombination 1. **Skriv ut den i gråskala** Konvertera logotypen till grått. Om de två färgerna blir samma grå har paret för liten ljushetsskillnad. 2. **Krymp den till 16 pixlar** Titta på den som en ikon i webbläsarfliken. Tunna delar i en blek färg försvinner först. 3. **Vänd på den** Lägg logotypen på din mörkaste varumärkesfärg och på vitt. Notera vilken färg som behöver bytas i varje fall och skriv ner det. 4. **Kontrollera färgblindhet** Kör den genom en färgblindhetssimulator. Röd-gröna par flyter ofta ihop för personer med de vanligaste typerna av färgblindhet. 5. **Lägg den på en verklig bakgrund** En logotyp ligger sällan på enkelt vitt i verkligheten. Testa den på ett foto, en gradient och ett rörigt flöde. En kvadratisk design med ordet Hamnen över en gradient, där delar av bokstäverna tonar in i den Ett ordmärke som går rakt över en livlig bakgrund kan tappa delar av bokstäverna. Samma kvadratiska design där bakgrunden är lugnare bakom ordet Hamnen, så att varje bokstav läses Samma ordmärke med bakgrunden lugnare och djupare bakom det. Det sista testet är där många logotyper kämpar. [Att placera en logotyp på en gradientbakgrund](https://gradiently.design/sv/guide/logo-on-gradient-background) tar upp teknikerna. I Gradiently vet en Mark var orden och logotypen ligger: dess lugnaste del flyttar sig bakom dem och Auto-bläck väljer ljus eller mörk per rad ur Markens egen palett, så att en enkel tvåfärgad logotyp kan ligga på en rik bakgrund utan en ruta bakom. ## Håll logotypen enkel och låt varumärket vara rikt Logotypen behöver inte bära varje färg ditt varumärke använder. Många varumärken håller märket i en eller två färger och lägger djupet i bakgrunder, fotografi och typografi. Om du väljer den bredare paletten härnäst har [idéer för varumärkesfärger](https://gradiently.design/sv/guide/brand-color-ideas) 30 att utgå från, och [kända gradientlogotyper](https://gradiently.design/sv/guide/famous-gradient-logos) visar hur etablerade varumärken balanserar ett enkelt märke med uttrycksfull färg. ## FAQ ### Vilken är den bästa färgkombinationen för en logotyp? Det finns inget enskilt bästa par, men en mörk färg med en ljus eller klar, som marinblått och guld eller skogsgrönt och grädde, fungerar nästan överallt eftersom formerna förblir tydliga. ### Hur många färger ska en logotyp ha? En eller två för de flesta logotyper. Tre kan fungera för märken byggda av separata delar, men varje extra färg gör tryck och små storlekar svårare. ### Vilka färger ska inte användas tillsammans i en logotyp? Undvik färger med samma ljushet som möts, som medelrött och mellanblått, och undvik att förlita dig på rött mot grönt, som många färgblinda inte kan skilja åt. ### Ska en logotyp fungera i svartvitt? Ja. En logotyp ska fungera i en färg, i svart och i vitt innan färg läggs till, eftersom den kommer att tryckas och stämplas i enstaka färger. ### Kan en logotyp vara en gradient? Det kan den, men behåll en platt version för små storlekar, broderi och enfärgstryck, och använd gradienten där den har utrymme.