Textmarker-Farben als background-color

Auch in Website kann man, wie im echten Leben, wichtige Passagen markieren bzw. hervorheben.

Für diesen Fall gibt es das HTML Mark Text-Element (<mark>).
Es gibt per Browser-Default eine Farbe welche den Hintergrund farbig hinterlegt.

Diesen Farbwert kann man global per CSS einmalig für die Website definieren:

::-moz-selection{
  background: #______;
}
::selection{
  background: #______;
}

Mit entsprechender CSS-Klasse kann man auch individuell Farben einsetzen.

Warum nicht LifeLike-Farben von STABILO BOSS^® im Webdesign verwenden?

Textmarker ORIGINAL-Farben

.markYellow{
  background: #f1e740; background: rgb(241, 231, 64); background: hsl(57, 86%, 60%);
}
.markBlue{
  background: #3aafdc; background: rgb(58, 175, 220); background: hsl(197, 70%, 55%);
}
.markGreen{
  background: #2ba727; background: rgb(43, 167, 39); background: hsl(118, 62%, 40%);
}
.markRed{
  background: #e94f58; background: rgb(233, 79, 88); background: hsl(356, 78%, 61%);
}
.markTurquoise{
  background: #009e6c; background: rgb(0, 158, 108); background: hsl(161, 100%, 31%);
}
.markOrange{
  background: #f39539; background: rgb(243, 149, 57); background: hsl(30, 89%, 59%);
}
.markLavender{
  background: #85569c; background: rgb(133, 86, 156); background: hsl(280, 29%, 47%);
}
.markPink{
  background: #ea5a79; background: rgb(234, 90, 121); background: hsl(347, 77%, 64%);
}
.markLilac{
  background: #d72e83; background: rgb(215, 46, 131); background: hsl(330, 68%, 51%);
}

Textmarker ORIGINAL-Pastel-Farben

.markTouchOfTurquoise{
  background: #a1d4cf; background: rgb(161, 212, 207); background: hsl(174, 37%, 73%);
}
.markHintOfMint{
  background: #90cbaa; background: rgb(144, 203, 170); background: hsl(146, 36%, 68%);
}
.markCreamyPeach{
  background: #f4a384; background: rgb(244, 163, 132); background: hsl(17, 84%, 74%);
}
.markPinkBlush{
  background: #f4acb6; background: rgb(244, 172, 182); background: hsl(352, 77%, 82%);
}
.markMilkyYellow{
  background: #f8dd74; background: rgb(248, 221, 116); background: hsl(48, 90%, 71%);
}
.markLilacHaze{
  background: #d5b6d4; background: rgb(213, 182, 212); background: hsl(302, 27%, 77%);
}
.markCloudyBlue{
  background: #b5c9df; background: rgb(181, 201, 223); background: hsl(211, 40%, 79%);
}
.markDashOfLime{
  background: #dff18f; background: rgb(223, 241, 143); background: hsl(71, 78%, 75%);
}
.markMellowCoralRed{
  background: #fa7656; background: rgb(250, 118, 86); background: hsl(12, 94%, 66%);
}
.markCherryBlossomPink{
  background: #fe7d8f; background: rgb(254, 125, 143); background: hsl(352, 98%, 74%);
}

source:

• //www.stabilo.com/de/shop/59/textmarker-stabilo-boss-original/kaufen
• //www.stabilo.com/de/shop/185/textmarker-stabilo-boss-original-pastel/kaufen
• //www.stabilo.com/com/products/highlighting/highlighters/stabilo-boss-original/
• //www.stabilo.com/com/products/highlighting/highlighters/stabilo-boss-original-pastel/