ホーム > カテゴリ > HTML5・JavaScript >

12色相環グラデーション

12色相環グラデーションの230色とカラーネーム140色、基本16色の一覧です。

12色相環のグラデーション

色をクリックすると16進表記のカラーコード、rgb()、hsl()の値が表示されます。

上図は12色相環の明度を19で分割して230色(228+黒/白)を作成しています。

[12色相環]

RGBとHSLの相互変換　RGBとHSVの相互変換　色相環と12色相環

基本16色 + 1色

HTMLの基本16色にCSS 2.1で定義されたorangeを追加しています。

black #000000
white #ffffff
silver #c0c0c0
gray #808080
red #ff0000
maroon #800000
orange #ffa500
olive #808000
yellow #ffff00
lime #00ff00
green #008000
aqua #00ffff
teal #008080
blue #0000ff
navy #000080
fuchsia #ff00ff
purple #800080

Web216色

Webで使用される216色のウェブセーフカラーはウェブセーフカラー(wikipedia) をご覧ください。

カラーネーム140色

HTMLカラー140色のカラーネームとカラーコードの一覧です。

black #000000
slategray #708090
lightslategray #778899
dimgray #696969
gray #808080
darkgray #a9a9a9
silver #c0c0c0
lightgrey #d3d3d3
gainsboro #dcdcdc
whitesmoke #f5f5f5
ghostwhite #f8f8ff
white #ffffff
snow #fffafa
floralwhite #fffaf0
midnightblue #191970
navy #000080
darkblue #00008b
mediumblue #0000cd
blue #0000ff
royalblue #4169e1
cornflowerblue #6495ed
lightsteelblue #b0c4de
lightskyblue #87cefa
skyblue #87ceeb
paleturquoise #afeeee
powderblue #b0e0e6
lightblue #add8e6
lightcyan #e0ffff
azure #f0ffff
aliceblue #f0f8ff
mintcream #f5fffa
cyan #00ffff
aqua #00ffff
aquamarine #7fffd4
turquoise #40e0d0
mediumturquoise #48d1cc
darkturquoise #00ced1
deepskyblue #00bfff
dodgerblue #1e90ff
steelblue #4682b4
cadetblue #5f9ea0
orangered #ff4500
tomato #ff6347
darkorange #ff8c00
orange #ffa500
goldenrod #daa520
yellow #ffff00
gold #ffd700
khaki #f0e68c
palegoldenrod #eee8aa
lemonchiffon #fffacd
lightgoldenrodyellow #fafad2
lightyellow #ffffe0
cornsilk #fff8dc
papayawhip #ffefd5
antiquewhite #faebd7
linen #faf0e6
seashell #fff5ee
oldlace #fdf5e6
ivory #fffff0
darkgreen #006400
green #008000
forestgreen #228b22
limegreen #32cd32
lime #00ff00
chartreuse #7fff00
lawngreen #7cfc00
greenyellow #adff2f
springgreen #00ff7f
mediumspringgreen #00fa9a
lightgreen #90ee90
palegreen #98fb98
honeydew #f0fff0
beige #f5f5dc
darkseagreen #8fbc8f
mediumaquamarine #66cdaa
lightseagreen #20b2aa
darkcyan #008b8b
teal #008080
darkslategray #2f4f4f
mediumseagreen #3cb371
seagreen #2e8b57
yellowgreen #9acd32
olivedrab #6b8e23
darkolivegreen #556b2f
olive #808000
maroon #800000
darkred #8b0000
firebrick #b22222
brown #a52a2a
rosybrown #bc8f8f
indianred #cd5c5c
lightcoral #f08080
salmon #fa8072
coral #ff7f50
darksalmon #e9967a
lightsalmon #ffa07a
peachpuff #ffdab9
bisque #ffe4c4
blanchedalmond #ffebcd
wheat #f5deb3
moccasin #ffe4b5
navajowhite #ffdead
tan #d2b48c
burlywood #deb887
sandybrown #f4a460
peru #cd853f
chocolate #d2691e
sienna #a0522d
saddlebrown #8b4513
darkgoldenrod #b8860b
darkkhaki #bdb76b
indigo #4b0082
darkmagenta #8b008b
purple #800080
darkviolet #9400d3
blueviolet #8a2be2
darkorchid #9932cc
mediumorchid #ba55d3
orchid #da70d6
violet #ee82ee
plum #dda0dd
thistle #d8bfd8
lavenderblush #fff0f5
lavender #e6e6fa
mediumpurple #9370db
mediumslateblue #7b68ee
slateblue #6a5acd
darkslateblue #483d8b
red #ff0000
crimson #dc143c
mediumvioletred #c71585
deeppink #ff1493
fuchsia #ff00ff
magenta #ff00ff
hotpink #ff69b4
palevioletred #db7093
lightpink #ffb6c1
pink #ffc0cb
mistyrose #ffe4e1

