2014-10-02T22:36:26の更新内容

programming/tips/colorspaces/index.wiki.txt

current previous
33,65 33,19
 
      <th>値</th>
      <th>値</th>
 
    </tr>
    </tr>
 
  </thead>
  </thead>
~
  <tbody style="margin: 0;">
  <tbody>
 
    <tr>
    <tr>
 
      <td style="text-align: center;" rowspan="7">
      <td style="text-align: center;" rowspan="7">
~
        <table style="margin: 0;">
        <div id="csview-preview" style="width: 120px; height: 120px; border: double 3px black;"/>
~
          <thead>
        <div id="csview-info">-</div>
~
            <tr>
        <div><input type="reset" onclick="csviewSetColor(0xff, 0xff, 0xff);"/></div>
+
              <th>色</th>
+
              <th>近似色 (カラーネーム)</th>
+
            </tr>
+
          </thead>
+
          <tbody>
+
            <tr>
+
              <td style="text-align: center; width: 200px;">
+
                <div id="csview-preview" style="display: inline-block; margin: 0; width: 160px; height: 160px; border: double 3px black;"/>
+
                <input id="csview-base-r" type="hidden"/>
+
                <input id="csview-base-g" type="hidden"/>
+
                <input id="csview-base-b" type="hidden"/>
+
              </td>
+
              <td style="text-align: center; width: 200px;">
+
                <div id="csview-nearest" style="display: inline-block; margin: 0; width: 160px; height: 160px; border: double 3px black;"/>
+
              </td>
+
            </tr>
+
            <tr>
+
              <td>
+
                <div id="csview-preview-info">-</div>
+
              </td>
+
              <td>
+
                <div id="csview-nearest-info">-</div>
+
              </td>
+
            </tr>
+
            <tr>
+
              <td style="text-align: center;" colspan="2">
+
                <input type="reset" onclick="csviewSetColor(0xff, 0xff, 0xff);"/>
+
                <input type="button" value="階調の反転" onclick="csviewSetInvertedColor();"/>
+
                <input type="button" value="補色" onclick="csviewSetComplementaryColor();"/>
+
                <input type="button" value="純色" onclick="csviewSetSaturatedColor();"/>
+
                <input type="button" value="無彩色" onclick="csviewSetAchromaticColor();"/>
+
              </td>
+
            </tr>
+
          </tbody>
+
        </table>
 
      </td>
      </td>
 
      <th>カラーコード</th>
      <th>カラーコード</th>
 
      <td>
      <td>
 
        <form action="">
        <form action="">
 
          <p>
          <p>
 
            #<input id="csview-colorcode" type="text" size="6"/>
            #<input id="csview-colorcode" type="text" size="6"/>
~
            <input type="button" value="set" onclick="csviewSetColorByColorCode();"/>
            <input type="button" value="set" onclick="cmviewSetColorByColorCode();"/>
+
          </p>
+
        </form>
+
      </td>
+
    </tr>
+
    <tr>
+
      <th>カラーネーム</th>
+
      <td>
+
        <form action="">
+
          <p>
+
            <select id="csview-colorname"></select>
+
            <input type="button" value="set" onclick="csviewSetColorByColorName();"/>
 
          </p>
          </p>
 
        </form>
        </form>
 
      </td>
      </td>
169,22 123,11
 
::RGB, CMY, CMYK|それぞれ16進で00~ffの範囲の数値を入力してください
::RGB, CMY, CMYK|それぞれ16進で00~ffの範囲の数値を入力してください
 
::HSV, HSL|S, V, Lは0.0~1.0の範囲の数値を入力してください
::HSV, HSL|S, V, Lは0.0~1.0の範囲の数値を入力してください
 
Hは0~359の範囲の数値を入力してください (360を超える値は自動的に0~359の範囲に正規化します)
Hは0~359の範囲の数値を入力してください (360を超える値は自動的に0~359の範囲に正規化します)
+
::近似色|名前(カラーネーム)が定義されている147色のうち、現在の色に最も近い色を表示します
+
::階調の反転|現在の色をネガポジ反転した色を表示します
+
::補色|現在の色の彩度・明度を維持したまま色相だけを反転した色を表示します
+
::純色|現在の色の彩度・明度を最大(1.0)にした色を表示します
+
::無彩色|現在の色の彩度を最小(0.0)にした色を表示します
 

        

        
 
