Textmarker-Farben als background-color

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: #fce900; background: rgb(252,233,0); background: hsl(55.5,100%,49.4%);
}
.markBlue{
  background: #3ec0f0; background: rgb(62,192,240); background: hsl(196.2,85.6%,59.2%);
}
.markGreen{
  background: #85bd3f; background: rgb(133,189,63); background: hsl(86.7,50%,49.4%);
}
.markRed{
  background: #f18794; background: rgb(241,135,148); background: hsl(352.6,79.1%,73.7%);
}
.markTurquoise{
  background: #009bb4; background: rgb(0,155,180); background: hsl(188.3,100%,35.3%);
}
.markOrange{
  background: #ea5725; background: rgb(234,87,37); background: hsl(15.2,82.4%,53.1%);
}
.markLavender{
  background: #9d74b1; background: rgb(157,116,177); background: hsl(280.3,28.1%,57.5%);
}
.markPink{
  background: #ed6ea7; background: rgb(237,110,167); background: hsl(333.1,77.9%,68%);
}
.markLilac{
  background: #9a35b5; background: rgb(154,53,181); background: hsl(287.3,54.7%,45.9%);
}

markYellow markBlue markGreen markRed markTurquoise markOrange markLavender markPink markLilac

Textmarker ORIGINAL-Pastel-Farben

.markTouchOfTurquoise{
  background: #81cac6; background: rgb(129,202,198); background: hsl(176.7,40.8%,64.9%);
}
.markHintOfMint{
  background: #a9d5b5; background: rgb(169,213,181); background: hsl(136.4,34.4%,74.9%);
}
.markPaleOrange{
  background: #f0bb82; background: rgb(240,187,130); background: hsl(31.1,78.6%,72.5%);
}
.markCreamyPeach{
  background: #f49e84; background: rgb(244,158,132); background: hsl(13.9,83.6%,73.7%);
}
.markPinkBlush{
  background: #f5aebb; background: rgb(245,174,187); background: hsl(349,78%,82.2%);
}
.markMilkyYellow{
  background: #f5efa1; background: rgb(245,239,161); background: hsl(55.7,80.8%,79.6%);
}
.markFrozenFuchsia{
  background: #e5a0dc; background: rgb(229,160,220); background: hsl(307.8,57%,76.3%);
}
.markBreezyBlue{
  background: #a1d3ea; background: rgb(161,211,234); background: hsl(198.9,63.5%,77.5%);
}
.markCloudyBlue{
  background: #b2e0f7; background: rgb(178,224,247); background: hsl(200,81.2%,83.3%);
}
.markDashOfLime{
  background: #ccff99; background: rgb(204,255,153); background: hsl(90,100%,80%);
}
.markMellowCoralRed{
  background: #ff6666; background: rgb(255,102,102); background: hsl(0,100%,70%);
}
.markCherryBlossomPink{
  background: #ff9999; background: rgb(255,153,153); background: hsl(0,100%,80%);
}
.markPastelDustyGrey{
  background: #bcc6c7; background: rgb(188,198,199); background: hsl(185.5,8.9%,75.9%);
}

markTouchOfTurquoise markHintOfMint markPaleOrange markCreamyPeach markPinkBlush markMilkyYellow markFrozenFuchsia markBreezyBlue markCloudyBlue markDashOfLime markMellowCoralRed markCherryBlossomPink markPastelDustyGrey

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/