サンプルプログラム

12色相環のグラデーションのサンプルプログラムです。

<script>
// RGB色空間からHSL色空間へ変換する 
//  r(red)  : 赤色 0-255の値
//  g(green): 緑色 0-255の値
//  b(blue) : 青色 0-255の値 
function rgb2hsl(r, g, b){   
  var max = Math.max(r, g, b);
  var min = Math.min(r, g, b);   
  var hsl = {'h':0,
             's':0,
             'l':(max + min) / 2}; // L(明度)   
 
  if (max != min) {
    // H(色相)  
    if (max == r) hsl.h = 60 * (g - b) / (max-min);
    if (max == g) hsl.h = 60 * (b - r) / (max-min) + 120;
    if (max == b) hsl.h = 60 * (r - g) / (max-min) + 240;
   
    // S(彩度)
    if (hsl.l <= 127){
      hsl.s = (max - min) / (max + min);
    }else{
      hsl.s = (max - min) / (510 - max - min);
    }
  }   

  if (hsl.h < 0){
    hsl.h = hsl.h + 360;
  }
 
  hsl.h =  Math.round(hsl.h);
  hsl.s =  Math.round(hsl.s * 100);
  hsl.l =  Math.round((hsl.l / 255) * 100);     
  return hsl;   
}

// HSL色空間からRGB色空間へ変換する 
//  h(hue)       : 色相/色合い       0-360度の値
//  s(saturation): 彩度/鮮やかさ     0-100%の値
//  l(lightness) : 明度/明るさ       0-100%の値 
function hsl2rgb(h, s, l){
  var max,min;
  var rgb = {'r':0,'g':0,'b':0};
 
  if (h == 360){
    h = 0;
  }
 
  if(l <= 49){
    max = 2.55 * (l + l * (s / 100));
    min = 2.55 * (l - l * (s / 100));
  }else{
    max = 2.55 * (l + (100 - l) * (s / 100));
    min = 2.55 * (l - (100 - l) * (s / 100)); 
  }  
 
  if (h < 60){
    rgb.r = max;
    rgb.g = min + (max - min) * (h / 60) ;
    rgb.b = min;
  }else if (h >= 60 &&  h < 120){
    rgb.r = min + (max - min) * ((120 - h) / 60);
    rgb.g = max ;
    rgb.b = min;    
  }else if (h >= 120 &&  h < 180){
    rgb.r = min;
    rgb.g = max ;
    rgb.b = min + (max - min) * ((h - 120) / 60);        
  }else if (h >= 180 &&  h < 240){
    rgb.r = min;
    rgb.g = min + (max - min) * ((240 - h) / 60);
    rgb.b = max;     
  }else if (h >= 240 &&  h < 300){
    rgb.r = min + (max - min) * ((h - 240) / 60);
    rgb.g = min;
    rgb.b = max;     
  }else if (h >= 300 &&  h < 360){
    rgb.r = max;
    rgb.g = min;
    rgb.b = min + (max - min) * ((360 - h) / 60); 
  } 
 
  rgb.r =  Math.round(rgb.r);
  rgb.g =  Math.round(rgb.g);
  rgb.b =  Math.round(rgb.b);
  return rgb; 
} 

// RGBから#ffffff形式へ変換する
function RGB2bgColor(r,g,b) {
 
  r = r.toString(16);
  if (r.length == 1) r = "0" + r;
 
  g = g.toString(16);
  if (g.length == 1) g = "0" + g;
 
  b = b.toString(16);
  if (b.length == 1) b = "0" + b;
 
  return '#' + r + g + b;  
}

var hsl,rgb;
var rgblist = new Array();

// 色相環の0度(赤)を元の色にする
hsl = rgb2hsl(255,0,0);

var html = '<table>';
var color;

var r = 1;
var c = 1;

for (var i = 0; i < 360; i= i+30) {    
   html +=  '<tr>\n'; 
   c = 1;
   for (var j = 0; j <= 20; j++) {
     rgb = hsl2rgb(i,hsl.s,j*5);  
     rgblist[rgblist.length] = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b+ ")";
     
     color = RGB2bgColor(rgb.r,rgb.g,rgb.b);
     html += '<td>' ; 
     html += '<div style="background:'+ color  +';">hoge' ;     
     html += '</div>';            
     html += '</td>\n';     

   }
   html +=  '</tr>\n'; 
   r++;
}
html += '</table>';

document.write(html);
</script>




関連記事


前の記事：カラーパレットのソート、整列[検証]
次の記事：Webサイトを多言語に対応する

公開日：2016年02月28日
記事NO：01806


プチモンテ ※この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～

オリジナル曲を始めました✨

背徳の遊牧民 feat. オペラさん (2025/9/1 新曲)