Generate HEX color for strings

by Sascha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <div class="sticky">
    <a href="#Normal">Normal text</a>
    <a href="#Exceptions">Exception texts</a>
  </div>
  <div class="spacer"></div>
  <a name="Normal"></a>
  <div class="styled-result" id="test">

  </div>

  <hr>
  <a name="Exceptions"></a>
  <div class="styled-result" id="test2">

  </div>

CSS

body {
  font-family: 'Open Sans', sans-serif;
}

div.sticky {
  padding-top: 20px;
  padding: 5px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  border-bottom: 1px solid black;
  background: white;
}

div.sticky a {
  text-decoration: none;
  border: 1px solid black;
  padding: 3px;
  color: black;
}

div.spacer {
  height: 30px;
}

div.styled-result div {
  border: 1px solid black;
  padding: 5px;
  margin: 3px;
}
.red {
  background: red;
}

.Dash {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.3), transparent);
  background-size: 10px 10px;
}

.Dot {
  background: radial-gradient(circle at 1px 1px, rgba(0,0,0, 0.3) 1px, transparent 0);
  background-size: 5px 5px;
}
.LongDashDot {
  position:relative;
}
.LongDashDot:before {
  background-image: url(https://i.stack.imgur.com/j06eS.png);
  content: ' ';
  display: block;
  position: absolute;
  background-size: 15px 15px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

JavaScript

Moonbird = window.Moonbird || {};
Moonbird.Component = Moonbird.Component || {};

Moonbird.Component.SeriesStyleGenerator = function(colorPalette, exceptionColorPalette, lineStyles) {
  let self = {};
  self.registeredColors = {};

  let colors = ['#1a79bf', '#68c4f2', '#9f5edf', '#6b8299', '#5c6371', '#78b8a0', '#98bedb', '#df90f2', '#0c369a',
  	'#9dc742', '#58b947', '#00814f'];
  let exceptionColors = ['#f04e56', '#f26522', '#c1363d', '#f4ca25', '#d1a700', '#ef9ea3'];
  let dashStyles = ['Solid', 'Dash', 'Dot', 'LongDashDot', 'ShortDashDotDot', 'ShortDash', 'ShortDot',
    'LongDash', 'ShortDashDot', 'LongDashDot'
  ];

  let highlightString = null;
  let lastStandardCounter = 0;
  let lastHighlightCounter = 0;

  let [currentColor, currentExceptionColor, currentNormalStyle, currentExceptionStyle] = Array(4).fill(0);

  // Initialization
  if (colorPalette) {
    colors = colorPalette;
  }
  if (lineStyles) {
    dashStyles = lineStyles;
  }
  if (exceptionColorPalette) {
    exceptionColors = exceptionColorPalette;
  }

  self.registerStringToHighlight = function(string) {
    highlightString = string;
  }

  self.assign = function(string) {

    // check if the string already has an assigned color:
    if (self.registeredColors[string]) {
      return self.registeredColors[string];
    }

    let style;
    if (highlightString && string.indexOf(highlightString) === 0) {
      style = {
        Color: exceptionColors[currentExceptionColor],
        Style: dashStyles[currentExceptionStyle]
      };
      currentExceptionColor++;
      if (currentExceptionColor === exceptionColors.length) {
        currentExceptionStyle++;
        if (currentExceptionStyle === dashStyles.length) {
          console.warn("SeriesStyleGenerator", "Ran out of exception colors and styles, restarting.");
          currentExceptionStyle = 0;
        }
        currentExceptionColor = 0;
      }
    } else {
      style = {
        Color: colors[currentColor],
        Style:...