Färgnamnssökare — Närmaste CSS-färg

Hitta närmaste CSS-nyckelord

CSS innehåller en lång lista med namngivna färgnyckelord, från välkända val som black, white och red till mer specifika namn som cornflowerblue, papayawhip och mediumseagreen. Den här färgnamnssökaren kopplar valfritt HEX-värde till det närmaste tillgängliga CSS-namnet. Ange en färg så jämför webbläsaren den med den inbyggda nyckelordslistan med hjälp av RGB-avstånd. Det närmaste namnet, dess HEX-värde och flera närliggande alternativ uppdateras direkt.

Namngivna färger är användbara för snabba demos, undervisning, dokumentation och läsbara exempel. De kan också hjälpa dig att beskriva en färg för någon när exakta tokens inte behövs. Listan med namngivna färger är dock begränsad och ojämnt fördelad: det finns många bleka rosa och blå nyanser men färre precisa moderna varumärkesnyanser, så ett närmaste nyckelord bör ses som en approximation och inte som en perfekt ersättning för din ursprungliga HEX-kod.

Så fungerar matchningen mot närmaste färg

Varje CSS-nyckelord har ett fast värde för rött, grönt och blått. Skriptet konverterar din HEX-inmatning till RGB och mäter sedan det kvadrerade avståndet till varje namngiven färg genom att jämföra de tre kanalerna. Namnet med minst avstånd visas som närmaste träff. Metoden är snabb och förutsägbar, vilket gör den idealisk för ett verktyg på klientsidan. Det är ingen fullständig formel för perceptuell färgskillnad, så två färger med liknande RGB-avstånd upplevs inte alltid som lika nära av det mänskliga ögat.

När du ska använda namn i stället för HEX

För designsystem i produktion är HEX, RGB, HSL eller anpassade egenskaper oftast bättre än färgnamn, eftersom de bevarar den exakta avsikten. Namn fungerar bäst i exempel, snabba prototyper, blogginlägg och samtal där läsbarhet är viktigare än precision. Om du använder en namngiven färg i levererad CSS bör du testa den i hela gränssnittet precis som vilken annan token som helst. Det närmaste nyckelordet kan fortfarande behöva en kontrastkontroll innan det blir bakgrund, textfärg eller statusindikator.