<div>  <dialog open>    <p>      <label for="color-text">        任意の形式で色値を入力するか、色を選択するかしてください。      </label>      <span>        <input type="text" />        <input type="color" />      </span>    </p>    <p>      <label for="opacity-input">不透明度を調整: </label>      <input        type="range"               value="1"        min="0"        max="1"        step="0.01" />    </p>    <hr />    <table>      <caption>        さまざまな形式での色:      </caption>      <tbody>        <tr>          <th>            <a              href="https://developer.mozilla.org/ja/docs/Web/CSS/color_value/rgb"             >              RGB            </a>          </th>          <td><button>コピー</button><span></span></td>        </tr>        <tr>          <th>            <a              href="https://developer.mozilla.org/ja/docs/Web/CSS/hex-color"             >              HEX            </a>          </th>          <td><button>コピー</button><span></span></td>        </tr>        <tr>          <th>            <a              href="https://developer.mozilla.org/ja/docs/Web/CSS/color_value/hsl"             >              HSL            </a>          </th>          <td><button>コピー</button><span></span></td>        </tr>        <tr>          <th>            <a              href="https://developer.mozilla.org/ja/docs/Web/CSS/color_value/hwb"             >              HWB            </a>          </th>          <td><button>コピー</button><span></span></td>        </tr>        <tr>          <th>            <a              href="https://developer.mozilla.org/ja/docs/Web/CSS/color_value/color"             >              color()            </a>          </th>          <td><button>コピー</button><span></span></td>        </tr>        <tr>          <th>            <a              href="https://developer.mozilla.org/ja/docs/Web/CSS/color_value/lab"             >              Lab            </a>          </th>          <td><button>コピー</button><span></span></td>        </tr>        <tr>          <th>            <a              href="https://developer.mozilla.org/ja/docs/Web/CSS/color_value/lch"             >              LCH            </a>          </th>          <td><button>コピー</button><span></span></td>        </tr>        <tr>          <th>            <a              href="https://developer.mozilla.org/ja/docs/Web/CSS/color_value/oklab"             >              Oklab            </a>          </th>          <td><button>コピー</button><span></span></td>        </tr>        <tr>          <th>            <a              href="https://developer.mozilla.org/ja/docs/Web/CSS/color_value/oklch"             >              OkLCh            </a>          </th>          <td><button>コピー</button><span></span></td>        </tr>        <tr>          <th>            <a              href="https://developer.mozilla.org/ja/docs/Glossary/Color_space#xyz-d50"             >              XYZ D50            </a>          </th>          <td><button>コピー</button><span></span></td>        </tr>        <tr>          <th>            <a              href="https://developer.mozilla.org/ja/docs/Glossary/Color_space#xyz"             >              XYZ D65            </a>          </th>          <td><button>コピー</button><span></span></td>        </tr>      </tbody>    </table>  </dialog></div>

