Change colorHash function to use HSL values (#1843)

* Change `colorHash` function to use HSL values to avoid too dark/light colors
* Closes #1842

CHANGELOG.md

@@ -24,6 +24,7 @@
 - Allow for one theme to reference and inherit from another theme through approaches like `{% extends "core/page.html" %}`
 - Allow for the automatic date rendering format to be overridden by specifying a `data-time-format` attribute.
 - Add styling for the `<blockquote>` element.
+- Change `colorHash` function to use HSL color values to avoid generating too light/dark colors
 - Fix scoreboard table identifier to switch between User/Team depending on configured user mode
 - Switch to using Bootstrap's scss in `core/main.scss` to allow using Bootstrap variables
 - Consolidate Jinja error handlers into a single function and better handle issues where error templates can't be found

CTFd/themes/core/assets/js/utils.js

@@ -172,17 +172,25 @@ WindowController.prototype.broadcast = function(type, data) {
   }
 };
 
+// https://gist.github.com/0x263b/2bdd90886c2036a1ad5bcf06d6e6fb37
 export function colorHash(str) {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
     hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    hash = hash & hash;
   }
-  let colour = "#";
-  for (let i = 0; i < 3; i++) {
-    let value = (hash >> (i * 4)) & 0xff;
-    colour += ("00" + value.toString(16)).substr(-2);
-  }
-  return colour;
+  // Range calculation
+  // diff = max - min;
+  // x = ((hash % diff) + diff) % diff;
+  // return x + min;
+  // Calculate HSL values
+  // Range from 0 to 360
+  let h = ((hash % 360) + 360) % 360;
+  // Range from 75 to 100
+  let s = (((hash % 25) + 25) % 25) + 75;
+  // Range from 40 to 60
+  let l = (((hash % 20) + 20) % 20) + 40;
+  return `hsl(${h}, ${s}%, ${l}%)`;
 }
 
 export function htmlEntities(string) {