#adunit(rect)
#adunit(rect)
 

        

        
 
#javascript(csview,noscript=実行するにはJavaScriptを有効にしてください){{
#javascript(csview,noscript=実行するにはJavaScriptを有効にしてください){{
 
$(function() {
$(function() {
+
  var select = $("#csview-colorname");
+
  for (var i = 0; i < cssColors.length; i++) {
+
    var colorname = cssColors[i].name;
+
    select.append($('<option>').attr({value: colorname}).text(colorname).css("background-color", colorname));
+
  }
+

          
 
  csviewSetColor(0xff, 0xff, 0xff);
  csviewSetColor(0xff, 0xff, 0xff);
 
});
});
 

        

        
208,34 151,19
 
    $("#csview-colorcode").val(rgbHex);
    $("#csview-colorcode").val(rgbHex);
 
    $("#csview-preview").css("background-color", colorCode);
    $("#csview-preview").css("background-color", colorCode);
 

        

        
+
    var nearest = findNearestColor(r, g, b);
+

          
+
    $("#csview-nearest").css("background-color", nearest.name);
+

          
 
    csviewSetRgb(r, g, b);
    csviewSetRgb(r, g, b);
+
    csviewSetColorName(nearest.name);
 
    csviewSetCmy(r, g, b);
    csviewSetCmy(r, g, b);
 
    csviewSetCmyk(r, g, b);
    csviewSetCmyk(r, g, b);
 
    csviewSetHsv(r, g, b);
    csviewSetHsv(r, g, b);
 
    var hsl = csviewSetHsl(r, g, b);
    var hsl = csviewSetHsl(r, g, b);
 

        

        
~
    $("#csview-preview-info").replaceWith(
    $("#csview-info").replaceWith(
~
      "<div id=\"csview-preview-info\">" +
      "<div id=\"csview-info\">" + colorCode + 
+
      colorCode + 
 
      "<br/>" + 
      "<br/>" + 
 
      "rgb(" + r + ", " + g + ", " + b + ");" +
      "rgb(" + r + ", " + g + ", " + b + ");" +
 
      "<br/>" + 
      "<br/>" + 
 
      "hsl(" + hsl.h.toFixed(0) + ", " + (hsl.s * 100.0).toFixed(1) + "%, " + (hsl.l * 100.0).toFixed(1) + "%);" +
      "hsl(" + hsl.h.toFixed(0) + ", " + (hsl.s * 100.0).toFixed(1) + "%, " + (hsl.l * 100.0).toFixed(1) + "%);" +
 
      "</div>");
      "</div>");
+

          
+
    $("#csview-nearest-info").replaceWith(
+
      "<div id=\"csview-nearest-info\">" +
+
      nearest.name + ", #" + toPaddedHex(nearest.r) + toPaddedHex(nearest.g) + toPaddedHex(nearest.b) +
+
      "</div>");
+

          
+
    $("#csview-base-r").val(toPaddedHex(r));
+
    $("#csview-base-g").val(toPaddedHex(g));
+
    $("#csview-base-b").val(toPaddedHex(b));
 
  }
  }
 
  catch (e) {
  catch (e) {
 
    csviewPrintError(e);
    csviewPrintError(e);
244,8 172,7
 

        

        
 
function csviewPrintError(e)
function csviewPrintError(e)
 
{
{
~
  $("#csview-preview-info").text(e);
  $("#csview-info").text(e);
+
  $("#csview-nearest-info").text('');
 
}
}
 

        

        
 
function min3(x, y, z)
function min3(x, y, z)
294,7 221,7
 
  return val;
  return val;
 
}
}
 

        

        
~
function csviewSetColorByColorCode()
function cmviewSetColorByColorCode()
 
