Euromind
  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

Euromind
CSS/SCSSHTMLJavascriptWebdesign

Ikonfarver og brands

af Per Lindsø Larsen 24. maj, 2019
skrevet af Per Lindsø Larsen 24. maj, 2019
Ikonfarver og brands

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

BrandIkoner
0 Kommentarer
2
FacebookTwitterPinterestEmail
forrige post
Console-vindue i JsFiddle
næste post
Helt ude i AMP’en

Relaterede indlæg

Historiske administrative geografier i Google Maps

20. april, 2022

Kierkegaard injiceret med Javascript

15. april, 2022

Dansk evighedskalender

7. december, 2020

Headless browser på 10 minutter

25. juli, 2020

API til Statistikbanken

21. september, 2019

Variable fonte med dansk tegnsæt i open source

11. august, 2019

IntersectionObserver

9. august, 2019

Progressbar for dokumentposition

31. juli, 2019

Navngivne RegEx-grupper i ECMAScript 2018

29. juli, 2019

RegEx: Unicode og Look Backward i ECMAScript 2018

24. juli, 2019

Efterlad en kommentar Afbryd svar

Gem mit navn, email, og website i denne browser til senere kommentarer.

Seneste indlæg

  • Historiske administrative geografier i Google Maps

    20. april, 2022
  • Kierkegaard injiceret med Javascript

    15. april, 2022
  • Dansk evighedskalender

    7. december, 2020

Kategorier

  • C#
  • CSS/SCSS
  • Excel
  • HTML
  • Javascript
  • Mobile
  • Webdesign
  • Xamarin

Om mig

Om mig

Per Lindsø Larsen

Freelance fullstack developer bosat i Aarhus.

Du kan hyre mig til korterevarende projekter eller konkrete opgaveløsninger.

Pæn rabat til non-profit organisationer og foreninger.

Når jeg ikke koder, deltager jeg løbende i diverse spændende forskningsprojekter om alt andet end kodning.

Keep in touch

Facebook Twitter Email Github

Tags

Adresser AMP AMP Story Android API Billedformater Billedoptimering Brand C# Codepen Cordova CPR Crome DevTools CSS Debug Ecmascript Excel Fonte Gmail Gulp HTML Ikoner IOS Javascript JsFiddle Machine Learning Mail Mediaquery ML.NET Mobile RegEx SCSS SMTP Stylometri Visual Studio Webdesign Xamarin

Nyhedsbrev

Timeld nyhedsbrev for info om nye blog-indlæg, tips m.v.

  • Facebook
  • Twitter
  • Email
  • Github

@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273


Tilbage til top
Euromind
  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

Populære indlæg

  • 1

    Stylometri i C# – del 2

    7. juni, 2019
  • 2

    Andersen, Grundvig, Kierkegaard og ML.NET – del 1

    11. august, 2019
  • 3

    Send email fra Javascript med Gmail API

    21. juni, 2019
  • 4

    Gmail, Yahoo og Outlook som SMTP-server

    18. april, 2019
  • 5

    API til Statistikbanken

    21. september, 2019
@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273

Læs ogsåx

Forbind Visual Studio til IOS devices på 10 minutter

12. juli, 2019

Danske Adressers Web API

17. juli, 2019

GULP møder AMP – del 1

5. juni, 2019