dialog {  border: 1px solid;  border-radius: 5px;  box-shadow: 3px 3px 10px rgb(0 0 0 / 0.2);  background-color: white;  font-family: segue, arial, helvetica, sans-serif;  margin-top: 5vh;  width: 550px;}table {  width: 100%;}td,th {  padding: 3px 0;}th {  background-color: #ededed;}td {  background-color: #dedede;  font-family: monospace;}body {  background:    linear-gradient(      -90deg,      transparent 0 38%,      47%,      rgb(0 0 0 / 0.7) 50%,      white 50% 100%    ),    conic-gradient(      black 0 90deg,      transparent 90deg 180deg,      black 180deg 270deg,      transparent 270deg 360deg    );  background-size:    100% 100%,    20px 20px;  padding: 0;  margin: 0;}.container {  width: 100vw;  height: 100vh;}.color-inputs {  display: inline-flex;  margin-top: 0.6rem;  margin-bottom: 1.5rem;}button {  margin-right: 0.5rem;}input[type="text"] {  width: 300px;  margin-right: 0.5rem;}input[type="range"] {  width: 350px;}label {  user-select: none;}p {  display: flex;  flex-flow: column;  align-items: center;  margin: 0;}

const background = document.querySelector("body div");const colorText = document.getElementById("color-text");const colorPicker = document.getElementById("color-input");const opacityPicker = document.getElementById("opacity-input");const hexOutput = document.querySelector("#hex td > span");const rgbFunctionOutput = document.querySelector("#rgb-function td > span");const colorFunctionOutput = document.querySelector("#color-function td > span");const hslFunctionOutput = document.querySelector("#hsl-function td > span");const hwbFunctionOutput = document.querySelector("#hwb-function td > span");const labFunctionOutput = document.querySelector("#lab-function td > span");const okLabFunctionOutput = document.querySelector("#oklab-function td > span");const lchFunctionOutput = document.querySelector("#lch-function td > span");const okLchFunctionOutput = document.querySelector("#oklch-function td > span");const xyzD50FunctionOutput = document.querySelector(  "#xyz-d50-function td > span",);const xyzD65FunctionOutput = document.querySelector(  "#xyz-d65-function td > span",);const LRGB_LMS_MATRIX = [  [0.4122214708, 0.5363325363, 0.0514459929],  [0.2119034982, 0.6806995451, 0.1073969566],  [0.0883024619, 0.2817188376, 0.6299787005],];const LMS_LAB_MATRIX = [  [+0.2104542553, +0.793617785, -0.0040720468],  [+1.9779984951, -2.428592205, +0.4505937099],  [+0.0259040371, +0.7827717662, -0.808675766],];// srgb-linear to xyz-d50// matrix taken from http://www.brucelindbloom.com/index.html?Eqn_RGB_to_XYZ.htmlconst LRGB_XYZ_D50_MATRIX = [  [0.4360747, 0.3850649, 0.1430804],  [0.2225045, 0.7168786, 0.0606169],  [0.0139322, 0.0971045, 0.7141733],];// srgb-linear to xyz-d65// matrix taken from http://www.brucelindbloom.com/index.html?Eqn_RGB_to_XYZ.htmlconst LRGB_XYZ_D65_MATRIX = [  [0.4124564, 0.3575761, 0.1804375],  [0.2126729, 0.7151522, 0.072175],  [0.0193339, 0.119192, 0.9503041],];const currentColor = { r: 186, g: 218, b: 85, alpha: 1.0 }; // #bada55function multiplyByMatrix(matrix, tuple) {  let i = [0, 0, 0];  let j = matrix.length;  let k = matrix[0].length;  for (let l = 0; l < j; l++)    for (let m = 0; m < k; m++) i[l] += matrix[l][m] * tuple[m];  return i;}function rgbToLinear(c) {  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);}function intToHex(i) {  return Math.floor(i).toString(16).padStart(2, "0").toLowerCase();}function rgbToHEXText(c) {  return `#${intToHex(c.r)}${intToHex(c.g)}${intToHex(c.b)}`;}function rgbaToHEXAText(color) {  const hexText = rgbToHEXText(color);  if (color.alpha === 1.0) {    return hexText;  }  const alpha = intToHex(color.alpha * 255);  return `${hexText}${alpha}`;}function rgbaToHSLA(color) {  let { r, g, b, alpha } = color;  // Let's have r, g, b in the range [0, 1]  r = r / 255;  g = g / 255;  b = b / 255;  const min = Math.min(r, g, b);  const max = Math.max(r, g, b);  const delta = max - min;  let h, s, l;  if (delta === 0) {    h = 0;  } else if (max === r) {    h = ((g - b) / delta) % 6;  } else if (max === g) {    h = (b - r) / delta + 2;  } else h = (r - g) / delta + 4;  h = Math.round(h * 60);  // We want an angle between 0 and 360°  if (h < 0) {    h += 360;  }  l = (max + min) / 2;  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));  s = Number((s * 100).toFixed(1));  l = Number((l * 100).toFixed(1));  return { h, s, l, alpha };}function toHSLAText(color) {  const { h, s, l, alpha } = rgbaToHSLA(color);  return `hsl(${h.toFixed(0)} ${s.toFixed(0)}% ${l.toFixed(0)}%${    alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""  })`;}function rgbaToHWBAText(color) {  let { h, s, l, alpha } = rgbaToHSLA(color);  const chroma = s * (1 - Math.abs(l / 50 - 1));  let W = (l - chroma / 2).toFixed(0);  let B = (100 - l - chroma / 2).toFixed(0);  return `hwb(${h} ${W}% ${B}%${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`;}function rgbaToXYZD50(color) {  let { r, g, b, alpha } = color;  r = rgbToLinear(r / 255) * 255;  g = rgbToLinear(g / 255) * 255;  b = rgbToLinear(b / 255) * 255;  const xyz = multiplyByMatrix(LRGB_XYZ_D50_MATRIX, [r, g, b]);  return { x: xyz[0] / 255, y: xyz[1] / 255, z: xyz[2] / 255, alpha };}function rgbaToXYZD50Text(color) {  let { alpha } = color;  const xyz = rgbaToXYZD50(color);  return `color(xyz-d50 ${xyz.x.toFixed(5)} ${xyz.y.toFixed(5)} ${xyz.z.toFixed(    5,  )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`;}function rgbaToXYZD65(color) {  let { r, g, b, alpha } = color;  r = rgbToLinear(r / 255) * 255;  g = rgbToLinear(g / 255) * 255;  b = rgbToLinear(b / 255) * 255;  const xyz = multiplyByMatrix(LRGB_XYZ_D65_MATRIX, [r, g, b]);  return { x: xyz[0] / 255, y: xyz[1] / 255, z: xyz[2] / 255, alpha };}function rgbaToXYZD65Text(color) {  let { alpha } = color;  const xyz = rgbaToXYZD65(color);  return `color(xyz-d65 ${xyz.x.toFixed(5)} ${xyz.y.toFixed(5)} ${xyz.z.toFixed(    5,  )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`;}const D65 = [0.3457 / 0.3585, 1, 0.2958 / 0.3585];function xyzToLab(color) {  let { x, y, z, alpha } = color;  [x, y, z] = [x, y, z].map((v, i) => {    v = v / D65[i];    return v > 0.0088564516 ? Math.cbrt(v) : v * 903.2962962962963 + 16 / 116;  });  return { l: 116 * y - 16, a: 500 * (x - y), b: 200 * (y - z), alpha };}function rgbaToLabText(color) {  let { alpha } = color;  const xyz = rgbaToXYZD50(color);  const lab = xyzToLab(xyz);  return `lab(${lab.l.toFixed(3)} ${lab.a.toFixed(3)} ${lab.b.toFixed(3)}${    alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""  })`;}function rgbToOklab(color) {  let { r, g, b, alpha } = color;  r = rgbToLinear(r / 255);  g = rgbToLinear(g / 255);  b = rgbToLinear(b / 255);  const lms = multiplyByMatrix(LRGB_LMS_MATRIX, [r, g, b]).map((v) =>    Math.cbrt(v),  );  const oklab = multiplyByMatrix(LMS_LAB_MATRIX, lms);  return { l: oklab[0], a: oklab[1], b: oklab[2], alpha };}function toOkLabText(color) {  let { alpha } = color;  const oklab = rgbToOklab(color);  return `oklab(${oklab.l.toFixed(5)} ${oklab.a.toFixed(5)} ${oklab.b.toFixed(    5,  )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`;}function labToLCH(color) {  const { l, a, b, alpha } = color;  const c = Math.sqrt(a * a + b * b);  let h = Math.atan2(b, a) * (180 / Math.PI);  if (h < 0) {    h += 360;  }  return { l, c, h, alpha };}function toLCHText(color) {  let { alpha } = color;  const xyz = rgbaToXYZD50(color);  const lab = xyzToLab(xyz);  const lch = labToLCH(lab);  return `lch(${lch.l.toFixed(3)} ${lch.c.toFixed(3)} ${lch.h.toFixed(3)}${    alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""  })`;}function rgbaToOkLCh(color) {  const lab = rgbToOklab(color);  const oklch = labToLCH(lab);  return { l: oklch.l, c: oklch.c, h: oklch.h, alpha: color.alpha };}function toOkLChText(color) {  let { alpha } = color;  const oklch = rgbaToOkLCh(color);  return `oklch(${oklch.l.toFixed(5)} ${oklch.c.toFixed(5)} ${oklch.h.toFixed(    5,  )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`;}function colorToRGBA(c) {  const ctx = new OffscreenCanvas(1, 1).getContext("2d");  ctx.fillStyle = c;  ctx.fillRect(0, 0, 1, 1);  const data = ctx.getImageData(0, 0, 1, 1).data;  return {    r: data[0],    g: data[1],    b: data[2],    alpha: data[3] / 255,  };}function updateOutput(c) {  background.style.backgroundColor = rgbaToHEXAText(c);  hexOutput.innerText = rgbaToHEXAText(c);  rgbFunctionOutput.innerText = `rgb(${c.r} ${c.g} ${c.b}${c.alpha < 1 ? ` / ${c.alpha.toFixed(3)}` : ""})`;  colorFunctionOutput.innerText = `color(srgb ${(c.r / 255).toFixed(3)} ${(c.g / 255).toFixed(3)} ${(c.b / 255).toFixed(3)}${c.alpha < 1 ? ` / ${c.alpha.toFixed(3)}` : ""})`;  hslFunctionOutput.innerText = toHSLAText(c);  hwbFunctionOutput.innerText = rgbaToHWBAText(c);  labFunctionOutput.innerText = rgbaToLabText(c);  xyzD50FunctionOutput.innerText = rgbaToXYZD50Text(c);  xyzD65FunctionOutput.innerText = rgbaToXYZD65Text(c);  lchFunctionOutput.innerText = toLCHText(c);  okLabFunctionOutput.innerText = toOkLabText(c);  okLchFunctionOutput.innerText = toOkLChText(c);}function init() {  colorText.addEventListener("input", (e) => {    const color = colorToRGBA(e.target.value);    Object.assign(currentColor, color);    colorPicker.value = rgbToHEXText(currentColor);    opacityPicker.value = currentColor.alpha;    updateOutput(currentColor);  });  colorPicker.addEventListener("input", (e) => {    const text = e.target.value;    currentColor.r = parseInt(text.slice(1, 3), 16);    currentColor.g = parseInt(text.slice(3, 5), 16);    currentColor.b = parseInt(text.slice(5, 7), 16);    colorText.value = rgbaToHEXAText(currentColor);    opacityPicker.value = currentColor.alpha;    updateOutput(currentColor);  });  opacityPicker.addEventListener("input", (e) => {    const value = parseFloat(e.target.value);    currentColor.alpha = value;    colorText.value = rgbaToHEXAText(currentColor);    updateOutput(currentColor);  });  document.querySelectorAll("#output-colors button").forEach((button) => {    button.addEventListener("click", (e) => {      const text = e.target.nextElementSibling.innerText;      navigator.clipboard.writeText(text);      e.target.innerText = "Copied!";      setTimeout(() => {        e.target.innerText = "Copy";      }, 1000);    });  });  colorText.value = rgbaToHEXAText(currentColor);  colorPicker.value = rgbToHEXText(currentColor);  opacityPicker.value = currentColor.alpha;  updateOutput(currentColor);}init();

Help improve MDN

This page was last modified on⁨2025年9月27日⁩ byMDN contributors.