Skip to content

Instantly share code, notes, and snippets.

@tohagan

tohagan/colors.html

Last active November 6, 2017 05:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tohagan/be0922acdbf11e36cb765e179c2893ed to your computer and use it in GitHub Desktop.
Save tohagan/be0922acdbf11e36cb765e179c2893ed to your computer and use it in GitHub Desktop.
Download ZIP
20 colors
Raw
colors.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p01 { color: white; background-color: #FF0000; font-weight: bold; }
p02 { color: white; background-color: #FF2A00; font-weight: bold; }
p03 { color: black; background-color: #FF5B00; font-weight: bold; }
p04 { color: black; background-color: #FF9000; font-weight: bold; }
p05 { color: black; background-color: #FFC600; }
p06 { color: black; background-color: #FFFF00; }
p07 { color: black; background-color: #C6FF00; }
p08 { color: black; background-color: #90FF00; }
p09 { color: black; background-color: #5BFF00; }
p10 { color: black; background-color: #2AFF00; }
p11 { color: black; background-color: #00FF00; }
p12 { color: black; background-color: #00FF2A; }
p13 { color: black; background-color: #00FF5B; }
p14 { color: black; background-color: #00FF90; }
p15 { color: black; background-color: #00FFC6; }
p16 { color: black; background-color: #00FFFF; }
p17 { color: black; background-color: #00C6FF; }
p18 { color: black; background-color: #0090FF; }
p19 { color: white; background-color: #005BFF; }
p20 { color: white; background-color: #002AFF; }
</style>
</head>
<body>
<font size="6">
<table border="1" style="margin-top: 20px;">
<tr><td class="p01">P01 - Urgent - Overdue!</td></tr>
<tr><td class="p02">P02 - Urgent</td></tr>
<tr><td class="p03">P03 - Overdue</td></tr>
<tr><td class="p04">P04 - Overdue</td></tr>
<tr><td class="p05">P05 - Overdue</td></tr>
<tr><td class="p06">P06 - Overdue</td></tr>
<tr><td class="p07">P07 - </td></tr>
<tr><td class="p08">P08 - </td></tr>
<tr><td class="p09">P09 - </td></tr>
<tr><td class="p10">P10 - </td></tr>
<tr><td class="p11">P11 - </td></tr>
<tr><td class="p12">P12 - </td></tr>
<tr><td class="p13">P13 - </td></tr>
<tr><td class="p14">P14 - </td></tr>
<tr><td class="p15">P15 - </td></tr>
<tr><td class="p16">P16 - </td></tr>
<tr><td class="p17">P17 - </td></tr>
<tr><td class="p18">P18 - </td></tr>
<tr><td class="p19">P19 - </td></tr>
<tr><td class="p20">P20 - </td></tr>
</table>
</font>
</body>
</html>
@tohagan
Copy link
Author

tohagan commented Oct 17, 2017 •
edited

Drawn using ... https://plot.ly/create/

priority_colors_20

@tohagan
Copy link
Author

tohagan commented Oct 17, 2017

255 0 0 #FF0000
255 42 0 #FF2A00
255 91 0 #FF5B00
255 144 0 #FF9000
255 198 0 #FFC600
255 255 0 #FFFF00
198 255 0 #C6FF00
144 255 0 #90FF00
91 255 0 #5BFF00
42 255 0 #2AFF00
0 255 0 #00FF00
0 255 42 #00FF2A
0 255 91 #00FF5B
0 255 144 #00FF90
0 255 198 #00FFC6
0 255 255 #00FFFF
0 198 255 #00C6FF
0 144 255 #0090FF
0 91 255 #005BFF
0 42 255 #002AFF

@tohagan
Copy link
Author

tohagan commented Oct 17, 2017

01 #FF0000
02 #FF2A00
03 #FF5B00
04 #FF9000
05 #FFC600
06 #FFFF00
07 #C6FF00
08 #90FF00
09 #5BFF00
10 #2AFF00
11 #00FF00
12 #00FF2A
13 #00FF5B
14 #00FF90
15 #00FFC6
16 #00FFFF
17 #00C6FF
18 #0090FF
19 #005BFF
20 #002AFF

@tohagan
Copy link
Author

tohagan commented Nov 6, 2017 •
edited

Adjusted from colour ranges shown above to reduce the range of green colours.

// maps RGB values in range 0..1   to HTML hex color string.
function rgbFract(r, g, b) {
  return '#' + ('0' + Math.floor(r * 255).toString(16)).slice(-2)
    + ('0' + Math.floor(g * 255).toString(16)).slice(-2)
    + ('0' + Math.floor(b * 255).toString(16)).slice(-2);
}

// Maps 0 -> 1 to RGB background and text colors
function colorTemp(value) {
  var val = Math.max(Math.min(value, 1), 0);

  var num = Math.floor(val * 3);
  var den = (val * 3) % 1;
  var r, g, b;
  switch (num) {
    case 0: r = 0, g = den, b = 1; break;
    case 1: r = den, g = 1, b = 1 - den; break;
    case 2: r = 1, g = 1 - den, b = 0; break;
    default:
      throw new Error('colorTemp(): Value out of range');
  }

  var lum = 1 - (0.299 * r + 0.587 * g + 0.114 * b);

  return {
    value: value, // original value
    lum: lum,      // luminescence
    bgColor: self.rgbFract(r, g, b), // background-color
    color: lum < 0.5 ? "#000000" : "#FFFFFF" // text color
  };
}

function colors() {
  var max = 60;
  var arr = new Array(max);

  for (var i = 0; i < max; i++) {
    var val = (i / max).toFixed(3);
    arr[i] = self.colorTemp(val);
  }

  return arr;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment