RGB

光の三要素

Red
赤
Green
緑
Blue
青

    HSL

    HLS色空間

    Wikipediaと順が違うので注意

    hue
    色相 (0-359)
    saturation
    彩度 (0-100 %)
    lightness
    輝度 (0-100 %)
      view source

      JavaScript

      var colors = [];
var max = 256;
var range = 64;
var num = Math.floor(max / range);

[...Array(num).keys()].forEach(function(ri, index){
  [...Array(num).keys()].forEach(function(gi, index){
    [...Array(num).keys()].forEach(function(bi, index){
      var r = ri * range;
      var g = gi * range;
      var b = bi * range;
      var rgb = '' + r + ',' + g + ',' + b;
      colors.push(rgb);
    });
  });
});



var hsls = [];
var hueMax = 360;
var saturationMax = 100;
var lightnessMax = 100;

var num = 6;
var hRange = Math.floor(hueMax / num);
var sRange = Math.floor(saturationMax / num);
var lRange = Math.floor(lightnessMax / num);

[...Array(num).keys()].forEach(function(hi, index){
  [...Array(num).keys()].forEach(function(si, index){
    [...Array(num).keys()].forEach(function(li, index){
      if(li <2){return;}
      var h = hi * hRange;
      var s = si * sRange +'%';
      var l = li * lRange +'%';
      var hsl = '' + h + ',' + s + ',' + l;
      hsls.push(hsl);
    });
  });
});


$(function(){
  var ulRGB = $('#rgb');
  colors.forEach(function(v, index){
    $('<li>').css({backgroundColor: 'rgb('+v+')'}).text(v).appendTo(ulRGB);
  });
  var ulHSL = $('#hsl');
  hsls.forEach(function(v, index){
    $('<li>').css({backgroundColor: 'hsl('+v+')'}).text(v).appendTo(ulHSL);
  });
});

      CSS

      ul{
  display:flex;
  flex-wrap:wrap;
}
li{
  width:25%;
  overflow:hidden;
}

dl{
  max-width:320px;
  display:flex;
  flex-wrap:wrap;
}
dt,dd{
  width:50%;
}

      HTML

      ページのソースを表示 : Ctrl+U , DevTools : F12

      view-source:https://hi0a.com/demo/-js/js-color/

      ABOUT

      hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

      プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

      必要な機能の関数をコピペ利用したり勉強に活用できます。

      プログラムの動作サンプル結果は画面上部に出力表示されています。

      環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

      画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

      動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

      途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。