{
{
 
  try {
  try {
 
    var rgb = parseInt($("#csview-colorcode").val(), 16);
    var rgb = parseInt($("#csview-colorcode").val(), 16);
313,32 240,6
 
  }
  }
 
}
}
 

        

        
+
function csviewSetColorByColorName()
+
{
+
  try {
+
    var colorname = $('#csview-colorname option:selected').text();
+

          
+
    for (var i = 0; i < cssColors.length; i++) {
+
      if (cssColors[i].name == colorname) {
+
        csviewSetColor(cssColors[i].r,
+
                       cssColors[i].g,
+
                       cssColors[i].b);
+
        return;
+
      }
+
    }
+

          
+
    throw "invalid color name";
+
  }
+
  catch (e) {
+
    csviewPrintError(e);
+
  }
+
}
+

          
+
function csviewSetColorName(name)
+
{
+
  $("#csview-colorname").val(name);
+
}
+

          
 
function cmviewSetColorByRgb()
function cmviewSetColorByRgb()
 
{
{
 
  try {
  try {
600,229 501,6
 

        

        
 
  return {'h': h, 's': s, 'l': l};
  return {'h': h, 's': s, 'l': l};
 
}
}
+

          
+
function csviewSetInvertedColor()
+
{
+
  var r = getHexValueOf("#csview-base-r");
+
  var g = getHexValueOf("#csview-base-g");
+
  var b = getHexValueOf("#csview-base-b");
+

          
+
  csviewSetColor(255 - r, 255 - g, 255 - b);
+
}
+

          
+
function csviewSetComplementaryColor()
+
{
+
  var r = getHexValueOf("#csview-base-r");
+
  var g = getHexValueOf("#csview-base-g");
+
  var b = getHexValueOf("#csview-base-b");
+

          
+
  csviewSetColor(r, g, b);
+

          
+
  var h = getValueOf({id: "#csview-hsv-h", min: 0.0});
+

          
+
  $("#csview-hsv-h").val((h + 180.0).toFixed(0));
+

          
+
  cmviewSetColorByHsv();
+
}
+

          
+
function csviewSetSaturatedColor()
+
{
+
  var r = getHexValueOf("#csview-base-r");
+
  var g = getHexValueOf("#csview-base-g");
+
  var b = getHexValueOf("#csview-base-b");
+

          
+
  csviewSetColor(r, g, b);
+

          
+
  $("#csview-hsv-s").val(1);
+
  $("#csview-hsv-v").val(1);
+

          
+
  cmviewSetColorByHsv();
+
}
+

          
+
function csviewSetAchromaticColor()
+
{
+
  var r = getHexValueOf("#csview-base-r");
+
  var g = getHexValueOf("#csview-base-g");
+
  var b = getHexValueOf("#csview-base-b");
+

          
+
  csviewSetColor(r, g, b);
+

          
+
  $("#csview-hsv-s").val(0);
+

          
+
  cmviewSetColorByHsv();
+
}
+

          
+
// http://www.w3.org/TR/css3-color/#svg-color
+
// 4.3. Extended color keywords
+
var cssColors = [
+
  {'name': 'aliceblue', 'r': 240, 'g': 248, 'b': 255},
+
  {'name': 'antiquewhite', 'r': 250, 'g': 235, 'b': 215},
+
  {'name': 'aqua', 'r': 0, 'g': 255, 'b': 255},
+
  {'name': 'aquamarine', 'r': 127, 'g': 255, 'b': 212},
+
  {'name': 'azure', 'r': 240, 'g': 255, 'b': 255},
+
  {'name': 'beige', 'r': 245, 'g': 245, 'b': 220},
+
  {'name': 'bisque', 'r': 255, 'g': 228, 'b': 196},
+
  {'name': 'black', 'r': 0, 'g': 0, 'b': 0},
+
  {'name': 'blanchedalmond', 'r': 255, 'g': 235, 'b': 205},
+
  {'name': 'blue', 'r': 0, 'g': 0, 'b': 255},
+
  {'name': 'blueviolet', 'r': 138, 'g': 43, 'b': 226},
+
  {'name': 'brown', 'r': 165, 'g': 42, 'b': 42},
+
  {'name': 'burlywood', 'r': 222, 'g': 184, 'b': 135},
+
  {'name': 'cadetblue', 'r': 95, 'g': 158, 'b': 160},
+
  {'name': 'chartreuse', 'r': 127, 'g': 255, 'b': 0},
+
  {'name': 'chocolate', 'r': 210, 'g': 105, 'b': 30},
+
  {'name': 'coral', 'r': 255, 'g': 127, 'b': 80},
+
  {'name': 'cornflowerblue', 'r': 100, 'g': 149, 'b': 237},
+
  {'name': 'cornsilk', 'r': 255, 'g': 248, 'b': 220},
+
  {'name': 'crimson', 'r': 220, 'g': 20, 'b': 60},
+
  {'name': 'cyan', 'r': 0, 'g': 255, 'b': 255},
+
  {'name': 'darkblue', 'r': 0, 'g': 0, 'b': 139},
+
  {'name': 'darkcyan', 'r': 0, 'g': 139, 'b': 139},
+
  {'name': 'darkgoldenrod', 'r': 184, 'g': 134, 'b': 11},
+
  {'name': 'darkgray', 'r': 169, 'g': 169, 'b': 169},
+
  {'name': 'darkgreen', 'r': 0, 'g': 100, 'b': 0},
+
  {'name': 'darkgrey', 'r': 169, 'g': 169, 'b': 169},
+
  {'name': 'darkkhaki', 'r': 189, 'g': 183, 'b': 107},
+
  {'name': 'darkmagenta', 'r': 139, 'g': 0, 'b': 139},
+
  {'name': 'darkolivegreen', 'r': 85, 'g': 107, 'b': 47},
+
  {'name': 'darkorange', 'r': 255, 'g': 140, 'b': 0},
+
  {'name': 'darkorchid', 'r': 153, 'g': 50, 'b': 204},
+
  {'name': 'darkred', 'r': 139, 'g': 0, 'b': 0},
+
  {'name': 'darksalmon', 'r': 233, 'g': 150, 'b': 122},
+
  {'name': 'darkseagreen', 'r': 143, 'g': 188, 'b': 143},
+
  {'name': 'darkslateblue', 'r': 72, 'g': 61, 'b': 139},
+
  {'name': 'darkslategray', 'r': 47, 'g': 79, 'b': 79},
+
  {'name': 'darkslategrey', 'r': 47, 'g': 79, 'b': 79},
+
  {'name': 'darkturquoise', 'r': 0, 'g': 206, 'b': 209},
+
  {'name': 'darkviolet', 'r': 148, 'g': 0, 'b': 211},
+
  {'name': 'deeppink', 'r': 255, 'g': 20, 'b': 147},
+
  {'name': 'deepskyblue', 'r': 0, 'g': 191, 'b': 255},
+
  {'name': 'dimgray', 'r': 105, 'g': 105, 'b': 105},
+
  {'name': 'dimgrey', 'r': 105, 'g': 105, 'b': 105},
+
  {'name': 'dodgerblue', 'r': 30, 'g': 144, 'b': 255},
+
  {'name': 'firebrick', 'r': 178, 'g': 34, 'b': 34},
+
  {'name': 'floralwhite', 'r': 255, 'g': 250, 'b': 240},
+
  {'name': 'forestgreen', 'r': 34, 'g': 139, 'b': 34},
+
  {'name': 'fuchsia', 'r': 255, 'g': 0, 'b': 255},
+
  {'name': 'gainsboro', 'r': 220, 'g': 220, 'b': 220},
+
  {'name': 'ghostwhite', 'r': 248, 'g': 248, 'b': 255},
+
  {'name': 'gold', 'r': 255, 'g': 215, 'b': 0},
+
  {'name': 'goldenrod', 'r': 218, 'g': 165, 'b': 32},
+
  {'name': 'gray', 'r': 128, 'g': 128, 'b': 128},
+
  {'name': 'green', 'r': 0, 'g': 128, 'b': 0},
+
  {'name': 'greenyellow', 'r': 173, 'g': 255, 'b': 47},
+
  {'name': 'grey', 'r': 128, 'g': 128, 'b': 128},
+
  {'name': 'honeydew', 'r': 240, 'g': 255, 'b': 240},
+
  {'name': 'hotpink', 'r': 255, 'g': 105, 'b': 180},
+
  {'name': 'indianred', 'r': 205, 'g': 92, 'b': 92},
+
  {'name': 'indigo', 'r': 75, 'g': 0, 'b': 130},
+
  {'name': 'ivory', 'r': 255, 'g': 255, 'b': 240},
+
  {'name': 'khaki', 'r': 240, 'g': 230, 'b': 140},
+
  {'name': 'lavender', 'r': 230, 'g': 230, 'b': 250},
+
  {'name': 'lavenderblush', 'r': 255, 'g': 240, 'b': 245},
+
  {'name': 'lawngreen', 'r': 124, 'g': 252, 'b': 0},
+
  {'name': 'lemonchiffon', 'r': 255, 'g': 250, 'b': 205},
+
  {'name': 'lightblue', 'r': 173, 'g': 216, 'b': 230},
+
  {'name': 'lightcoral', 'r': 240, 'g': 128, 'b': 128},
+
  {'name': 'lightcyan', 'r': 224, 'g': 255, 'b': 255},
+
  {'name': 'lightgoldenrodyellow', 'r': 250, 'g': 250, 'b': 210},
+
  {'name': 'lightgray', 'r': 211, 'g': 211, 'b': 211},
+
  {'name': 'lightgreen', 'r': 144, 'g': 238, 'b': 144},
+
  {'name': 'lightgrey', 'r': 211, 'g': 211, 'b': 211},
+
  {'name': 'lightpink', 'r': 255, 'g': 182, 'b': 193},
+
  {'name': 'lightsalmon', 'r': 255, 'g': 160, 'b': 122},
+
  {'name': 'lightseagreen', 'r': 32, 'g': 178, 'b': 170},
+
  {'name': 'lightskyblue', 'r': 135, 'g': 206, 'b': 250},
+
  {'name': 'lightslategray', 'r': 119, 'g': 136, 'b': 153},
+
  {'name': 'lightslategrey', 'r': 119, 'g': 136, 'b': 153},
+
  {'name': 'lightsteelblue', 'r': 176, 'g': 196, 'b': 222},
+
  {'name': 'lightyellow', 'r': 255, 'g': 255, 'b': 224},
+
  {'name': 'lime', 'r': 0, 'g': 255, 'b': 0},
+
  {'name': 'limegreen', 'r': 50, 'g': 205, 'b': 50},
+
  {'name': 'linen', 'r': 250, 'g': 240, 'b': 230},
+
  {'name': 'magenta', 'r': 255, 'g': 0, 'b': 255},
+
  {'name': 'maroon', 'r': 128, 'g': 0, 'b': 0},
+
  {'name': 'mediumaquamarine', 'r': 102, 'g': 205, 'b': 170},
+
  {'name': 'mediumblue', 'r': 0, 'g': 0, 'b': 205},
+
  {'name': 'mediumorchid', 'r': 186, 'g': 85, 'b': 211},
+
  {'name': 'mediumpurple', 'r': 147, 'g': 112, 'b': 219},
+
  {'name': 'mediumseagreen', 'r': 60, 'g': 179, 'b': 113},
+
  {'name': 'mediumslateblue', 'r': 123, 'g': 104, 'b': 238},
+
  {'name': 'mediumspringgreen', 'r': 0, 'g': 250, 'b': 154},
+
  {'name': 'mediumturquoise', 'r': 72, 'g': 209, 'b': 204},
+
  {'name': 'mediumvioletred', 'r': 199, 'g': 21, 'b': 133},
+
  {'name': 'midnightblue', 'r': 25, 'g': 25, 'b': 112},
+
  {'name': 'mintcream', 'r': 245, 'g': 255, 'b': 250},
+
  {'name': 'mistyrose', 'r': 255, 'g': 228, 'b': 225},
+
  {'name': 'moccasin', 'r': 255, 'g': 228, 'b': 181},
+
  {'name': 'navajowhite', 'r': 255, 'g': 222, 'b': 173},
+
  {'name': 'navy', 'r': 0, 'g': 0, 'b': 128},
+
  {'name': 'oldlace', 'r': 253, 'g': 245, 'b': 230},
+
  {'name': 'olive', 'r': 128, 'g': 128, 'b': 0},
+
  {'name': 'olivedrab', 'r': 107, 'g': 142, 'b': 35},
+
  {'name': 'orange', 'r': 255, 'g': 165, 'b': 0},
+
  {'name': 'orangered', 'r': 255, 'g': 69, 'b': 0},
+
  {'name': 'orchid', 'r': 218, 'g': 112, 'b': 214},
+
  {'name': 'palegoldenrod', 'r': 238, 'g': 232, 'b': 170},
+
  {'name': 'palegreen', 'r': 152, 'g': 251, 'b': 152},
+
  {'name': 'paleturquoise', 'r': 175, 'g': 238, 'b': 238},
+
  {'name': 'palevioletred', 'r': 219, 'g': 112, 'b': 147},
+
  {'name': 'papayawhip', 'r': 255, 'g': 239, 'b': 213},
+
  {'name': 'peachpuff', 'r': 255, 'g': 218, 'b': 185},
+
  {'name': 'peru', 'r': 205, 'g': 133, 'b': 63},
+
  {'name': 'pink', 'r': 255, 'g': 192, 'b': 203},
+
  {'name': 'plum', 'r': 221, 'g': 160, 'b': 221},
+
  {'name': 'powderblue', 'r': 176, 'g': 224, 'b': 230},
+
  {'name': 'purple', 'r': 128, 'g': 0, 'b': 128},
+
  {'name': 'red', 'r': 255, 'g': 0, 'b': 0},
+
  {'name': 'rosybrown', 'r': 188, 'g': 143, 'b': 143},
+
  {'name': 'royalblue', 'r': 65, 'g': 105, 'b': 225},
+
  {'name': 'saddlebrown', 'r': 139, 'g': 69, 'b': 19},
+
  {'name': 'salmon', 'r': 250, 'g': 128, 'b': 114},
+
  {'name': 'sandybrown', 'r': 244, 'g': 164, 'b': 96},
+
  {'name': 'seagreen', 'r': 46, 'g': 139, 'b': 87},
+
  {'name': 'seashell', 'r': 255, 'g': 245, 'b': 238},
+
  {'name': 'sienna', 'r': 160, 'g': 82, 'b': 45},
+
  {'name': 'silver', 'r': 192, 'g': 192, 'b': 192},
+
  {'name': 'skyblue', 'r': 135, 'g': 206, 'b': 235},
+
  {'name': 'slateblue', 'r': 106, 'g': 90, 'b': 205},
+
  {'name': 'slategray', 'r': 112, 'g': 128, 'b': 144},
+
  {'name': 'slategrey', 'r': 112, 'g': 128, 'b': 144},
+
  {'name': 'snow', 'r': 255, 'g': 250, 'b': 250},
+
  {'name': 'springgreen', 'r': 0, 'g': 255, 'b': 127},
+
  {'name': 'steelblue', 'r': 70, 'g': 130, 'b': 180},
+
  {'name': 'tan', 'r': 210, 'g': 180, 'b': 140},
+
  {'name': 'teal', 'r': 0, 'g': 128, 'b': 128},
+
  {'name': 'thistle', 'r': 216, 'g': 191, 'b': 216},
+
  {'name': 'tomato', 'r': 255, 'g': 99, 'b': 71},
+
  {'name': 'turquoise', 'r': 64, 'g': 224, 'b': 208},
+
  {'name': 'violet', 'r': 238, 'g': 130, 'b': 238},
+
  {'name': 'wheat', 'r': 245, 'g': 222, 'b': 179},
+
  {'name': 'white', 'r': 255, 'g': 255, 'b': 255},
+
  {'name': 'whitesmoke', 'r': 245, 'g': 245, 'b': 245},
+
  {'name': 'yellow', 'r': 255, 'g': 255, 'b': 0},
+
  {'name': 'yellowgreen', 'r': 154, 'g': 205, 'b': 50},
+
];
+

          
+
function findNearestColor(r, g, b)
+
{
+
  var nearestDist = 1000;
+
  var nearestColor = cssColors[0];
+

          
+
  for (var i = 0; i < cssColors.length; i++) {
+
    var dist = Math.sqrt(
+
      Math.pow(r - cssColors[i].r, 2) +
+
      Math.pow(g - cssColors[i].g, 2) +
+
      Math.pow(b - cssColors[i].b, 2));
+

          
+
    if (dist < nearestDist) {
+
      nearestColor = cssColors[i];
+
      nearestDist = dist;
+
    }
+
  }
+

          
+
  return nearestColor;
+
}
 
}}
}}
 

        

        
 
*変換式
*変換式