I 1995 anlagde Qualitex corporated en retssag ved en amerikansk domstol mod en konkurrent på markedet for trykpuder, Jacobson Products Co. Jacobson var begyndt at sælge trykpuder med samme gulgrønne farve som Qualitex, hvilket Qualitex mente var en krænkelse, da brugerne i høj grad forbandt farven med Qualitex. Det blev i denne retssag for første gang slået fast, at en enkelt farve i et brand er tilstrækkelig til at opnå en retslig beskyttelse mod andres benyttelse af samme farve. En række firmaer har beskyttet deres brand-farve. Det gælder f.eks. Tiffany karakteristisk grøn-blå farve (Tiffany-blue) og T-Mobile’s magenta.
Det betyde naturligvis ikke, at enhver brug af de beskyttede farver er forbudt, men blot ikke tilladt i samme brancher. Der er frit slag til at bruge tiffany-blue sålænge det ikke er i forbindelse med salg af smykker og hvad nu Tiffany ellers sælger. Nogle gange strækkes håndhævelsen af farvebeskyttelsen til det yderste, som da T-Mobile forbød websitet engadget.com at bruge den magenta farve på deres mobil-relatede side.
Retshåndhævelsen af farvebeskyttelse synes at være noget strengere i USA end i Europa. Således tabte T-Mobile bl.a. ved ved Østre Landsret en sag mod Telia i Danmark om brugen af den magenta farve.
En farve kan således være en vigtig del af et brand. 80% husker brand-ikoner på farven. De fleste husker farven for Twitter, LinkedIn, Youtube, WhatsApp, Snapchat og langt færre husker symbolerne. Derfor har mange af firmaerne også guidelines for deres logo med den præcise farvekode. Youtube er f.eks ikke bare rød, men #FF0000-rød og LinkedIn er ikke bare blå, men #0077B5-blå.
See the Pen Brand Icons by Per Lindsø Larsen (@lindsoe) on CodePen.
Det er således hensigtsmæssigt at bruge de korrekte farver ved anvendelse af brand-ikoner. I ovenstående codepen er samlet baggrundsfarver for 30 hyppigt anvendte Brands. De er i de fleste tilfælde opsamlet fra de respektive brands guidelines eller kilder nævnt i nedenstående links Vis ikonet med
<div id="brand-icons"> <a href="#" class="facebook"><i aria-hidden="true" class="fa fa-facebook"></i></a> </div>
Hvis der ønskes et transparent ikon, hvor baggrunsfarven først vises, når markøren er over ikonet, tilføjes “-transparent” til linkets class-attribut. Altså i dette tilfælde:
<div id="brand-icons"> <a href="#" class="facebook-transparent"><i aria-hidden="true" class="fa fa-facebook"></i></a> </div>
I scss-filen kan sættes følgende variabler:
$iconsInRow: Antal ikoner pr. række
$iconColor: Farve for ikonernes symbol og kant
$iconSize: Ikonernes størrelse
$iconSpace: Afstand mellem ikonerne
$iconBorderRadius kan justeres til den ønskede form:
$iconBorderRadius: 0; $iconBorderRadius: 10%; $iconBorderRadius: 100%; $iconBorderRadius: 5px 20px 5px;
Det er dog ikke altid kun farven, men også ikonets form, der anses som en del af brandet. Linked-In anfører f.eks:
Don’t: Change the radius
Our lovely [in] likes to keep it’s corners gently rounded just as is. It should never be a circle, a square, a triangle, or a trapezoid.
Brand-symbolerne er i denne codepen hentet fra Font Awesome, som der skal inkluderes, f.eks.:
<head> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>
LINKS:
Social Media Colors 2019
Social Media Colors
Social Colors
9 Trademarked Colors