{"id":10981,"date":"2026-02-13T16:24:32","date_gmt":"2026-02-13T07:24:32","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?page_id=10981"},"modified":"2026-02-13T16:24:32","modified_gmt":"2026-02-13T07:24:32","slug":"colorcode-converter","status":"publish","type":"page","link":"https:\/\/code-plus.jp\/gp\/tools\/colorcode-converter\/","title":{"rendered":"\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u4e00\u62ec\u5909\u63db\u30c4\u30fc\u30eb | RGBA, HSL\u21c4HEX\u5909\u63db\u30b5\u30a4\u30c8"},"content":{"rendered":"<!-- \u0f3b\u273f\ud835\udc0f\ud835\udc00\ud835\udc06\ud835\udc04-\u30ab\u30e9\u30fc\u5909\u63db\u30c4\u30fc\u30eb \uff08\/tools\/colorcode-converter\/\uff09\n* \u30da\u30fc\u30b8\u30af\u30e9\u30b9\uff1apg-saracnvtvkaa bg-hackingGate\uff08WordPress\u304c\u5c0f\u6587\u5b57\u3067\u3057\u304b\u51fa\u529b\u3067\u304d\u306a\u3044\u305f\u3081\uff09\n* \u8b58\u5225\u30b3\u30fc\u30c9\uff1acnvtVkaA\uff08section\/dept \u306e\u30af\u30e9\u30b9\u540d, \u753b\u50cf\u540d\u306b\u4f7f\u7528\uff09\n\u0fd0\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u2740\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u22b0\u27e1\u22b1\u0f36\u0f04 -->\n\n<div class=\"pg-saracnvtvkaa bg-hackingGate\">\n\n  <!-- \u0f3b.mezzala\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0a\uff09\u0f3a -->\n  <hr class=\"spacer-mezzala\" \/>\n\n  <hr id=\"ch-RgbConverter\" anchor \/>\n  <header class=\"page-header mx-auto\">\n    <!-- \u2756\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8 --><div><!-- breadcrumb.php -->\n<style>\n\/* \u2756breadcrumb.leckermaul\uff08\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8\uff09\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u0f1a\u0f36\u22b0\u27e1\u22b1\u0f36\u0f1a\u0f3a*\/\n.zaratan .breadcrumb.leckermaul {\n\twidth: 100%;\n\tmax-width: calc(var(--zvw,1vw) * 92.5);\n\tmargin-inline: auto;\n}\n\n.zaratan .breadcrumb.leckermaul :is(ul, ol) {\n\tmin-height: 48px;\n\tline-height: initial;\n\tfont-size: 0;\n\tletter-spacing: 0;\n\toverflow: hidden;\n}\n\n.zaratan .breadcrumb.leckermaul li {\n\tdisplay: inline;\n\tline-height: 1.6;\n\tfont-size: clamp(0.775pc, calc(0.775pc + ((1vw - 3.6px) * 0.1563)), 0.8750pc);\n}\n\n.zaratan .breadcrumb.leckermaul li>*,\n.zaratan .breadcrumb.leckermaul li::before {\n\tposition: relative;\n\ttop: 0.125em;\n\tdisplay: inline-flex;\n\talign-items: center;\n}\n\n.zaratan .breadcrumb.leckermaul a {\n\tdisplay: inline;\n\tcolor: var(--c-secondary-600, hsl(224, 25%, 43%));\n\tmargin-right: .5em;\n}\n\n.zaratan .breadcrumb.leckermaul li:nth-of-type(n+2) a {\n\tmargin-left: .5em;\n}\n\n\/* \u73fe\u5728\u306e\u30da\u30fc\u30b8\uff08\u30ea\u30f3\u30af\u306a\u3057\u3002<span aria-current=\"page\">\uff09 *\/\n.zaratan .breadcrumb.leckermaul [aria-current=\"page\"] {\n\tdisplay: inline;\n\tmargin-inline: .5em;\n\tcolor: var(--c-base-550, hsl(224, 6%, 47%));\n}\n\n@media (any-hover:hover) {\n\t.zaratan .breadcrumb.leckermaul a:hover {\n\t\tcolor: var(--c-secondary-600, hsl(224, 25%, 43%));\n\t}\n}\n\n\/* .ma-home *\/\n.zaratan .breadcrumb.leckermaul .ma-home {\n\tvertical-align: top;\n}\n\n\/* .separator *\/\n.zaratan .breadcrumb.leckermaul li:nth-of-type(n+2)::before,\n.zaratan .breadcrumb.leckermaul.chevron-right li:nth-of-type(n+2)::before {\n\tcontent: \">\";\n\tcolor: var(--c-secondary-600, hsl(224, 25%, 43%))\n}\n\n.zaratan .breadcrumb.leckermaul.slash li:nth-of-type(n+2)::before {\n\tcontent: \"\/\";\n}\n\n.zaratan .breadcrumb.leckermaul.trigon-bullet li:nth-of-type(n+2)::before {\n\tcontent: \"\u2023\";\n}\n<\/style>\n\n\n<nav class=\"breadcrumb leckermaul py-0.5r mx-auto\" aria-label=\"\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8\">\n  <ul class=\"breadcrumb-wrapper\">\n    <!-- \u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u8868\u793a -->\n    <li><a href=\"https:\/\/code-plus.jp\/gp\/\"><i><\/i>\u30c8\u30c3\u30d7<\/a><\/li>\n\n          <!-- \u56fa\u5b9a\u30da\u30fc\u30b8\uff08\u305d\u308c\u4ee5\u5916\uff09\uff1a \u5148\u7956\u30da\u30fc\u30b8\u540d\u3068\u3001\u73fe\u5728\u306e\u30da\u30fc\u30b8\u540d\u3092\u8868\u793a -->\n      <li><a href=\"https:\/\/code-plus.jp\/gp\/tools\/\">Web\u30c4\u30fc\u30eb\u4e00\u89a7\uff5cHTML\/CSS\u30fb\u6587\u66f8\u7de8\u96c6\u30fb\u753b\u50cf\u7de8\u96c6<\/a><\/li><li class=\"current_page_item\"><span aria-current=\"page\">\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u4e00\u62ec\u5909\u63db\u30c4\u30fc\u30eb | RGBA, HSL\u21c4HEX\u5909\u63db\u30b5\u30a4\u30c8<\/span><\/li>    <!-- \/\/\/if (is_page()) -->\n\n  <\/ul>\n<\/nav><\/div>\n  <\/header><!-- \/\/\/.inheader -->\n\n\n\n\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\n  <section class=\"sect-cnvtVkaA-Intro\" style=\"contain-intrinsic-size:1000px;\">\n    <header class=\"section__inheader mx-auto\">\n      <div class=\"hgroup-wrapper d-iblock mb-0.5r\">\n        <h1 class=\"fz-xxl hdg-page mb-0.25pc\"><span>\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u4e00\u62ec\u5909\u63db\u30c4\u30fc\u30eb | RGBA, HSL\u21c4HEX\u5909\u63db\u30b5\u30a4\u30c8<\/span><\/h1>\n        <p class=\"page-foreword fz-ss\">\u30c6\u30ad\u30b9\u30c8\u5185\u306eRGB \/ RGBA\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092WEB\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\uff08HEX\uff09\u306b\u4e00\u62ec\u5909\u63db\u3002\u9006\u5909\u63db\uff08HEX \u2192 RGB\uff09\u306b\u3082\u5bfe\u5fdc\u3002<\/p>\n      <\/div><!-- \/\/\/.hgroup -->\n\n      <a class=\"fl-right badge is-outlined is-gray fz-xs bdrs-0.25r\" href=\"#ch-Explanation\">\n        <i class=\"icon mas ma-help\"><\/i>&nbsp;<span>\u4f7f\u3044\u65b9<\/span>\n      <\/a>\n    <\/header><!-- \/\/\/.inheader -->\n  <\/section>\n\n\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\n  <hr id=\"ch-Converter\" anchor \/>\n  <section class=\"sect-cnvtVkaA-Converter\" style=\"contain-intrinsic-size:1000px;\">\n    <div class=\"section__interior fxd-row mx-auto\">\n      <figure class=\"section__leftlane\">\n        <div class=\"hgroup-wrapper\">\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u30c6\u30ad\u30b9\u30c8\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span><\/h3>\n        <\/div><!-- \/\/\/.hgroup -->\n\n        <div class=\"chest-wrapper relatived\">\n          <textarea id=\"encodeArea\" class=\"textarea\" style=\"height:17.5pc;\" placeholder=\"rgb(42, 45, 61) \u3084 rgba(255, 128, 0, 0.5) \u3092\u542b\u3080\u30c6\u30ad\u30b9\u30c8\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\"><\/textarea>\n          <ins id=\"decodedMessage\"><\/ins>\n        <\/div><!-- \/\/\/.chest -->\n\n        <!-- \u30aa\u30d7\u30b7\u30e7\u30f3 -->\n        <div class=\"colgroup w-full mt-1r\">\n          <h4 class=\"title is-outlined fz-sm\">\u30aa\u30d7\u30b7\u30e7\u30f3\u8a2d\u5b9a\n            <button type=\"button\" onclick=\"uncheckAllOptions()\" class=\"badge is-outlined is-gray fz-xxs ml-auto\">\n              <i class=\"icon mas ma-close\"><\/i>&nbsp;<span>\u3059\u3079\u3066\u30c1\u30a7\u30c3\u30af\u3092\u5916\u3059<\/span>\n            <\/button>\n          <\/h4>\n          <label class=\"label is-outlined fz-sm\"><input type=\"checkbox\" class=\"checkbox\" id=\"convertRgb2Hex\" checked>rgb() \/ rgba() \u3092 \u2192 HEX\u30b3\u30fc\u30c9 \u306b\u5909\u63db<\/label>\n          <label class=\"label is-outlined fz-sm\"><input type=\"checkbox\" class=\"checkbox\" id=\"convertHsl2Hex\">hsl() \/ hsla() \u3092 \u2192 HEX\u30b3\u30fc\u30c9 \u306b\u5909\u63db<\/label>\n          <label class=\"label is-outlined fz-sm\"><input type=\"checkbox\" class=\"checkbox\" id=\"cleanLegacyCode\" checked>\u53e4\u3044\u30b3\u30fc\u30c9\u3092\u6574\u7406\uff08\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u30fbIE\u7528filter\u7b49\u3092\u524a\u9664\uff09<\/label>\n          <label class=\"label is-outlined fz-sm\"><input type=\"checkbox\" class=\"checkbox\" id=\"convertHexUpperCase\" checked>HEX\u30b3\u30fc\u30c9\u3092\u5927\u6587\u5b57\u3067\u51fa\u529b\uff08#2a2d3d \u2192 #2A2D3D\uff09<\/label>\n          <label class=\"label is-outlined fz-sm\"><input type=\"checkbox\" class=\"checkbox\" id=\"convertHexShorthand\">\u77ed\u7e2e\u53ef\u80fd\u306aHEX\u30b3\u30fc\u30c9\u3092\u77ed\u7e2e\uff08#AABBCC \u2192 #ABC\uff09<\/label>\n          <label class=\"label is-outlined fz-sm\"><input type=\"checkbox\" class=\"checkbox\" id=\"convertRemoveAlpha\">rgba() \u306e\u30a2\u30eb\u30d5\u30a1\u5024\u3092\u7121\u8996\u3057\u3066\u5909\u63db<\/label>\n        <\/div><!-- \/\/\/.colgroup -->\n\n        <!-- \u304b\u3093\u305f\u3093\u5909\u63db -->\n        <div class=\"colgroup w-full mt-1r\">\n          <h4 class=\"title is-outlined fz-sm\">\u304b\u3093\u305f\u3093\u5909\u63db<\/h4>\n          <div class=\"fxd-row fz-sm\" style=\"gap:0.5rem;align-items:center;\">\n            <input type=\"text\" id=\"quickInput\" class=\"input\" style=\"width:16em;\" placeholder=\"rgb(42, 45, 61)\" \/>\n            <span>\u2192<\/span>\n            <input type=\"text\" id=\"quickOutput\" class=\"input\" style=\"width:10em;\" readonly placeholder=\"#2A2D3D\" \/>\n            <span id=\"quickPreview\" style=\"display:inline-block;width:1.5em;height:1.5em;border:1px solid #ccc;border-radius:3px;vertical-align:middle;\"><\/span>\n          <\/div>\n        <\/div><!-- \/\/\/.colgroup -->\n      <\/figure><!-- \/\/\/.leftlane -->\n\n      <figure class=\"section__centerlane\">\n        <aside class=\"sticky-sidebar fxd-column pc-center\">\n          <a class=\"button is-solided is-primary\" href=\"#ch-Converter\" onclick=\"encodeText()\"><span>\u5909\u63db&nbsp;\u00bb<\/span><\/a>\n          <a class=\"button is-solided is-primary mt-2r\" href=\"#ch-Converter\" onclick=\"decodeText()\"><span>\u00ab&nbsp;\u5909\u63db<\/span><\/a>\n        <\/aside>\n      <\/figure><!-- \/\/\/.centerlane -->\n\n\n      <figure class=\"section__rightlane\">\n        <div class=\"chest-wrapper relatived\">\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u5909\u63db\u5f8c\u306e\u30c6\u30ad\u30b9\u30c8<\/span><\/h3>\n          <textarea class=\"textarea\" id=\"decodeArea\" style=\"height:17.5pc;\" placeholder=\"\u3053\u3053\u306b\u5909\u63db\u5f8c\u306e\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\"><\/textarea>\n          <ins id=\"encodedMessage\"><\/ins>\n        <\/div><!-- \/\/\/.chest -->\n\n        <div class=\"colgroup w-full mt-1r\">\n          <!-- \u30aa\u30d7\u30b7\u30e7\u30f3 -->\n          <label class=\"label is-outlined fz-sm\"><input type=\"checkbox\" class=\"checkbox\" id=\"decodeHex2Rgb\">HEX\u30b3\u30fc\u30c9\u3092 \u2192 rgb() \/ rgba() \u306b\u30c7\u30b3\u30fc\u30c9<\/label>\n          <label class=\"label is-outlined fz-sm\"><input type=\"checkbox\" class=\"checkbox\" id=\"decodeHex2Hsl\" checked>HEX\u30b3\u30fc\u30c9\u3092 \u2192 hsl() \/ hsla() \u306b\u30c7\u30b3\u30fc\u30c9<\/label>\n        <\/div><!-- \/\/\/.colgroup -->\n      <\/figure><!-- \/\/\/.rightlane -->\n    <\/div><!-- \/\/\/.interior.fxd-row -->\n  <\/section>\n\n\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\n  <hr id=\"ch-Explanation\" anchor \/>\n  <section class=\"sect-cnvtVkaA-Explanation pt-3r\" style=\"contain-intrinsic-size:1000px;\">\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\n      <div class=\"box is-broad is-solided c-base-900\">\n        <h4 class=\"hdg-explanation fz-md mb-0.25pc\">\u4f7f\u3044\u65b9<\/h4>\n        <p class=\"fz-ss mb-1r\">\n          \u5de6\u5074\u306e\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u306bRGB \/ RGBA\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092\u542b\u3080\u30c6\u30ad\u30b9\u30c8\uff08CSS\u306a\u3069\uff09\u3092\u5165\u529b\u3057\u3001\u300c\u5909\u63db \u00bb\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u53f3\u5074\u306bHEX\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u306b\u5909\u63db\u3055\u308c\u305f\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\n        <\/p>\n\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\ud83d\udca1 \u4e3b\u306a\u6a5f\u80fd<\/h5>\n        <ul class=\"fz-ss mb-1r\">\n          <li><b>RGB \u2192 HEX\u5909\u63db\uff1a<\/b> rgb(42, 45, 61) \u2192 #2A2D3D<\/li>\n          <li><b>RGBA \u2192 HEX\u5909\u63db\uff1a<\/b> rgba(42, 45, 61, 0.5) \u2192 #2A2D3D80\uff08\u30a2\u30eb\u30d5\u30a1\u5024\u4ed8\u304d\uff09<\/li>\n          <li><b>HSL \u2192 HEX\u5909\u63db\uff1a<\/b> hsl(210, 50%, 50%) \u2192 #4080BF<\/li>\n          <li><b>\u9006\u5909\u63db\u5bfe\u5fdc\uff1a<\/b> HEX \u2192 RGB \/ HSL\u5909\u63db\u3082\u53ef\u80fd<\/li>\n          <li><b>\u4e00\u62ec\u5909\u63db\uff1a<\/b> \u30c6\u30ad\u30b9\u30c8\u5185\u306e\u5168\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092\u4e00\u62ec\u3067\u5909\u63db<\/li>\n          <li><b>\u304b\u3093\u305f\u3093\u5909\u63db\uff1a<\/b> 1\u3064\u306e\u5024\u3092\u624b\u8efd\u306b\u5909\u63db\u3057\u3066\u30d7\u30ec\u30d3\u30e5\u30fc<\/li>\n        <\/ul>\n\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\ud83c\udfaf \u6d3b\u7528\u4f8b<\/h5>\n        <ul class=\"fz-ss mb-1r\">\n          <li><b>CSS\u7de8\u96c6\uff1a<\/b> Figma\u3084\u30c7\u30b6\u30a4\u30f3\u30c4\u30fc\u30eb\u304b\u3089\u51fa\u529b\u3055\u308c\u305frgb\u5024\u3092HEX\u306b\u5909\u63db<\/li>\n          <li><b>\u30ab\u30e9\u30fc\u7d71\u4e00\uff1a<\/b> \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5185\u306e\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u8868\u8a18\u3092\u7d71\u4e00<\/li>\n          <li><b>\u30c7\u30d0\u30c3\u30b0\uff1a<\/b> rgba()\u306e\u30a2\u30eb\u30d5\u30a1\u5024\u3092HEX\u5f62\u5f0f\u3067\u78ba\u8a8d<\/li>\n        <\/ul>\n\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\u2699\ufe0f \u5909\u63db\u30aa\u30d7\u30b7\u30e7\u30f3<\/h5>\n        <ul class=\"fz-ss\">\n          <li><b>\u5927\u6587\u5b57\/\u5c0f\u6587\u5b57\uff1a<\/b> HEX\u30b3\u30fc\u30c9\u306e\u5927\u6587\u5b57\u30fb\u5c0f\u6587\u5b57\u3092\u9078\u629e\u53ef\u80fd<\/li>\n          <li><b>\u77ed\u7e2e\u5f62\uff1a<\/b> #AABBCC \u2192 #ABC \u306e\u3088\u3046\u306b\u77ed\u7e2e\u53ef\u80fd\u306a\u30b3\u30fc\u30c9\u3092\u81ea\u52d5\u77ed\u7e2e<\/li>\n          <li><b>\u30a2\u30eb\u30d5\u30a1\u5024\u7121\u8996\uff1a<\/b> rgba()\u306e\u30a2\u30eb\u30d5\u30a1\u5024\u3092\u9664\u5916\u3057\u3066RGB\u90e8\u5206\u306e\u307f\u5909\u63db<\/li>\n          <li><b>HSL\u5bfe\u5fdc\uff1a<\/b> hsl() \/ hsla() \u5f62\u5f0f\u306e\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3082\u5909\u63db\u53ef\u80fd<\/li>\n        <\/ul>\n      <\/div><!-- \/\/\/.box -->\n    <\/div><!-- \/\/\/.interior -->\n  <\/section><!-- \/\/\/.section -->\n\n\n  <!-- \u0f3b\u00a7\ud835\udc03\ud835\udc04\ud835\udc0f\ud835\udc00\ud835\udc11\ud835\udc13\ud835\udc0c\ud835\udc04\ud835\udc0d\ud835\udc13\u0f3a -->\n  <hr id=\"ch-Relation\" anchor \/>\n  <section class=\"sect-cnvtVkaA-Relation pt-3r\" style=\"contain-intrinsic-size:1000px;\">\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\n      <div class=\"hgroup-wrapper mb-0.5pc\">\n        <h5 class=\"hdg-relation fz-rg\"><span>\u95a2\u9023\u30c4\u30fc\u30eb<\/span><\/h5>\n      <\/div><!-- \/\/\/.hgroup -->\n\n      <ul class=\"shelf-wrapper_pc shelfA\" data-cols_pc=\"2\">\n        <li class=\"slide\">\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/markdown-converter\/\" class=\"linkbox\">\n            <h4 class=\"linkbox-title\">Markdown \u2192 HTML \u5909\u63db\u30c4\u30fc\u30eb<\/h4>\n            <span class=\"linkbox-excerpt\">\n              Markdown\u8a18\u6cd5\u3092HTML\u306b\u5909\u63db\u3002\u30c6\u30fc\u30d6\u30eb\u3001\u30ea\u30b9\u30c8\u8a18\u6cd5\u3092\u30b5\u30dd\u30fc\u30c8\u3002\n              <u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\n            <\/span>\n          <\/a>\n        <\/li>\n      <\/ul><!-- \/\/\/.shelf -->\n    <\/div><!-- \/\/\/.interior -->\n  <\/section><!-- \/\/\/.section -->\n\n\n  <!-- \u0f3b\u00a7\ud835\udc03\ud835\udc04\ud835\udc0f\ud835\udc00\ud835\udc11\ud835\udc13\ud835\udc0c\ud835\udc04\ud835\udc0d\ud835\udc13\u0f3a -->\n\n  <section class=\"sect-cnvtVkaA-Relation2 pt-3r\" style=\"contain-intrinsic-size:1000px;\">\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\n      <div class=\"hgroup-wrapper mb-0.5pc\">\n\n      <\/div><!-- \/\/\/.hgroup -->\n\n\n    <\/div><!-- \/\/\/.interior -->\n  <\/section><!-- \/\/\/.section -->\n\n\n\n\n  <!-- \u0f3b.mediano\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0b\uff09\u0f3a -->\n  <hr class=\"spacer-mediano\" \/>\n\n<\/div><!-- \/\/\/\u25b2.page  -->\n\n\n\n\n<script>\n  \/\/\u5de6\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2 \u2192 \u53f3\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u3078\u306e\u5909\u63db\n  function encodeText() {\n    let encode_area = document.getElementById('encodeArea');\n    let decode_area = document.getElementById('decodeArea');\n    let text = encode_area.value;\n\n    if (document.getElementById('cleanLegacyCode').checked) { text = cleanLegacyCode(text); }\n    if (document.getElementById('convertRgb2Hex').checked) { text = convertRgb2Hex(text); }\n    if (document.getElementById('convertHsl2Hex').checked) { text = convertHsl2Hex(text); }\n    if (document.getElementById('convertHexShorthand').checked) { text = convertHexShorthand(text); }\n\n    decode_area.value = text;\n    copyToClipboard(text, false);  \/\/isDecode = false\n  }\n\n\n  \/\/\u53f3\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2 \u2192 \u5de6\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u3078\u306e\u5909\u63db\n  function decodeText() {\n    let encode_area = document.getElementById('encodeArea');\n    let decode_area = document.getElementById('decodeArea');\n    let text = decode_area.value;\n\n    if (document.getElementById('decodeHex2Rgb').checked) { text = decodeHex2Rgb(text); }\n    if (document.getElementById('decodeHex2Hsl').checked) { text = decodeHex2Hsl(text); }\n\n    encode_area.value = text;\n    copyToClipboard(text, true);   \/\/isDecode = true\n  }\n\n\n\n\n  \/\/ ============================================================\n  \/\/ \u53e4\u3044\u30b3\u30fc\u30c9\u3092\u6574\u7406\uff08\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u30fbIE\u7528filter\u7b49\u3092\u524a\u9664\uff09\n  \/\/ ============================================================\n  function cleanLegacyCode(text) {\n    const lines = text.split('\\n');\n    const result = [];\n    let skipUntilSemicolon = false;\n\n    for (let i = 0; i < lines.length; i++) {\n      const trimmed = lines[i].trim();\n\n      \/\/ \u524d\u306e\u884c\u304b\u3089\u7d99\u7d9a\u3057\u3066\u30b9\u30ad\u30c3\u30d7\u4e2d\uff08\u30bb\u30df\u30b3\u30ed\u30f3\u3067\u7d42\u308f\u308b\u307e\u3067\uff09\n      if (skipUntilSemicolon) {\n        if (trimmed.includes(';')) {\n          skipUntilSemicolon = false;\n        }\n        continue;\n      }\n\n      \/\/ \u524a\u9664\u5bfe\u8c61\u306e\u5224\u5b9a\n      if (isLegacyLine(trimmed)) {\n        \/\/ \u30bb\u30df\u30b3\u30ed\u30f3\u304c\u306a\u3051\u308c\u3070\u6b21\u306e\u884c\u4ee5\u964d\u3082\u30b9\u30ad\u30c3\u30d7\uff08\u8907\u6570\u884c\u306b\u307e\u305f\u304c\u308b\u5ba3\u8a00\uff09\n        if (!trimmed.includes(';')) {\n          skipUntilSemicolon = true;\n        }\n        continue;\n      }\n\n      result.push(lines[i]);\n    }\n\n    \/\/ \u9023\u7d9a\u3059\u308b\u7a7a\u884c\u30921\u884c\u306b\u307e\u3068\u3081\u308b\n    return result.join('\\n').replace(\/\\n{3,}\/g, '\\n\\n');\n  }\n\n  \/\/ \u524a\u9664\u5bfe\u8c61\u306e\u884c\u304b\u3069\u3046\u304b\u3092\u5224\u5b9a\n  function isLegacyLine(line) {\n    \/\/ \u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u4ed8\u304d\u30d7\u30ed\u30d1\u30c6\u30a3\uff08background, transition, transform \u7b49\u3059\u3079\u3066\uff09\n    if (\/^-(?:moz|webkit|o|ms)-\/.test(line)) return true;\n\n    \/\/ background: -moz-..., background: -webkit-..., background: -o-..., background: -ms-...\n    if (\/^background\\s*:\\s*-(?:moz|webkit|o|ms)-\/.test(line)) return true;\n\n    \/\/ -webkit-gradient(linear, ...) \u65e7Safari\u8a18\u6cd5\n    if (\/^background\\s*:\\s*-webkit-gradient\\s*\\(\/.test(line)) return true;\n\n    \/\/ filter: progid:DXImageTransform...\uff08IE\u7528\uff09\n    if (\/^filter\\s*:\\s*progid:\/.test(line)) return true;\n\n    \/\/ -ms-filter: \"progid:...\"\uff08IE\u7528\uff09\n    if (\/^-ms-filter\\s*:\/.test(line)) return true;\n\n    return false;\n  }\n\n\n  \/\/ ============================================================\n  \/\/ RGB \/ RGBA \u2192 HEX \u5909\u63db\n  \/\/ ============================================================\n  function convertRgb2Hex(text) {\n    const toUpperCase = document.getElementById('convertHexUpperCase').checked;\n    const removeAlpha = document.getElementById('convertRemoveAlpha').checked;\n\n    \/\/ rgba(R, G, B, A) \u3092\u691c\u51fa\u3057\u3066\u5909\u63db\n    text = text.replace(\/rgba?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*(?:,\\s*([0-9]*\\.?[0-9]+)\\s*)?\\)\/gi, function (match, r, g, b, a) {\n      const red = clampColor(parseInt(r, 10));\n      const green = clampColor(parseInt(g, 10));\n      const blue = clampColor(parseInt(b, 10));\n\n      let hex = '#' + toHex2(red) + toHex2(green) + toHex2(blue);\n\n      \/\/ \u30a2\u30eb\u30d5\u30a1\u5024\u306e\u51e6\u7406\n      if (a !== undefined && !removeAlpha) {\n        const alpha = Math.round(clampAlpha(parseFloat(a)) * 255);\n        hex += toHex2(alpha);\n      }\n\n      return toUpperCase ? hex.toUpperCase() : hex.toLowerCase();\n    });\n\n    return text;\n  }\n\n\n  \/\/ ============================================================\n  \/\/ HSL \/ HSLA \u2192 HEX \u5909\u63db\n  \/\/ ============================================================\n  function convertHsl2Hex(text) {\n    const toUpperCase = document.getElementById('convertHexUpperCase').checked;\n    const removeAlpha = document.getElementById('convertRemoveAlpha').checked;\n\n    \/\/ hsla(H, S%, L%, A) \u3092\u691c\u51fa\u3057\u3066\u5909\u63db\n    text = text.replace(\/hsla?\\(\\s*(\\d{1,3}(?:\\.\\d+)?)\\s*,\\s*(\\d{1,3}(?:\\.\\d+)?)%\\s*,\\s*(\\d{1,3}(?:\\.\\d+)?)%\\s*(?:,\\s*([0-9]*\\.?[0-9]+)\\s*)?\\)\/gi, function (match, h, s, l, a) {\n      const hue = parseFloat(h) % 360;\n      const sat = clampPercent(parseFloat(s)) \/ 100;\n      const lig = clampPercent(parseFloat(l)) \/ 100;\n\n      const rgb = hsl2rgb(hue, sat, lig);\n      let hex = '#' + toHex2(rgb.r) + toHex2(rgb.g) + toHex2(rgb.b);\n\n      \/\/ \u30a2\u30eb\u30d5\u30a1\u5024\u306e\u51e6\u7406\n      if (a !== undefined && !removeAlpha) {\n        const alpha = Math.round(clampAlpha(parseFloat(a)) * 255);\n        hex += toHex2(alpha);\n      }\n\n      return toUpperCase ? hex.toUpperCase() : hex.toLowerCase();\n    });\n\n    return text;\n  }\n\n\n  \/\/ ============================================================\n  \/\/ HEX\u77ed\u7e2e\u5f62\u306b\u5909\u63db\uff08#AABBCC \u2192 #ABC\uff09\n  \/\/ ============================================================\n  function convertHexShorthand(text) {\n    const toUpperCase = document.getElementById('convertHexUpperCase').checked;\n\n    \/\/ #RRGGBB \u5f62\u5f0f\uff08\u30a2\u30eb\u30d5\u30a1\u306a\u3057\uff09\u306e\u307f\u77ed\u7e2e\n    text = text.replace(\/#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})(?![0-9A-Fa-f])\/g, function (match, r, g, b) {\n      \/\/ \u5404\u30c1\u30e3\u30f3\u30cd\u30eb\u306e2\u6587\u5b57\u304c\u540c\u3058\u306a\u3089\u77ed\u7e2e\u53ef\u80fd\n      if (r[0] === r[1] && g[0] === g[1] && b[0] === b[1]) {\n        let short = '#' + r[0] + g[0] + b[0];\n        return toUpperCase ? short.toUpperCase() : short.toLowerCase();\n      }\n      return match;\n    });\n\n    return text;\n  }\n\n\n  \/\/ ============================================================\n  \/\/ HEX \u2192 RGB \/ RGBA \u30c7\u30b3\u30fc\u30c9\n  \/\/ ============================================================\n  function decodeHex2Rgb(text) {\n    \/\/ #RRGGBBAA\uff088\u6841\uff09\n    text = text.replace(\/#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})(?![0-9A-Fa-f])\/g, function (match, r, g, b, a) {\n      const red = parseInt(r, 16);\n      const green = parseInt(g, 16);\n      const blue = parseInt(b, 16);\n      const alpha = (parseInt(a, 16) \/ 255).toFixed(2).replace(\/\\.?0+$\/, '');\n      return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';\n    });\n\n    \/\/ #RRGGBB\uff086\u6841\uff09\n    text = text.replace(\/#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})(?![0-9A-Fa-f])\/g, function (match, r, g, b) {\n      const red = parseInt(r, 16);\n      const green = parseInt(g, 16);\n      const blue = parseInt(b, 16);\n      return 'rgb(' + red + ', ' + green + ', ' + blue + ')';\n    });\n\n    \/\/ #RGBA\uff084\u6841\uff09\n    text = text.replace(\/#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])(?![0-9A-Fa-f])\/g, function (match, r, g, b, a) {\n      const red = parseInt(r + r, 16);\n      const green = parseInt(g + g, 16);\n      const blue = parseInt(b + b, 16);\n      const alpha = (parseInt(a + a, 16) \/ 255).toFixed(2).replace(\/\\.?0+$\/, '');\n      return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';\n    });\n\n    \/\/ #RGB\uff083\u6841\uff09\n    text = text.replace(\/#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])(?![0-9A-Fa-f])\/g, function (match, r, g, b) {\n      const red = parseInt(r + r, 16);\n      const green = parseInt(g + g, 16);\n      const blue = parseInt(b + b, 16);\n      return 'rgb(' + red + ', ' + green + ', ' + blue + ')';\n    });\n\n    return text;\n  }\n\n\n  \/\/ ============================================================\n  \/\/ HEX \u2192 HSL \/ HSLA \u30c7\u30b3\u30fc\u30c9\n  \/\/ ============================================================\n  function decodeHex2Hsl(text) {\n    \/\/ #RRGGBBAA\uff088\u6841\uff09\n    text = text.replace(\/#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})(?![0-9A-Fa-f])\/g, function (match, r, g, b, a) {\n      const hsl = rgb2hsl(parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));\n      const alpha = (parseInt(a, 16) \/ 255).toFixed(2).replace(\/\\.?0+$\/, '');\n      return 'hsla(' + hsl.h + ', ' + hsl.s + '%, ' + hsl.l + '%, ' + alpha + ')';\n    });\n\n    \/\/ #RRGGBB\uff086\u6841\uff09\n    text = text.replace(\/#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})(?![0-9A-Fa-f])\/g, function (match, r, g, b) {\n      const hsl = rgb2hsl(parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));\n      return 'hsl(' + hsl.h + ', ' + hsl.s + '%, ' + hsl.l + '%)';\n    });\n\n    \/\/ #RGBA\uff084\u6841\uff09\n    text = text.replace(\/#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])(?![0-9A-Fa-f])\/g, function (match, r, g, b, a) {\n      const hsl = rgb2hsl(parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16));\n      const alpha = (parseInt(a + a, 16) \/ 255).toFixed(2).replace(\/\\.?0+$\/, '');\n      return 'hsla(' + hsl.h + ', ' + hsl.s + '%, ' + hsl.l + '%, ' + alpha + ')';\n    });\n\n    \/\/ #RGB\uff083\u6841\uff09\n    text = text.replace(\/#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])(?![0-9A-Fa-f])\/g, function (match, r, g, b) {\n      const hsl = rgb2hsl(parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16));\n      return 'hsl(' + hsl.h + ', ' + hsl.s + '%, ' + hsl.l + '%)';\n    });\n\n    return text;\n  }\n\n\n\n\n  \/\/ ============================================================\n  \/\/ \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u95a2\u6570\n  \/\/ ============================================================\n\n  \/\/ 0\uff5e255\u306b\u30af\u30e9\u30f3\u30d7\n  function clampColor(val) {\n    return Math.max(0, Math.min(255, val));\n  }\n\n  \/\/ 0\uff5e1\u306b\u30af\u30e9\u30f3\u30d7\n  function clampAlpha(val) {\n    return Math.max(0, Math.min(1, val));\n  }\n\n  \/\/ 0\uff5e100\u306b\u30af\u30e9\u30f3\u30d7\n  function clampPercent(val) {\n    return Math.max(0, Math.min(100, val));\n  }\n\n  \/\/ \u6570\u5024\u30922\u6841\u306e16\u9032\u6570\u6587\u5b57\u5217\u306b\u5909\u63db\n  function toHex2(val) {\n    return val.toString(16).padStart(2, '0');\n  }\n\n  \/\/ HSL \u2192 RGB \u5909\u63db\n  function hsl2rgb(h, s, l) {\n    const c = (1 - Math.abs(2 * l - 1)) * s;\n    const x = c * (1 - Math.abs((h \/ 60) % 2 - 1));\n    const m = l - c \/ 2;\n\n    let r = 0, g = 0, b = 0;\n    if (h < 60) { r = c; g = x; b = 0; }\n    else if (h < 120) { r = x; g = c; b = 0; }\n    else if (h < 180) { r = 0; g = c; b = x; }\n    else if (h < 240) { r = 0; g = x; b = c; }\n    else if (h < 300) { r = x; g = 0; b = c; }\n    else { r = c; g = 0; b = x; }\n\n    return {\n      r: Math.round((r + m) * 255),\n      g: Math.round((g + m) * 255),\n      b: Math.round((b + m) * 255)\n    };\n  }\n\n  \/\/ RGB \u2192 HSL \u5909\u63db\n  function rgb2hsl(r, g, b) {\n    r \/= 255; g \/= 255; b \/= 255;\n    const max = Math.max(r, g, b);\n    const min = Math.min(r, g, b);\n    const d = max - min;\n    const l = (max + min) \/ 2;\n\n    let h = 0, s = 0;\n    if (d !== 0) {\n      s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\n      switch (max) {\n        case r: h = ((g - b) \/ d + (g < b ? 6 : 0)) * 60; break;\n        case g: h = ((b - r) \/ d + 2) * 60; break;\n        case b: h = ((r - g) \/ d + 4) * 60; break;\n      }\n    }\n\n    return {\n      h: Math.round(h),\n      s: Math.round(s * 100),\n      l: Math.round(l * 100)\n    };\n  }\n\n\n\n\n  \/\/ ============================================================\n  \/\/ \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\n  \/\/ ============================================================\n  function copyToClipboard(text, isDecode) {\n    if (navigator.clipboard) {\n      navigator.clipboard.writeText(text);\n    }\n    let messageBox = isDecode\n      ? document.getElementById('decodedMessage')\n      : document.getElementById('encodedMessage');\n\n    messageBox.textContent = '\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f';\n    messageBox.style.opacity = '1';\n    setTimeout(function () { messageBox.style.opacity = '0'; }, 3000);\n  }\n\n\n  \/\/ ============================================================\n  \/\/ \u3059\u3079\u3066\u306e\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u5916\u3059\n  \/\/ ============================================================\n  function uncheckAllOptions() {\n    let checkboxes = document.querySelectorAll('input[type=\"checkbox\"]');\n    checkboxes.forEach(function (checkbox) {\n      checkbox.checked = false;\n    });\n\n    let messageBox = document.getElementById('decodedMessage');\n    messageBox.textContent = '\u3059\u3079\u3066\u306e\u30c1\u30a7\u30c3\u30af\u304c\u5916\u308c\u307e\u3057\u305f';\n    messageBox.style.opacity = '1';\n    setTimeout(function () { messageBox.style.opacity = '0'; }, 3000);\n  }\n\n\n  \/\/ ============================================================\n  \/\/ \u304b\u3093\u305f\u3093\u5909\u63db\uff08\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\uff09\n  \/\/ ============================================================\n  function quickConvert() {\n    const input = document.getElementById('quickInput').value.trim();\n    const output = document.getElementById('quickOutput');\n    const preview = document.getElementById('quickPreview');\n\n    if (!input) {\n      output.value = '';\n      preview.style.backgroundColor = 'transparent';\n      return;\n    }\n\n    let result = input;\n    let previewColor = '';\n\n    \/\/ rgb\/rgba \u2192 hex\n    const rgbMatch = input.match(\/rgba?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*(?:,\\s*([0-9]*\\.?[0-9]+)\\s*)?\\)\/i);\n    if (rgbMatch) {\n      const r = clampColor(parseInt(rgbMatch[1], 10));\n      const g = clampColor(parseInt(rgbMatch[2], 10));\n      const b = clampColor(parseInt(rgbMatch[3], 10));\n      let hex = '#' + toHex2(r) + toHex2(g) + toHex2(b);\n      previewColor = 'rgb(' + r + ',' + g + ',' + b + ')';\n\n      if (rgbMatch[4] !== undefined) {\n        const a = Math.round(clampAlpha(parseFloat(rgbMatch[4])) * 255);\n        hex += toHex2(a);\n        previewColor = 'rgba(' + r + ',' + g + ',' + b + ',' + rgbMatch[4] + ')';\n      }\n      result = hex.toUpperCase();\n    }\n\n    \/\/ hsl\/hsla \u2192 hex\n    const hslMatch = input.match(\/hsla?\\(\\s*(\\d{1,3}(?:\\.\\d+)?)\\s*,\\s*(\\d{1,3}(?:\\.\\d+)?)%\\s*,\\s*(\\d{1,3}(?:\\.\\d+)?)%\\s*(?:,\\s*([0-9]*\\.?[0-9]+)\\s*)?\\)\/i);\n    if (hslMatch) {\n      const h = parseFloat(hslMatch[1]) % 360;\n      const s = clampPercent(parseFloat(hslMatch[2])) \/ 100;\n      const l = clampPercent(parseFloat(hslMatch[3])) \/ 100;\n      const rgb = hsl2rgb(h, s, l);\n      let hex = '#' + toHex2(rgb.r) + toHex2(rgb.g) + toHex2(rgb.b);\n      previewColor = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';\n\n      if (hslMatch[4] !== undefined) {\n        const a = Math.round(clampAlpha(parseFloat(hslMatch[4])) * 255);\n        hex += toHex2(a);\n      }\n      result = hex.toUpperCase();\n    }\n\n    \/\/ hex \u2192 rgb\uff08\u9006\u5909\u63db\u30d7\u30ec\u30d3\u30e5\u30fc\uff09\n    const hexMatch = input.match(\/^#([0-9A-Fa-f]{3,8})$\/);\n    if (hexMatch) {\n      const h = hexMatch[1];\n      let r, g, b, a;\n      if (h.length === 3) {\n        r = parseInt(h[0] + h[0], 16);\n        g = parseInt(h[1] + h[1], 16);\n        b = parseInt(h[2] + h[2], 16);\n        result = 'rgb(' + r + ', ' + g + ', ' + b + ')';\n      } else if (h.length === 4) {\n        r = parseInt(h[0] + h[0], 16);\n        g = parseInt(h[1] + h[1], 16);\n        b = parseInt(h[2] + h[2], 16);\n        a = (parseInt(h[3] + h[3], 16) \/ 255).toFixed(2).replace(\/\\.?0+$\/, '');\n        result = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';\n      } else if (h.length === 6) {\n        r = parseInt(h.substring(0, 2), 16);\n        g = parseInt(h.substring(2, 4), 16);\n        b = parseInt(h.substring(4, 6), 16);\n        result = 'rgb(' + r + ', ' + g + ', ' + b + ')';\n      } else if (h.length === 8) {\n        r = parseInt(h.substring(0, 2), 16);\n        g = parseInt(h.substring(2, 4), 16);\n        b = parseInt(h.substring(4, 6), 16);\n        a = (parseInt(h.substring(6, 8), 16) \/ 255).toFixed(2).replace(\/\\.?0+$\/, '');\n        result = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';\n      }\n      previewColor = input;\n    }\n\n    output.value = result;\n    preview.style.backgroundColor = previewColor || 'transparent';\n  }\n\n\n  \/\/ ============================================================\n  \/\/ \u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\n  \/\/ ============================================================\n  window.addEventListener('DOMContentLoaded', function () {\n    \/\/ \u304b\u3093\u305f\u3093\u5909\u63db\u306e\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u51e6\u7406\n    const quickInput = document.getElementById('quickInput');\n    if (quickInput) {\n      quickInput.addEventListener('input', quickConvert);\n    }\n  });\n<\/script>","protected":false},"excerpt":{"rendered":"\u30c6\u30ad\u30b9\u30c8\u5185\u306eRGB \/ RGBA\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092WEB\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\uff08HEX\uff09\u306b\u4e00\u62ec\u5909\u63db\u3002\u9006\u5909\u63db\uff08HEX \u2192 RGB\uff09\u306b\u3082\u5bfe\u5fdc\u3002","protected":false},"author":1,"featured_media":11542,"parent":173,"menu_order":33,"comment_status":"closed","ping_status":"closed","template":"templates\/page-converter.php","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,16],"tags":[],"group":[],"pg":[],"class_list":["post-10981","page","type-page","status-publish","has-post-thumbnail","category-html-css","category-tool"],"acf":[],"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/10981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=10981"}],"version-history":[{"count":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/10981\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/11542"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=10981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=10981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=10981"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=10981"},{"taxonomy":"pg","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pg?post=10981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}