Hitta färgnamn

Vad är en färgnamnssökare?

Färgnamnssökaren visar det närmaste färgnamnet när du anger en HEX-, RGB- eller HSL-kod. Verktyget jämför din färg med 140 standardiserade CSS-färger och en utökad databas med över 1 500 färgnamn.

Det är praktiskt när du har en färgkod i Figma, Photoshop, en brand guide eller ett CSS-projekt och behöver ett begripligt namn för att dokumentera eller beskriva färgen. Du får ett svenskt primärnamn, det engelska kanoniska namnet som referens och fem liknande alternativ direkt i samma vy.

När är verktyget extra användbart?

• Design och branding – Översätt en HEX-kod snabbt till ett färgnamn som fungerar i presentationer, briefar och designsystem
• Kommunikation i teamet – Beskriv färger tydligare för kunder, kollegor och utvecklare än med bara siffror och koder
• CSS och frontend – Kontrollera om en färg har ett direkt användbart CSS-namn eller om en närliggande namngiven färg passar bättre
• Palettarbete – Jämför närliggande nyanser och hitta harmoniska alternativ kring en ursprungsfärg
• Lärande och referens – Koppla engelska standardnamn som coral, royal blue och slate gray till svenska färgord
• Dokumentation av tillgångar – Beskriv färger från skärmdumpar, brand guides och befintliga projekt på ett mer begripligt sätt

Viktiga funktioner

• Flera inmatningsformat – Ange färger som HEX, RGB eller HSL. Du kan också välja färgen direkt i färgväljaren.
• Två databaser – Växla mellan 140 CSS-standardfärger och en utökad samling med 1 500+ färgnamn.
• Lokaliserade färgnamn – Där det känns naturligt visar verktyget ett svenskt primärnamn och lägger till det engelska kanoniska namnet som andra rad.
• Likhetsvisning – Den bästa träffen visas som exakt träff eller med en tydlig procentsats för likhet.
• Fem liknande alternativ – Bredvid huvudträffen visas fem närliggande färger som du kan klicka på direkt.
• Kopiera med ett klick – HEX-, RGB- och HSL-värden går att kopiera direkt till urklipp genom att klicka på koderna.
• Sökhistorik – Upp till 20 senast kontrollerade färger sparas lokalt i webbläsaren så att du snabbt kan gå tillbaka till tidigare träffar.

Så använder du verktyget

1. Ange en färg – Välj en färg i färgväljaren eller skriv in ett HEX-, RGB- eller HSL-värde som du redan har.
2. Välj databas – Bestäm om du vill söka bland bara CSS-färger eller hela den utökade färgnamnsdatabasen.
3. Granska bästa träffen – Läs av färgnamnet, den engelska referensbenämningen och de tillhörande färgkoderna.
4. Jämför liknande färger – Klicka på någon av de föreslagna alternativen för att hoppa direkt till den nyansen.
5. Kopiera rätt värde – Ta HEX, RGB eller HSL med ett klick och klistra in i designfiler, dokumentation eller CSS.

Guide till färgdatabasen

CSS-färger (140)

De här namnen kommer från webbstandarden och kan användas direkt i CSS som färgvärden, till exempel red, gold eller royalblue. Om du vill ha ett standardiserat färgnamn som fungerar direkt i webbläsare är det här den bästa första databasen att börja med.

Utökade färger (1 500+)

Den utökade samlingen kompletterar CSS-namnen med vanliga och mer beskrivande färgnamn från bland annat natur, mat, ädelstenar, metaller, neonfärger och pasteller. Den är särskilt användbar när du vill hitta ett mer nyanserat eller uttrycksfullt namn.

Så beräknas likheten

Likhetsgraden bygger på ett färgavstånd mellan din inmatade färg och färgerna i den valda databasen. Ju mindre avstånd, desto högre procentuell likhet och desto närmare ligger det föreslagna färgnamnet din ursprungliga färg.

Vanliga frågor