{"id":156,"date":"2026-09-19T07:45:08","date_gmt":"2026-09-18T22:45:08","guid":{"rendered":"https:\/\/motoki-design.co.jp\/tools\/color-convert\/"},"modified":"2026-09-28T18:21:42","modified_gmt":"2026-09-28T09:21:42","slug":"color-convert","status":"publish","type":"page","link":"https:\/\/motoki-design.co.jp\/tools\/color-convert\/","title":{"rendered":"\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u5909\u63db\u30c4\u30fc\u30eb"},"content":{"rendered":"\n<div id=\"wt-colorconv\" class=\"wt-tool\">\n\t<style>\n\t\t#wt-colorconv .wt-cc-preview{height:7em;border-radius:12px;border:1px solid var(--wt-line);margin-bottom:1em}\n\t\t#wt-colorconv .wt-cc-scale{display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--wt-line);margin-top:.5em}\n\t\t#wt-colorconv .wt-cc-scale span{flex:1;height:3.2em;display:flex;align-items:flex-end;justify-content:center;font-size:.68em;padding-bottom:.25em;cursor:pointer}\n\t<\/style>\n\n\t<p class=\"wt-lead\">\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092<strong>HEX\u30fbRGB\u30fbHSL\u30fbHSV\u30fbCMYK \u306e\u76f8\u4e92\u5909\u63db<\/strong>\u304c\u3067\u304d\u307e\u3059\u3002\u30c7\u30b6\u30a4\u30f3\u30c4\u30fc\u30eb\u3068CSS\u3067\u8868\u8a18\u304c\u9055\u3046\u3068\u304d\u306e\u6a4b\u6e21\u3057\u306b\u3002\u3042\u308f\u305b\u3066<strong>\u660e\u5ea6\u9055\u3044\u306e\u30ab\u30e9\u30fc\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3<\/strong>\u3082\u81ea\u52d5\u751f\u6210\u3059\u308b\u306e\u3067\u3001\u30db\u30d0\u30fc\u8272\u3084\u80cc\u666f\u8272\u3092\u6c7a\u3081\u308b\u3068\u304d\u306b\u3082\u3069\u3046\u305e\u3002<\/p>\n\n\t<div class=\"wt-policy\" style=\"border-color:#cfe3cf;background:#f3faf3;margin-top:0\">\n\t\t<p class=\"wt-policy-title\">\ud83d\udd12 \u3053\u306e\u51e6\u7406\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u4e2d\u3060\u3051\u3067\u5b8c\u7d50\u3057\u307e\u3059<\/p>\n\t\t<ul><li>\u5165\u529b\u3057\u305f\u8272\u306f\u30b5\u30fc\u30d0\u30fc\u306b\u9001\u4fe1\u3055\u308c\u307e\u305b\u3093\u3002\u8a08\u7b97\u306f\u3059\u3079\u3066\u304a\u4f7f\u3044\u306e\u30d6\u30e9\u30a6\u30b6\u306e\u4e2d\u3067\u884c\u3063\u3066\u3044\u307e\u3059\u3002<\/li><\/ul>\n\t<\/div>\n\n\t<form class=\"wt-form\" style=\"margin-top:1.2em\" onsubmit=\"return false\">\n\t\t<div class=\"wt-fields\">\n\t\t\t<div class=\"wt-field\">\n\t\t\t\t<label for=\"wt-cc-picker\">\u8272\u3092\u9078\u3076<\/label>\n\t\t\t\t<input type=\"color\" id=\"wt-cc-picker\" value=\"#1769d3\">\n\t\t\t<\/div>\n\t\t\t<div class=\"wt-field\">\n\t\t\t\t<label for=\"wt-cc-input\">\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092\u5165\u529b\uff08HEX \/ rgb() \/ hsl() \u3069\u308c\u3067\u3082\u30028\u6841HEX\u3084rgba()\u306e\u900f\u660e\u5ea6\u3082\u8aad\u307f\u307e\u3059\uff09<\/label>\n\t\t\t\t<input type=\"text\" id=\"wt-cc-input\" value=\"#1769d3\" spellcheck=\"false\" autocapitalize=\"off\">\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/form>\n\n\t<div class=\"wt-result\" hidden><\/div>\n\n\t<div class=\"wt-disclaimer\">\n\t\t<strong>CMYK\u306b\u3064\u3044\u3066<\/strong><br>\n\t\t\u8868\u793a\u3057\u3066\u3044\u308bCMYK\u5024\u306f<strong>\u7c21\u6613\u7684\u306a\u8a08\u7b97\u306b\u3088\u308b\u76ee\u5b89<\/strong>\u3067\u3059\u3002\u5b9f\u969b\u306e\u5370\u5237\u7269\u3067\u306f\u3001\u4f7f\u7528\u3059\u308b\u7528\u7d19\u30fb\u30a4\u30f3\u30ad\u30fb\u30d7\u30ed\u30d5\u30a1\u30a4\u30eb\uff08Japan Color 2001 Coated\u306a\u3069\uff09\u306b\u3088\u3063\u3066\u8272\u304c\u5909\u308f\u308a\u307e\u3059\u3002<strong>\u5370\u5237\u30c7\u30fc\u30bf\u3092\u4f5c\u308b\u5834\u5408\u306f\u3001\u5fc5\u305aIllustrator\u3084Photoshop\u306e\u30ab\u30e9\u30fc\u8a2d\u5b9a\u3067\u5909\u63db\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/strong>\u753b\u9762\u306e\u8272\uff08RGB\uff09\u306f\u5370\u5237\uff08CMYK\uff09\u3067\u306f\u518d\u73fe\u3067\u304d\u306a\u3044\u7bc4\u56f2\u304c\u3042\u308a\u3001\u7279\u306b\u9bae\u3084\u304b\u306a\u9752\u3084\u7dd1\u306f\u304f\u3059\u307f\u307e\u3059\u3002\n\t<\/div>\n\n\t<div class=\"wt-faq\">\n\t\t<details>\n\t\t\t<summary>HSL\u3068HSV\u306e\u9055\u3044\u306f\u4f55\u3067\u3059\u304b\uff1f<\/summary>\n\t\t\t<p>\u3069\u3061\u3089\u3082\u300c\u8272\u76f8\u30fb\u5f69\u5ea6\u30fb\u660e\u308b\u3055\u300d\u3067\u8272\u3092\u8868\u3057\u307e\u3059\u304c\u30013\u3064\u76ee\u306e\u610f\u5473\u304c\u9055\u3044\u307e\u3059\u3002<strong>HSL\u306eL\uff08\u8f1d\u5ea6\uff09\u306f50%\u304c\u6700\u3082\u9bae\u3084\u304b<\/strong>\u3067\u3001100%\u306b\u3059\u308b\u3068\u767d\u30010%\u3067\u9ed2\u306b\u306a\u308a\u307e\u3059\u3002<strong>HSV\u306eV\uff08\u660e\u5ea6\uff09\u306f100%\u304c\u6700\u3082\u660e\u308b\u3044<\/strong>\u72b6\u614b\u3067\u3001\u4e0b\u3052\u308b\u3068\u9ed2\u306b\u8fd1\u3065\u304d\u307e\u3059\u3002CSS\u304c\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u306e\u306fHSL\u3067\u3001Photoshop\u306a\u3069\u306e\u30c7\u30b6\u30a4\u30f3\u30c4\u30fc\u30eb\u306fHSV\u3092\u4f7f\u3046\u3053\u3068\u304c\u591a\u3044\u3067\u3059\u3002<\/p>\n\t\t<\/details>\n\t\t<details>\n\t\t\t<summary>\u30db\u30d0\u30fc\u8272\u306f\u3069\u3046\u6c7a\u3081\u308c\u3070\u3044\u3044\u3067\u3059\u304b\uff1f<\/summary>\n\t\t\t<p>\u8272\u76f8\u3068\u5f69\u5ea6\u306f\u5909\u3048\u305a\u306b<strong>\u660e\u5ea6\u3060\u3051\u309210\u301c15%\u52d5\u304b\u3059<\/strong>\u306e\u304c\u57fa\u672c\u3067\u3059\u3002\u4e0b\u306b\u51fa\u3057\u3066\u3044\u308b\u30ab\u30e9\u30fc\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u304c\u3061\u3087\u3046\u3069\u305d\u306e\u8003\u3048\u65b9\u3067\u4f5c\u3089\u308c\u3066\u3044\u307e\u3059\u3002\u660e\u308b\u3044\u80cc\u666f\u8272\u306e\u30dc\u30bf\u30f3\u306a\u3089\u6697\u304f\u3001\u6697\u3044\u30dc\u30bf\u30f3\u306a\u3089\u660e\u308b\u304f\u3059\u308b\u3068\u81ea\u7136\u3067\u3059\u3002\u306a\u304a\u3001\u6587\u5b57\u8272\u3068\u306e\u7d44\u307f\u5408\u308f\u305b\u306f<a href=\"\/tools\/contrast-check\/\">\u30ab\u30e9\u30fc\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u5224\u5b9a<\/a>\u3067\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\t\t<\/details>\n\t\t<details>\n\t\t\t<summary>\u900f\u660e\u5ea6\uff08\u30a2\u30eb\u30d5\u30a1\u5024\uff09\u306f\u3069\u3046\u66f8\u304d\u307e\u3059\u304b\uff1f<\/summary>\n\t\t\t<p>CSS\u3067\u306f <code>rgba(23, 105, 211, 0.5)<\/code> \u306e\u307b\u304b\u3001<strong>HEX\u306b2\u6841\u8db3\u3057\u305f8\u6841\u8868\u8a18<\/strong>\uff08<code>#1769d380<\/code>\uff09\u3082\u4e3b\u8981\u30d6\u30e9\u30a6\u30b6\u3067\u4f7f\u3048\u307e\u3059\u3002\u3053\u306e\u30c4\u30fc\u30eb\u3067\u30828\u6841HEX\u3092\u51fa\u529b\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u306e\u307e\u307e\u30b3\u30d4\u30fc\u3067\u304d\u307e\u3059\u3002<strong>8\u6841HEX\u3084 rgba()\u30fbhsla() \u3067\u900f\u660e\u5ea6\u3064\u304d\u306e\u8272\u3092\u5165\u529b\u3059\u308b\u3068\u3001\u305d\u306e\u900f\u660e\u5ea6\u3092\u5f15\u304d\u7d99\u3044\u3067\u5404\u5f62\u5f0f\u306b\u5909\u63db<\/strong>\u3057\u307e\u3059\uff08HSV\u30fbCMYK\u306b\u306f\u900f\u660e\u5ea6\u306e\u8868\u3057\u65b9\u304c\u7121\u3044\u305f\u3081\u3001\u8272\u3060\u3051\u3092\u51fa\u3057\u307e\u3059\uff09\u3002\u306a\u304a <code>80<\/code> \u306f16\u9032\u6570\u306750%\uff08128\/255\uff09\u3068\u3044\u3046\u610f\u5473\u3067\u3059\u3002<\/p>\n\t\t<\/details>\n\t<\/div>\n<\/div>\n\n<div class=\"wt-tool\"><div class=\"wt-policy\"><p class=\"wt-policy-title\">\ud83d\udd12 \u8abf\u3079\u305f\u5185\u5bb9\u306f\u8a18\u9332\u30fb\u516c\u958b\u3057\u307e\u305b\u3093<\/p><ul><li><strong>\u691c\u7d22\u3057\u305f\u5185\u5bb9\u3092\u4fdd\u5b58\u30fb\u4e00\u89a7\u5316\u30fb\u516c\u958b\u3057\u307e\u305b\u3093\u3002<\/strong>\u8abf\u67fb\u7d50\u679c\u3092\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u5316\u3057\u3066\u691c\u7d22\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u305f\u308a\u3001\u4ed6\u306e\u5229\u7528\u8005\u306b\u898b\u305b\u305f\u308a\u3059\u308b\u3053\u3068\u306f\u4e00\u5207\u3042\u308a\u307e\u305b\u3093\u3002<\/li><li><strong>\u691c\u7d22\u5c65\u6b74\u3092\u6b8b\u3057\u307e\u305b\u3093\u3002<\/strong>\u8ab0\u304c\u4f55\u3092\u8abf\u3079\u305f\u304b\u3092\u7d10\u3065\u3051\u3066\u84c4\u7a4d\u3059\u308b\u3053\u3068\u306f\u3057\u307e\u305b\u3093\u3002\u4f1a\u54e1\u767b\u9332\u30fb\u30ed\u30b0\u30a4\u30f3\u3082\u4e0d\u8981\u3067\u3059\u3002<\/li><li><strong>\u7b2c\u4e09\u8005\u306b\u63d0\u4f9b\u30fb\u8ca9\u58f2\u3057\u307e\u305b\u3093\u3002<\/strong>\u55b6\u696d\u30ea\u30b9\u30c8\u3084\u5e83\u544a\u76ee\u7684\u3067\u306e\u5229\u7528\u3082\u3042\u308a\u307e\u305b\u3093\u3002<\/li><li>\u30b5\u30fc\u30d0\u30fc\u8ca0\u8377\u3092\u6291\u3048\u308b\u305f\u3081\u3001<strong>\u5224\u5b9a\u7d50\u679c\u306e\u307f\u6700\u59271\u6642\u9593\u306e\u4e00\u6642\u30ad\u30e3\u30c3\u30b7\u30e5<\/strong>\u306b\u4fdd\u6301\u3057\u3001\u6642\u9593\u306e\u7d4c\u904e\u3067\u81ea\u52d5\u7684\u306b\u6d88\u3048\u307e\u3059\u3002\u9023\u7d9a\u30a2\u30af\u30bb\u30b9\u306e\u5236\u9650\u7528\u306bIP\u30a2\u30c9\u30ec\u30b9\u3092<strong>\u30cf\u30c3\u30b7\u30e5\u5316\u3057\u305f\u5024<\/strong>\u3092\u6700\u592710\u5206\u9593\u3060\u3051\u4fdd\u6301\u3057\u307e\u3059\uff08\u5143\u306eIP\u30a2\u30c9\u30ec\u30b9\u306f\u4fdd\u5b58\u3057\u307e\u305b\u3093\uff09\u3002<\/li><li>\u8abf\u3079\u305f\u5bfe\u8c61\u306f\u5171\u6709\u7528\u306bURL\u306e<code>#<\/code>\u4ee5\u964d\u306b\u4ed8\u304d\u307e\u3059\u304c\u3001\u3053\u306e\u90e8\u5206\u306f\u30b5\u30fc\u30d0\u30fc\u306b\u3082\u30a2\u30af\u30bb\u30b9\u89e3\u6790\u306b\u3082\u9001\u4fe1\u3055\u308c\u307e\u305b\u3093\u3002<\/li><\/ul><\/div><\/div>\n\n<script>\n(function () {\n\tvar root = document.getElementById('wt-colorconv');\n\tif (!root || !window.WT) return;\n\tvar W = WT;\n\tvar resultBox = root.querySelector('.wt-result');\n\tvar picker = document.getElementById('wt-cc-picker');\n\tvar input = document.getElementById('wt-cc-input');\n\n\tfunction clamp(v, min, max) { return Math.max(min, Math.min(max, v)); }\n\tfunction hex2(v) { return clamp(Math.round(v), 0, 255).toString(16).padStart(2, '0'); }\n\n\t\/\/ \u900f\u660e\u5ea6\u306e\u8868\u8a18\uff080.5 \/ 50%\uff09\u3092 0\u301c1 \u306e\u6570\u5024\u306b\u3059\u308b\u3002\u7121\u3051\u308c\u3070 1\uff08\u4e0d\u900f\u660e\uff09\u3002\n\tfunction alphaOf(raw) {\n\t\tif (raw === undefined || raw === '') return 1;\n\t\tvar v = \/%$\/.test(raw) ? parseFloat(raw) \/ 100 : parseFloat(raw);\n\t\treturn isNaN(v) ? 1 : clamp(v, 0, 1);\n\t}\n\n\t\/\/ \u5165\u529b\uff08HEX \/ rgb() \/ hsl() \/ \u8272\u540d\uff09\u3092 [R, G, B, \u900f\u660e\u5ea6] \u306b\u6b63\u898f\u5316\u3059\u308b\n\tfunction parse(text) {\n\t\tvar s = String(text).trim();\n\t\tvar m;\n\t\tif ((m = s.match(\/^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$\/i))) {\n\t\t\tvar h = m[1];\n\t\t\t\/\/ 3\u6841\u30fb4\u6841\uff08#rgb \/ #rgba\uff09\u306f1\u6587\u5b57\u305a\u30642\u500d\u306b\u3059\u308b\n\t\t\tif (h.length === 3 || h.length === 4) h = h.split('').map(function (x) { return x + x; }).join('');\n\t\t\treturn [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16),\n\t\t\t\th.length === 8 ? parseInt(h.slice(6, 8), 16) \/ 255 : 1];\n\t\t}\n\t\t\/\/ rgba(23, 105, 211, 0.5) \/ rgb(23 105 211 \/ 50%) \u306e\u3069\u3061\u3089\u306e\u66f8\u304d\u65b9\u3082\u8aad\u3080\n\t\tif ((m = s.match(\/rgba?\\(\\s*([\\d.]+)[,\\s]+([\\d.]+)[,\\s]+([\\d.]+)(?:\\s*[,\\\/]\\s*([\\d.]+%?))?\/i))) {\n\t\t\treturn [+m[1], +m[2], +m[3], alphaOf(m[4])];\n\t\t}\n\t\tif ((m = s.match(\/hsla?\\(\\s*([\\d.]+)\\s*(?:deg)?[,\\s]+([\\d.]+)%[,\\s]+([\\d.]+)%(?:\\s*[,\\\/]\\s*([\\d.]+%?))?\/i))) {\n\t\t\treturn hslToRgb(+m[1], +m[2] \/ 100, +m[3] \/ 100).concat([alphaOf(m[4])]);\n\t\t}\n\t\t\/\/ \u8272\u540d\u306f\u30d6\u30e9\u30a6\u30b6\u306b\u89e3\u91c8\u3055\u305b\u308b\n\t\tvar probe = document.createElement('div');\n\t\tprobe.style.color = '';\n\t\tprobe.style.color = s;\n\t\tif (probe.style.color) {\n\t\t\tdocument.body.appendChild(probe);\n\t\t\tvar computed = getComputedStyle(probe).color;\n\t\t\tdocument.body.removeChild(probe);\n\t\t\tvar c = computed.match(\/([\\d.]+)[,\\s]+([\\d.]+)[,\\s]+([\\d.]+)(?:\\s*[,\\\/]\\s*([\\d.]+%?))?\/);\n\t\t\tif (c) return [+c[1], +c[2], +c[3], alphaOf(c[4])];\n\t\t}\n\t\treturn null;\n\t}\n\n\tfunction hslToRgb(h, s, l) {\n\t\th = ((h % 360) + 360) % 360 \/ 360;\n\t\tif (s === 0) { var v = l * 255; return [v, v, v]; }\n\t\tvar q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n\t\tvar p = 2 * l - q;\n\t\tfunction f(t) {\n\t\t\tif (t < 0) t += 1;\n\t\t\tif (t > 1) t -= 1;\n\t\t\tif (t < 1 \/ 6) return p + (q - p) * 6 * t;\n\t\t\tif (t < 1 \/ 2) return q;\n\t\t\tif (t < 2 \/ 3) return p + (q - p) * (2 \/ 3 - t) * 6;\n\t\t\treturn p;\n\t\t}\n\t\treturn [f(h + 1 \/ 3) * 255, f(h) * 255, f(h - 1 \/ 3) * 255];\n\t}\n\n\tfunction rgbToHsl(r, g, b) {\n\t\tr \/= 255; g \/= 255; b \/= 255;\n\t\tvar max = Math.max(r, g, b), min = Math.min(r, g, b);\n\t\tvar h = 0, s = 0, l = (max + min) \/ 2, d = max - min;\n\t\tif (d) {\n\t\t\ts = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\n\t\t\tif (max === r) h = ((g - b) \/ d + (g < b ? 6 : 0));\n\t\t\telse if (max === g) h = (b - r) \/ d + 2;\n\t\t\telse h = (r - g) \/ d + 4;\n\t\t\th *= 60;\n\t\t}\n\t\treturn [h, s * 100, l * 100];\n\t}\n\n\tfunction rgbToHsv(r, g, b) {\n\t\tr \/= 255; g \/= 255; b \/= 255;\n\t\tvar max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;\n\t\tvar h = 0;\n\t\tif (d) {\n\t\t\tif (max === r) h = ((g - b) \/ d + (g < b ? 6 : 0));\n\t\t\telse if (max === g) h = (b - r) \/ d + 2;\n\t\t\telse h = (r - g) \/ d + 4;\n\t\t\th *= 60;\n\t\t}\n\t\treturn [h, max ? (d \/ max) * 100 : 0, max * 100];\n\t}\n\n\tfunction rgbToCmyk(r, g, b) {\n\t\tvar c = 1 - r \/ 255, m = 1 - g \/ 255, y = 1 - b \/ 255;\n\t\tvar k = Math.min(c, m, y);\n\t\tif (k >= 1) return [0, 0, 0, 100];\n\t\treturn [(c - k) \/ (1 - k) * 100, (m - k) \/ (1 - k) * 100, (y - k) \/ (1 - k) * 100, k * 100];\n\t}\n\n\tfunction round(arr, n) {\n\t\treturn arr.map(function (v) { return Math.round(v * Math.pow(10, n || 0)) \/ Math.pow(10, n || 0); });\n\t}\n\n\tvar formats = [], css = '', alpha = 1;\n\n\tfunction render(rgb) {\n\t\talpha = rgb.length > 3 ? rgb[3] : 1;\n\t\tvar hex = '#' + hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);\n\t\tvar hsl = round(rgbToHsl(rgb[0], rgb[1], rgb[2]));\n\t\tvar hsv = round(rgbToHsv(rgb[0], rgb[1], rgb[2]));\n\t\tvar cmyk = round(rgbToCmyk(rgb[0], rgb[1], rgb[2]));\n\t\tvar r = round(rgb.slice(0, 3));\n\t\tvar translucent = 1 > alpha;\n\t\tvar a = Math.round(alpha * 1000) \/ 1000;          \/\/ 0.502 \u306e\u3088\u3046\u306b\u5c0f\u65703\u6841\u307e\u3067\n\t\tvar hexA = hex + hex2(alpha * 255);               \/\/ 8\u6841HEX\n\t\tvar pct = Math.round(alpha * 1000) \/ 10 + '%';\n\n\t\tif (translucent) {\n\t\t\t\/\/ \u5165\u529b\u3057\u305f\u900f\u660e\u5ea6\u3092\u305d\u306e\u307e\u307e\u5404\u5f62\u5f0f\u306b\u5f15\u304d\u7d99\u3050\n\t\t\tformats = [\n\t\t\t\t['HEX\uff088\u6841\u30fb\u4e0d\u900f\u660e\u5ea6' + pct + '\uff09', hexA],\n\t\t\t\t['HEX\uff086\u6841\u30fb\u900f\u660e\u5ea6\u306a\u3057\uff09', hex],\n\t\t\t\t['RGBA', 'rgba(' + r[0] + ', ' + r[1] + ', ' + r[2] + ', ' + a + ')'],\n\t\t\t\t['RGB\uff08\u900f\u660e\u5ea6\u306a\u3057\uff09', 'rgb(' + r[0] + ', ' + r[1] + ', ' + r[2] + ')'],\n\t\t\t\t['HSLA', 'hsla(' + hsl[0] + ', ' + hsl[1] + '%, ' + hsl[2] + '%, ' + a + ')'],\n\t\t\t\t['HSV \/ HSB\uff08\u900f\u660e\u5ea6\u306a\u3057\uff09', 'hsv(' + hsv[0] + ', ' + hsv[1] + '%, ' + hsv[2] + '%)'],\n\t\t\t\t['CMYK\uff08\u76ee\u5b89\u30fb\u900f\u660e\u5ea6\u306a\u3057\uff09', 'C' + cmyk[0] + ' M' + cmyk[1] + ' Y' + cmyk[2] + ' K' + cmyk[3]]\n\t\t\t];\n\t\t} else {\n\t\t\tformats = [\n\t\t\t\t['HEX', hex],\n\t\t\t\t['HEX\uff088\u6841\u30fb\u4e0d\u900f\u660e\u5ea650%\uff09', hex + '80'],\n\t\t\t\t['RGB', 'rgb(' + r[0] + ', ' + r[1] + ', ' + r[2] + ')'],\n\t\t\t\t['RGBA\uff0850%\uff09', 'rgba(' + r[0] + ', ' + r[1] + ', ' + r[2] + ', 0.5)'],\n\t\t\t\t['HSL', 'hsl(' + hsl[0] + ', ' + hsl[1] + '%, ' + hsl[2] + '%)'],\n\t\t\t\t['HSV \/ HSB', 'hsv(' + hsv[0] + ', ' + hsv[1] + '%, ' + hsv[2] + '%)'],\n\t\t\t\t['CMYK\uff08\u76ee\u5b89\uff09', 'C' + cmyk[0] + ' M' + cmyk[1] + ' Y' + cmyk[2] + ' K' + cmyk[3]]\n\t\t\t];\n\t\t}\n\n\t\t\/\/ \u534a\u900f\u660e\u306e\u8272\u306f\u5e02\u677e\u6a21\u69d8\u306e\u4e0a\u306b\u91cd\u306d\u3066\u3001\u900f\u3051\u5177\u5408\u304c\u5206\u304b\u308b\u3088\u3046\u306b\u3059\u308b\n\t\tvar checker = 'linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),linear-gradient(45deg,#ccc 25%,#fff 25%,#fff 75%,#ccc 75%)';\n\t\tvar html = translucent\n\t\t\t? '<div class=\"wt-cc-preview\" style=\"background:linear-gradient(' + hexA + ',' + hexA + '),' + checker + ';background-size:auto,16px 16px,16px 16px;background-position:0 0,0 0,8px 8px\"><\/div>'\n\t\t\t: '<div class=\"wt-cc-preview\" style=\"background:' + hex + '\"><\/div>';\n\t\tif (translucent) {\n\t\t\thtml += '<p class=\"wt-note\" style=\"margin:-.4em 0 1em\">\u4e0d\u900f\u660e\u5ea6 ' + W.esc(pct) + ' \u306e\u8272\u3068\u3057\u3066\u5909\u63db\u3057\u3066\u3044\u307e\u3059\u3002HSV\u30fbCMYK\u306b\u306f\u900f\u660e\u5ea6\u306e\u8868\u3057\u65b9\u304c\u7121\u3044\u305f\u3081\u3001\u8272\u3060\u3051\u3092\u51fa\u3057\u3066\u3044\u307e\u3059\u3002<\/p>';\n\t\t}\n\t\thtml += '<h3 class=\"wt-h\">\u5404\u5f62\u5f0f\u3067\u306e\u8868\u8a18<\/h3>';\n\t\thtml += '<div class=\"wt-data\"><table class=\"wt-dt\"><tbody>';\n\t\tformats.forEach(function (f, i) {\n\t\t\thtml += '<tr><td style=\"width:13em;color:var(--wt-muted);font-weight:700\">' + W.esc(f[0]) + '<\/td>' +\n\t\t\t\t'<td class=\"wt-mono\">' + W.esc(f[1]) + '<\/td>' +\n\t\t\t\t'<td style=\"width:6em\"><button type=\"button\" class=\"wt-mini\" data-cc=\"' + i + '\">\u30b3\u30d4\u30fc<\/button><\/td><\/tr>';\n\t\t});\n\t\thtml += '<\/tbody><\/table><\/div>';\n\n\t\t\/\/ \u660e\u5ea6\u9055\u3044\u306e\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\n\t\thtml += '<h3 class=\"wt-h\">\u660e\u5ea6\u9055\u3044\u306e\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3<\/h3>';\n\t\thtml += '<p class=\"wt-note\" style=\"margin:0 0 .5em\">\u8272\u76f8\u3068\u5f69\u5ea6\u306f\u305d\u306e\u307e\u307e\u306b\u3001\u660e\u308b\u3055\u3060\u3051\u3092\u5909\u3048\u305f\u3082\u306e\u3067\u3059\u3002\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u305d\u306e\u8272\u306b\u5207\u308a\u66ff\u308f\u308a\u307e\u3059' + (translucent ? '\uff08\u900f\u660e\u5ea6\u306f\u4eca\u306e\u5024\u3092\u5f15\u304d\u7d99\u304e\u307e\u3059\uff09' : '') + '\u3002<\/p>';\n\t\thtml += '<div class=\"wt-cc-scale\">';\n\t\tvar steps = [95, 85, 70, 55, 45, 35, 25, 15];\n\t\tsteps.forEach(function (l) {\n\t\t\tvar c = hslToRgb(hsl[0], hsl[1] \/ 100, l \/ 100);\n\t\t\tvar h = '#' + hex2(c[0]) + hex2(c[1]) + hex2(c[2]);\n\t\t\thtml += '<span style=\"background:' + h + ';color:' + (l > 55 ? '#333' : '#fff') + '\" data-cc-pick=\"' + h + '\">' + h.slice(1) + '<\/span>';\n\t\t});\n\t\thtml += '<\/div>';\n\n\t\thtml += '<h3 class=\"wt-h\">CSS\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3<\/h3>';\n\t\thtml += '<div class=\"wt-toolbar\"><button type=\"button\" class=\"wt-mini\" id=\"wt-cc-copycss\">\u30b3\u30d4\u30fc<\/button><\/div>';\n\t\tcss = ':root {\\n  --color-main: ' + (translucent ? hexA : hex) + ';\\n  --color-main-rgb: ' + r[0] + ', ' + r[1] + ', ' + r[2] + ';\\n' +\n\t\t\t(translucent ? '  --color-main-alpha: ' + a + ';\\n' : '') + '}';\n\t\thtml += '<pre class=\"wt-code\">' + W.esc(css) + '<\/pre>';\n\n\t\tresultBox.innerHTML = html;\n\t\tresultBox.hidden = false;\n\t}\n\n\t\/\/ \u30af\u30ea\u30c3\u30af\u306e\u53d7\u3051\u53e3\u306f1\u3064\u3060\u3051\uff08\u63cf\u304d\u76f4\u3059\u305f\u3073\u306b\u8db3\u3059\u3068\u30011\u56de\u306e\u30af\u30ea\u30c3\u30af\u3067\u4f55\u5ea6\u3082\u30b3\u30d4\u30fc\u3055\u308c\u308b\u305f\u3081\uff09\n\tresultBox.addEventListener('click', function (e) {\n\t\tvar t = e.target;\n\t\tif (!t || !t.getAttribute) return;\n\t\tvar i = t.getAttribute('data-cc');\n\t\tif (i !== null) { W.copy(formats[parseInt(i, 10)][1], t); return; }\n\t\tif (t.id === 'wt-cc-copycss') { W.copy(css, t); return; }\n\t\tvar p = t.getAttribute('data-cc-pick');\n\t\tif (p) {\n\t\t\tpicker.value = p;\n\t\t\t\/\/ \u900f\u660e\u5ea6\u306f\u4eca\u306e\u5024\u3092\u5f15\u304d\u7d99\u3050\n\t\t\tinput.value = 1 > alpha ? p + hex2(alpha * 255) : p;\n\t\t\tupdate(input.value);\n\t\t}\n\t});\n\n\tfunction update(text) {\n\t\tvar rgb = parse(text);\n\t\tif (!rgb) {\n\t\t\tresultBox.innerHTML = '<div class=\"wt-status is-error\">\u8272\u3068\u3057\u3066\u89e3\u91c8\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002#1769d3 \/ rgb(23,105,211) \/ hsl(212,80%,46%) \u306e\u3088\u3046\u306a\u5f62\u5f0f\u3067\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/div>';\n\t\t\tresultBox.hidden = false;\n\t\t\treturn;\n\t\t}\n\t\tpicker.value = '#' + hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);\n\t\trender(rgb);\n\t}\n\n\tpicker.addEventListener('input', function () { input.value = picker.value; update(picker.value); });\n\tinput.addEventListener('input', function () { update(input.value); });\n\n\tupdate(input.value);\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092HEX\u30fbRGB\u30fbHSL\u30fbHSV\u30fbCMYK \u306e\u76f8\u4e92\u5909\u63db\u304c\u3067\u304d\u307e\u3059\u3002\u30c7\u30b6\u30a4\u30f3\u30c4\u30fc\u30eb\u3068CSS\u3067\u8868\u8a18\u304c\u9055\u3046\u3068\u304d\u306e\u6a4b\u6e21\u3057\u306b\u3002\u3042\u308f\u305b\u3066\u660e\u5ea6\u9055\u3044\u306e\u30ab\u30e9\u30fc\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u3082\u81ea\u52d5\u751f\u6210\u3059\u308b\u306e\u3067\u3001\u30db\u30d0\u30fc\u8272\u3084\u80cc\u666f\u8272\u3092\u6c7a\u3081\u308b\u3068\u304d\u306b\u3082\u3069 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ssp_meta_description":"\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092HEX\u30fbRGB\u30fbHSL\u30fbHSV\u30fbCMYK\u3067\u76f8\u4e92\u5909\u63db\u3002\u660e\u5ea6\u9055\u3044\u306e\u30ab\u30e9\u30fc\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u3082\u81ea\u52d5\u751f\u6210\u3059\u308b\u306e\u3067\u3001\u30db\u30d0\u30fc\u8272\u3084\u80cc\u666f\u8272\u3092\u6c7a\u3081\u308b\u3068\u304d\u306b\u3082\u4fbf\u5229\u3067\u3059\u3002\u30d6\u30e9\u30a6\u30b6\u5185\u3067\u5b8c\u7d50\u3002\u4f1a\u54e1\u767b\u9332\u4e0d\u8981\u3002","ssp_meta_title":"\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u5909\u63db\uff5cHEX\u30fbRGB\u30fbHSL\u30fbCMYK\u3092\u7121\u6599\u5909\u63db","ssp_meta_robots":"","ssp_meta_canonical":"","ssp_meta_image":"","ssp_meta_keyword":"","footnotes":""},"class_list":["post-156","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/motoki-design.co.jp\/tools\/wp-json\/wp\/v2\/pages\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/motoki-design.co.jp\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/motoki-design.co.jp\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/motoki-design.co.jp\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/motoki-design.co.jp\/tools\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":1,"href":"https:\/\/motoki-design.co.jp\/tools\/wp-json\/wp\/v2\/pages\/156\/revisions"}],"predecessor-version":[{"id":178,"href":"https:\/\/motoki-design.co.jp\/tools\/wp-json\/wp\/v2\/pages\/156\/revisions\/178"}],"wp:attachment":[{"href":"https:\/\/motoki-design.co.jp\/tools\/wp-json\/wp\/v2\/media?parent=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}