ホーム > カテゴリ > 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色相環のグラデーションのサンプルプログラムです。

  1. <script>
  2. // RGB色空間からHSL色空間へ変換する 
  3. //  r(red)  : 赤色 0-255の値
  4. //  g(green): 緑色 0-255の値
  5. //  b(blue) : 青色 0-255の値 
  6. function rgb2hsl(r, g, b){   
  7.   var max = Math.max(r, g, b);
  8.   var min = Math.min(r, g, b);   
  9.   var hsl = {'h':0,
  10.              's':0,
  11.              'l':(max + min) / 2}; // L(明度)   
  12.  
  13.   if (max != min) {
  14.     // H(色相)  
  15.     if (max == r) hsl.h = 60 * (g - b) / (max-min);
  16.     if (max == g) hsl.h = 60 * (b - r) / (max-min) + 120;
  17.     if (max == b) hsl.h = 60 * (r - g) / (max-min) + 240;
  18.    
  19.     // S(彩度)
  20.     if (hsl.l <= 127){
  21.       hsl.s = (max - min) / (max + min);
  22.     }else{
  23.       hsl.s = (max - min) / (510 - max - min);
  24.     }
  25.   }   
  26.  
  27.   if (hsl.h < 0){
  28.     hsl.h = hsl.h + 360;
  29.   }
  30.  
  31.   hsl.h =  Math.round(hsl.h);
  32.   hsl.s =  Math.round(hsl.s * 100);
  33.   hsl.l =  Math.round((hsl.l / 255) * 100);     
  34.   return hsl;   
  35. }
  36.  
  37. // HSL色空間からRGB色空間へ変換する 
  38. //  h(hue)       : 色相/色合い       0-360度の値
  39. //  s(saturation): 彩度/鮮やかさ     0-100%の値
  40. //  l(lightness) : 明度/明るさ       0-100%の値 
  41. function hsl2rgb(h, s, l){
  42.   var max,min;
  43.   var rgb = {'r':0,'g':0,'b':0};
  44.  
  45.   if (h == 360){
  46.     h = 0;
  47.   }
  48.  
  49.   if(l <= 49){
  50.     max = 2.55 * (l + l * (s / 100));
  51.     min = 2.55 * (l - l * (s / 100));
  52.   }else{
  53.     max = 2.55 * (l + (100 - l) * (s / 100));
  54.     min = 2.55 * (l - (100 - l) * (s / 100)); 
  55.   }  
  56.  
  57.   if (h < 60){
  58.     rgb.r = max;
  59.     rgb.g = min + (max - min) * (h / 60) ;
  60.     rgb.b = min;
  61.   }else if (h >= 60 &&  h < 120){
  62.     rgb.r = min + (max - min) * ((120 - h) / 60);
  63.     rgb.g = max ;
  64.     rgb.b = min;    
  65.   }else if (h >= 120 &&  h < 180){
  66.     rgb.r = min;
  67.     rgb.g = max ;
  68.     rgb.b = min + (max - min) * ((h - 120) / 60);        
  69.   }else if (h >= 180 &&  h < 240){
  70.     rgb.r = min;
  71.     rgb.g = min + (max - min) * ((240 - h) / 60);
  72.     rgb.b = max;     
  73.   }else if (h >= 240 &&  h < 300){
  74.     rgb.r = min + (max - min) * ((h - 240) / 60);
  75.     rgb.g = min;
  76.     rgb.b = max;     
  77.   }else if (h >= 300 &&  h < 360){
  78.     rgb.r = max;
  79.     rgb.g = min;
  80.     rgb.b = min + (max - min) * ((360 - h) / 60); 
  81.   } 
  82.  
  83.   rgb.r =  Math.round(rgb.r);
  84.   rgb.g =  Math.round(rgb.g);
  85.   rgb.b =  Math.round(rgb.b);
  86.   return rgb; 
  87. } 
  88.  
  89. // RGBから#ffffff形式へ変換する
  90. function RGB2bgColor(r,g,b) {
  91.  
  92.   r = r.toString(16);
  93.   if (r.length == 1) r = "0" + r;
  94.  
  95.   g = g.toString(16);
  96.   if (g.length == 1) g = "0" + g;
  97.  
  98.   b = b.toString(16);
  99.   if (b.length == 1) b = "0" + b;
  100.  
  101.   return '#' + r + g + b;  
  102. }
  103.  
  104. var hsl,rgb;
  105. var rgblist = new Array();
  106.  
  107. // 色相環の0度(赤)を元の色にする
  108. hsl = rgb2hsl(255,0,0);
  109.  
  110. var html = '<table>';
  111. var color;
  112.  
  113. var r = 1;
  114. var c = 1;
  115.  
  116. for (var i = 0; i < 360; i= i+30) {    
  117.    html +=  '<tr>\n'; 
  118.    c = 1;
  119.    for (var j = 0; j <= 20; j++) {
  120.      rgb = hsl2rgb(i,hsl.s,j*5);  
  121.      rgblist[rgblist.length] = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b+ ")";
  122.      
  123.      color = RGB2bgColor(rgb.r,rgb.g,rgb.b);
  124.      html += '<td>' ; 
  125.      html += '<div style="background:'+ color  +';">hoge' ;     
  126.      html += '</div>';            
  127.      html += '</td>\n';     
  128.  
  129.    }
  130.    html +=  '</tr>\n'; 
  131.    r++;
  132. }
  133. html += '</table>';
  134.  
  135. document.write(html);
  136. </script>




関連記事


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

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