Palette board

by Victor Melnik

HTML

<div id="light">
  <div id="board_light" class="board"></div>
  <div id="buttons_light" class="buttons"></div>
</div>
<div id="dark">
  <div id="board_dark" class="board"></div>
  <div id="buttons_dark" class="buttons"></div>
</div>
<br style="clear: both"/>
<br/>
<button id="btnColors">Get colors</button>
<br/>
<textarea id="taColors" rows="3"></textarea>

SCSS

$sat: 100;
$val: 46;
$hue: 0;
$step: 360 / 8;
$size: 32px;
$night: true;
$auto: false;

html {
    line-height: 10px;
    background-color: #7f7f7f;
}

.square {
    display: inline-block;
    width: $size;
    height: $size;
}
.board {
    margin-left: 15px;
}
.buttons {
    margin-top: 20px;
}
.buttons .square {
    margin: 0 2px;
}

.light-tile1 {
    @if $auto {
        background-color: hsl($hue, $sat, $val);
    } @else {
        background-color: #eb0000;
    }
}
.light-tile2 {
    @if $auto {
        background-color: hsl($hue + $step * 1, $sat, $val);
    } @else {
        background-color: #ffa305;
    }
}
.light-tile3 {
    @if $auto {
        background-color: hsl($hue + $step * 2, $sat, $val);
    } @else {
        background-color: #003beb;
    }
}
.light-tile4 {
    @if $auto {
        background-color: hsl($hue + $step * 3, $sat, $val);
    } @else {
        background-color: #00eb3b;
    }
}
.light-tile5 {
    @if $auto {
        background-color: hsl($hue + $step * 4, $sat, $val);
    } @else {
        background-color: #00e6e6;
    }
}
.light-tile6 {
    @if $auto {
        background-color: hsl($hue + $step * 5, $sat, $val);
    } @else {
        background-color: #8005ab;
    }
}
.light-tile7 {
    @if $auto {
        background-color: hsl($hue + $step * 6, $sat, $val);
    } @else {
        background-color: #f4f512;
    }
}
.light-tile8 {
    @if $auto {
        background-color: hsl($hue + $step * 7, $sat, $val);
    } @else {
        background-color: #eb00b0;
    }
}

$val: 35;
.dark-tile1 {
    @if $auto {
        background-color: hsl($hue, $sat, $val);
    } @else {
        background-color: #b30000;
    }
}
.dark-tile2 {
    @if $auto {
        background-color: hsl($hue + $step * 1, $sat, $val);
    } @else {
        background-color: #b37d20;
    }
}
.dark-tile3 {
    @if $auto {
        background-color: hsl($hue + $step * 2, $sat, $val);
    } @else {
        background-color: #1842bf;
    }
}
.dark-tile4 {
    @if $auto {
      ...

JavaScript

const size = 8;
const colors = 8;

create('light');
create('dark');

$('#btnColors').click(function() {
  let colors = getCss('light') + "\n\n" + getCss('dark');
  $('#taColors').val(colors);
});

function getCss(theme) {
  let result = [];
  for (let i = 1; i <= colors; i++) {
    let color = $('.' + theme + '-tile' + i).css('background-color');
    color = rgb2hex(color);
    result.push(color);
  }
  return result.join(', ');
}

function create(theme) {
  for (let i = 0; i < size; i++) {
    let row = $('<div/>');
    for (let j = 0; j < size; j++) {
      $('<span/>', {class: 'square ' + theme + '-tile' + (rand(colors) + 1)}).appendTo(row);
    }
    row.appendTo($('#board_' + theme));
  }
  
  let row = $('<div/>');
  for (let j = 1; j <= size; j++) {
    $('<span/>', {class: 'square ' + theme + '-tile' + j}).appendTo(row);
  }
  row.appendTo($('#buttons_' + theme));
}

function rand(x) {
  return Math.floor(Math.random() * x);
}

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
console.log(rgb);
    rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d+)?\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}