{"id":12448,"date":"2026-01-06T16:28:19","date_gmt":"2026-01-06T07:28:19","guid":{"rendered":"https:\/\/rakkoserver.com\/plus\/?p=12270"},"modified":"2026-01-06T16:28:19","modified_gmt":"2026-01-06T07:28:19","slug":"tool-hsv-to-rgb","status":"publish","type":"post","link":"https:\/\/rakkokeyword.com\/techo\/tool-hsv-to-rgb\/","title":{"rendered":"HSV\u2192RGB\u5909\u63db\u30c4\u30fc\u30eb"},"content":{"rendered":"\n<div class=\"hrc_tool_container\">\n    <div class=\"hrc_link_area_tab\">\n        <div class=\"hrc_tab_container\">\n            <a href=\"https:\/\/rakkokeyword.com\/techo\/tool-rgb-to-hsv\/\" class=\"hrc_tab_item hrc_tab_link\">RGB \u21d2 HSV<\/a>\n            <span class=\"hrc_tab_item hrc_tab_active\">HSV \u21d2 RGB<\/span>\n        <\/div>\n    <\/div>\n\n    <div class=\"hrc_section hrc_input_bg\">\n        <p class=\"hrc_section_title\">HSV\uff08\u8272\u76f8\u30fb\u5f69\u5ea6\u30fb\u660e\u5ea6\uff09\u3092\u5165\u529b<\/p>\n        \n        <div class=\"hrc_input_container\">\n            <div class=\"hrc_input_row\">\n                <label>H<\/label>\n                <input type=\"range\" id=\"hrc_range_h\" min=\"0\" max=\"360\" value=\"0\" class=\"hrc_slider\">\n                <div class=\"hrc_num_wrap\">\n                    <input type=\"number\" id=\"hrc_input_h\" min=\"0\" max=\"360\" value=\"0\">\n                    <span class=\"hrc_unit\">\u00b0<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"hrc_input_row\">\n                <label>S<\/label>\n                <input type=\"range\" id=\"hrc_range_s\" min=\"0\" max=\"100\" value=\"0\" class=\"hrc_slider\">\n                <div class=\"hrc_num_wrap\">\n                    <input type=\"number\" id=\"hrc_input_s\" min=\"0\" max=\"100\" value=\"0\">\n                    <span class=\"hrc_unit\">%<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"hrc_input_row\">\n                <label>V<\/label>\n                <input type=\"range\" id=\"hrc_range_v\" min=\"0\" max=\"100\" value=\"100\" class=\"hrc_slider\">\n                <div class=\"hrc_num_wrap\">\n                    <input type=\"number\" id=\"hrc_input_v\" min=\"0\" max=\"100\" value=\"100\">\n                    <span class=\"hrc_unit\">%<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"hrc_flow_arrow\">\n        <svg width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ccc\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" \/><polyline points=\"19 12 12 19 5 12\" \/><\/svg>\n    <\/div>\n\n    <div class=\"hrc_section\">\n        <p class=\"hrc_section_title\">RGB \/ HEX \u5909\u63db\u7d50\u679c<\/p>\n        \n        <div id=\"hrc_preview_box\" class=\"hrc_preview_full\">\n            <div id=\"hrc_preview_text\">\n                <p style=\"font-size:12px;margin:0;\">Preview<\/p>\n                <p style=\"font-size:20px;font-weight:bold;margin:0;\">SAMPLE TEXT<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"hrc_hex_display\">\n            <p class=\"hrc_label_sm\">HEX (\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9)<\/p>\n            <div class=\"hrc_result_main_row\">\n                <span id=\"hrc_val_hex\" class=\"hrc_hex_text\">#FFFFFF<\/span>\n                <button type=\"button\" id=\"hrc_copy_hex\" class=\"hrc_main_btn\">HEX\u3092\u30b3\u30d4\u30fc<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"hrc_rgb_display_grid\">\n            <div class=\"hrc_rgb_item\">\n                <span class=\"hrc_rgb_label\">R<\/span>\n                <span class=\"hrc_rgb_val\" id=\"hrc_val_r\">255<\/span>\n            <\/div>\n            <div class=\"hrc_rgb_item\">\n                <span class=\"hrc_rgb_label\">G<\/span>\n                <span class=\"hrc_rgb_val\" id=\"hrc_val_g\">255<\/span>\n            <\/div>\n            <div class=\"hrc_rgb_item\">\n                <span class=\"hrc_rgb_label\">B<\/span>\n                <span class=\"hrc_rgb_val\" id=\"hrc_val_b\">255<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"hrc_css_output\">\n            <p class=\"hrc_label_sm\">CSS \/ \u30d7\u30ed\u30b0\u30e9\u30e0\u7528\u66f8\u5f0f<\/p>\n            <div class=\"hrc_flex_center\">\n                <input type=\"text\" id=\"hrc_output_css\" readonly value=\"rgb(255, 255, 255)\">\n                <button type=\"button\" id=\"hrc_copy_css\" class=\"hrc_icon_btn\" title=\"\u66f8\u5f0f\u3092\u30b3\u30d4\u30fc\">\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" \/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" \/><\/svg>\n                <\/button>\n            <\/div>\n        <\/div>\n        \n        <button type=\"button\" id=\"hrc_reset_btn\" class=\"hrc_reset_link\">\u3059\u3079\u3066\u306e\u6570\u5024\u3092\u30ea\u30bb\u30c3\u30c8<\/button>\n    <\/div>\n<\/div>\n\n<style>\n\/* Base Setup *\/\n.hrc_tool_container {\n    width: 100%;\n    max-width: 720px;\n    margin: 0 auto;\n    font-family: sans-serif;\n    color: #333;\n    text-align: center;\n}\n.hrc_tool_container * { box-sizing: border-box; }\n\n\/* --- \u30bf\u30d6\u98a8\u5207\u308a\u66ff\u3048\u30c7\u30b6\u30a4\u30f3 --- *\/\n.hrc_link_area_tab {\n    margin-bottom: 25px;\n}\n.hrc_tab_container {\n    display: flex;\n    width: 100%;\n    gap: 8px; \/* \u30bf\u30d6\u9593\u306e\u9699\u9593 *\/\n}\n.hrc_tab_item {\n    flex: 1; \/* \u7b49\u5e45\u3067\u5e83\u3052\u308b *\/\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 50px; \/* \u898b\u672c\u306b\u5408\u308f\u305b\u3066\u5c11\u3057\u9ad8\u3055\u3092\u78ba\u4fdd *\/\n    font-size: 14px;\n    font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n    \/* \u89d2\u4e38\u3092\u306a\u304f\u3057\u3066\u76f4\u89d2\u306b *\/\n    border-radius: 0; \n}\n\/* \u30ea\u30f3\u30af\u5074\u306e\u30bf\u30d6\uff08\u5de6\u5074\u30fb\u975e\u9078\u629e\u30b9\u30bf\u30a4\u30eb\uff09 *\/\na.hrc_tab_item.hrc_tab_link {\n    background-color: #f8f9fa; \/* \u8584\u3044\u30b0\u30ec\u30fc\u80cc\u666f *\/\n    color: #333;\n    border: 1px solid #ddd; \/* \u8584\u3044\u67a0\u7dda *\/\n    transition: background-color 0.2s;\n}\na.hrc_tab_item.hrc_tab_link:hover {\n    background-color: #eee;\n}\n\/* \u9078\u629e\u4e2d\u5074\u306e\u30bf\u30d6\uff08\u53f3\u5074\u30fb\u9078\u629e\u4e2d\u30b9\u30bf\u30a4\u30eb\uff09 *\/\nspan.hrc_tab_item.hrc_tab_active {\n    background-color: #13284B; \/* \u6fc3\u3044\u7d3a\u8272\u80cc\u666f *\/\n    color: #fff;\n    border: 1px solid #13284B;\n    cursor: default; \/* \u30af\u30ea\u30c3\u30af\u4e0d\u53ef *\/\n}\n\/* --------------------------- *\/\n\n\n\/* Section Design *\/\n.hrc_section { padding: 20px 0; }\n.hrc_input_bg {\n    background-color: #f8f9fa;\n    border-radius: 12px;\n    padding: 30px 20px;\n}\n.hrc_section_title {\n    font-size: 14px;\n    font-weight: bold;\n    color: #666;\n    margin: 0 0 20px 0;\n    letter-spacing: 0.05em;\n}\n\n\/* HSV Input Styles *\/\n.hrc_input_container { max-width: 500px; margin: 0 auto; }\n.hrc_input_row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 15px;\n}\n.hrc_input_row label { width: 15px; font-weight: bold; color: #13284B; font-size: 16px; }\n.hrc_slider { flex-grow: 1; height: 6px; cursor: pointer; }\n.hrc_num_wrap { display: flex; align-items: center; gap: 4px; width: 90px; }\n.hrc_num_wrap input[type=\"number\"] {\n    width: 60px;\n    height: 36px;\n    text-align: center;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    font-size: 15px;\n}\n.hrc_unit { font-size: 12px; color: #888; width: 15px; text-align: left; }\n\n\/* Flow Arrow *\/\n.hrc_flow_arrow { padding: 10px 0; }\n\n\/* Result Display *\/\n.hrc_preview_full {\n    width: 100%;\n    max-width: 450px;\n    height: 100px;\n    margin: 0 auto 25px;\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid #eee;\n}\n.hrc_label_sm { font-size: 12px; color: #888; margin-bottom: 8px; font-weight: bold; }\n.hrc_result_main_row {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 15px;\n    margin-bottom: 30px;\n}\n.hrc_hex_text { font-size: 32px; font-weight: bold; font-family: monospace; color: #000; }\n\n\/* RGB Grid *\/\n.hrc_rgb_display_grid {\n    display: flex;\n    justify-content: center;\n    gap: 30px;\n    margin-bottom: 30px;\n}\n.hrc_rgb_item { display: flex; flex-direction: column; min-width: 60px; }\n.hrc_rgb_label { font-size: 12px; color: #999; margin-bottom: 4px; }\n.hrc_rgb_val { font-size: 24px; font-weight: bold; color: #444; }\n\n\/* Buttons & UI Elements *\/\n.hrc_main_btn {\n    height: 44px;\n    padding: 0 20px;\n    background: #13284B;\n    color: #fff;\n    border: none;\n    border-radius: 6px;\n    font-weight: bold;\n    cursor: pointer;\n    font-size: 14px;\n}\n.hrc_icon_btn {\n    width: 44px;\n    height: 44px;\n    background: #fff;\n    border: 1px solid #ccc;\n    border-radius: 6px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.hrc_flex_center { display: flex; justify-content: center; gap: 8px; max-width: 320px; margin: 0 auto; }\n.hrc_flex_center input {\n    height: 44px;\n    border: 1px solid #ccc;\n    border-radius: 6px;\n    padding: 0 12px;\n    font-size: 15px;\n    width: 100%;\n    text-align: center;\n    background: #fafafa;\n}\n.hrc_reset_link {\n    background: none;\n    border: none;\n    color: #999;\n    text-decoration: underline;\n    cursor: pointer;\n    margin-top: 35px;\n    font-size: 13px;\n}\n.hrc_css_output { margin-top: 20px; padding-top: 25px; border-top: 1px dashed #eee; }\n\n\/* Responsive *\/\n@media (max-width: 500px) {\n    .hrc_rgb_display_grid { gap: 15px; }\n    .hrc_hex_text { font-size: 24px; }\n    .hrc_num_wrap { width: 75px; }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const el = {\n        hNum: document.getElementById('hrc_input_h'),\n        sNum: document.getElementById('hrc_input_s'),\n        vNum: document.getElementById('hrc_input_v'),\n        hRange: document.getElementById('hrc_range_h'),\n        sRange: document.getElementById('hrc_range_s'),\n        vRange: document.getElementById('hrc_range_v'),\n        hex: document.getElementById('hrc_val_hex'),\n        rVal: document.getElementById('hrc_val_r'),\n        gVal: document.getElementById('hrc_val_g'),\n        bVal: document.getElementById('hrc_val_b'),\n        css: document.getElementById('hrc_output_css'),\n        preview: document.getElementById('hrc_preview_box'),\n        previewText: document.getElementById('hrc_preview_text'),\n        reset: document.getElementById('hrc_reset_btn'),\n        copyHex: document.getElementById('hrc_copy_hex'),\n        copyCss: document.getElementById('hrc_copy_css')\n    };\n\n    \/\/ HSV to RGB Algorithm\n    function hsvToRgb(h, s, v) {\n        s \/= 100; v \/= 100;\n        const c = v * s;\n        const x = c * (1 - Math.abs((h \/ 60) % 2 - 1));\n        const m = v - c;\n        let r = 0, g = 0, b = 0;\n\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    function rgbToHex(r, g, b) {\n        return \"#\" + [r, g, b].map(x => {\n            const h = x.toString(16).toUpperCase();\n            return h.length === 1 ? \"0\" + h : h;\n        }).join(\"\");\n    }\n\n    function update(src) {\n        let h, s, v;\n        if (src === 'num') {\n            h = Math.min(360, Math.max(0, el.hNum.value || 0));\n            s = Math.min(100, Math.max(0, el.sNum.value || 0));\n            v = Math.min(100, Math.max(0, el.vNum.value || 0));\n            el.hRange.value = h; el.sRange.value = s; el.vRange.value = v;\n        } else {\n            h = parseInt(el.hRange.value);\n            s = parseInt(el.sRange.value);\n            v = parseInt(el.vRange.value);\n            el.hNum.value = h; el.sNum.value = s; el.vNum.value = v;\n        }\n\n        const rgb = hsvToRgb(h, s, v);\n        const hexCode = rgbToHex(rgb.r, rgb.g, rgb.b);\n\n        \/\/ UI Reflection\n        el.rVal.textContent = rgb.r;\n        el.gVal.textContent = rgb.g;\n        el.bVal.textContent = rgb.b;\n        el.hex.textContent = hexCode;\n        el.css.value = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n        \n        el.preview.style.backgroundColor = hexCode;\n        const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) \/ 255;\n        el.previewText.style.color = luminance > 0.5 ? '#000' : '#fff';\n    }\n\n    function copy(txt, btn) {\n        navigator.clipboard.writeText(txt).then(() => {\n            const original = btn.textContent;\n            if (btn.classList.contains('hrc_icon_btn')) {\n                btn.style.backgroundColor = '#d4edda';\n                setTimeout(() => btn.style.backgroundColor = '#fff', 800);\n            } else {\n                btn.textContent = '\u30b3\u30d4\u30fc\u5b8c\u4e86\uff01';\n                setTimeout(() => btn.textContent = original, 1200);\n            }\n        });\n    }\n\n    \/\/ Events\n    [el.hNum, el.sNum, el.vNum].forEach(i => i.addEventListener('input', () => update('num')));\n    [el.hRange, el.sRange, el.vRange].forEach(i => i.addEventListener('input', () => update('range')));\n    \n    el.reset.addEventListener('click', () => {\n        el.hRange.value = 0; el.sRange.value = 0; el.vRange.value = 100;\n        update('range');\n    });\n\n    el.copyHex.addEventListener('click', () => copy(el.hex.textContent, el.copyHex));\n    el.copyCss.addEventListener('click', () => copy(el.css.value, el.copyCss));\n\n    \/\/ Initialize\n    update('range');\n});\n<\/script>\n\n\n\n<p>\u3053\u306e\u30c4\u30fc\u30eb\u306f\u3001\u8272\u76f8\uff08H\uff09\u30fb\u5f69\u5ea6\uff08S\uff09\u30fb\u660e\u5ea6\uff08V\uff09\u306e\u6570\u5024\u3092\u5165\u529b\u3059\u308b\u3060\u3051\u3067\u3001WEB\u5236\u4f5c\u3084\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u5fc5\u8981\u306aRGB\u5024\u3084\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\uff08HEX\uff09\u3078\u77ac\u6642\u306b\u5909\u63db\u3067\u304d\u308b\u7121\u6599\u30c4\u30fc\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-0\">\u3053\u306e\u30c4\u30fc\u30eb\u3067\u3067\u304d\u308b\u3053\u3068<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HSV\u304b\u3089RGB\u30fbHEX\u3078\u306e\u5373\u6642\u5909\u63db<\/strong>: \u30b9\u30e9\u30a4\u30c0\u30fc\u3084\u6570\u5024\u5165\u529b\u3092\u7528\u3044\u3066\u3001HSV\u5024\u3092WEB\u6a19\u6e96\u306eRGB\u304a\u3088\u3073HEX\u5f62\u5f0f\u3078\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u5909\u63db\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u306e\u540c\u6642\u53d6\u5f97<\/strong>: \u30c7\u30b6\u30a4\u30f3\u30c4\u30fc\u30eb\u3067\u591a\u7528\u3055\u308c\u308b\u300c#\u300d\u304b\u3089\u59cb\u307e\u308b6\u6841\u306eHEX\u30b3\u30fc\u30c9\uff0816\u9032\u6570\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\uff09\u3082\u540c\u6642\u306b\u51fa\u529b\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30d7\u30ec\u30d3\u30e5\u30fc\u3068\u8996\u8a8d\u6027\u306e\u78ba\u8a8d<\/strong>: \u5909\u63db\u5f8c\u306e\u8272\u3092\u5927\u304d\u306a\u30d7\u30ec\u30d3\u30e5\u30fc\u753b\u9762\u3067\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002\u80cc\u666f\u8272\u306b\u5408\u308f\u305b\u3066\u6587\u5b57\u8272\u304c\u81ea\u52d5\u8abf\u6574\u3055\u308c\u308b\u305f\u3081\u3001\u5b9f\u969b\u306e\u8996\u8a8d\u6027\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u53ef\u80fd\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30b3\u30d4\u30fc\u6a5f\u80fd\u3067\u4f5c\u696d\u3092\u52b9\u7387\u5316<\/strong>: \u5909\u63db\u3055\u308c\u305fHEX\u30b3\u30fc\u30c9\u3084RGB\u306eCSS\u66f8\u5f0f\uff08rgb(255, 255, 255)\u306a\u3069\uff09\u3092\u30dc\u30bf\u30f3\u4e00\u3064\u3067\u30b3\u30d4\u30fc\u3057\u3001\u305d\u306e\u307e\u307e\u30b3\u30fc\u30c9\u306b\u8cbc\u308a\u4ed8\u3051\u3089\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-1\">\u3053\u306e\u30c4\u30fc\u30eb\u3067\u53d6\u5f97\u3059\u308b\u60c5\u5831\u306e\u57fa\u790e\u77e5\u8b58<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HSV\uff08\u8272\u76f8\u30fb\u5f69\u5ea6\u30fb\u660e\u5ea6\uff09<\/strong>: \u4eba\u9593\u306e\u611f\u899a\u306b\u8fd1\u3044\u8272\u306e\u8868\u73fe\u65b9\u6cd5\u3067\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><strong>H\uff08Hue\/\u8272\u76f8\uff09<\/strong>: \u8d64\u30fb\u9ec4\u30fb\u7dd1\u30fb\u9752\u3068\u3044\u3063\u305f\u300c\u8272\u306e\u7a2e\u985e\u300d\u30920\uff5e360\u5ea6\u306e\u89d2\u5ea6\u3067\u8868\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>S\uff08Saturation\/\u5f69\u5ea6\uff09<\/strong>: \u300c\u8272\u306e\u9bae\u3084\u304b\u3055\u300d\u30920\uff5e100%\u3067\u8868\u3057\u307e\u3059\u3002\u6570\u5024\u304c\u4f4e\u3044\u3068\u7121\u5f69\u8272\uff08\u7070\u8272\uff09\u306b\u8fd1\u3065\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>V\uff08Value\/\u660e\u5ea6\uff09<\/strong>: \u300c\u8272\u306e\u660e\u308b\u3055\u300d\u30920\uff5e100%\u3067\u8868\u3057\u307e\u3059\u3002\u6570\u5024\u304c\u4f4e\u3044\u3068\u9ed2\u8272\u306b\u8fd1\u3065\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>RGB\uff08\u8d64\u30fb\u7dd1\u30fb\u9752\uff09<\/strong>: \u5149\u306e\u4e09\u539f\u8272\u3067\u3042\u308bRed\u3001Green\u3001Blue\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u8868\u73fe\u65b9\u6cd5\u3067\u3059\u3002\u5404\u8272\u306f0\uff5e255\u306e\u6570\u5024\u3067\u6307\u5b9a\u3055\u308c\u3001\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u7b49\u306e\u96fb\u5b50\u6a5f\u5668\u3067\u8272\u304c\u5408\u6210\u3055\u308c\u308b\u969b\u306e\u57fa\u6e96\u3068\u306a\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>HEX\uff08\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\uff09<\/strong>: RGB\u306e\u6570\u5024\u309216\u9032\u6570\u306b\u5909\u63db\u3057\u3001\u300c#FFFFFF\u300d\u306e\u3088\u3046\u306b6\u6841\u306e\u82f1\u6570\u5b57\u3067\u8868\u8a18\u3057\u305f\u3082\u306e\u3067\u3059\u3002WEB\u30c7\u30b6\u30a4\u30f3\u306b\u304a\u3051\u308b\u6700\u3082\u4e00\u822c\u7684\u306a\u8272\u6307\u5b9a\u65b9\u6cd5\u3067\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-2\">\u3053\u306e\u30c4\u30fc\u30eb\u304c\u5f79\u7acb\u3064\u3068\u304d\u306f\u3069\u3093\u306a\u3068\u304d\uff1f<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30c7\u30b6\u30a4\u30f3\u6848\u3092WEB\u30b3\u30fc\u30c9\u306b\u843d\u3068\u3057\u8fbc\u3080\u3068\u304d<\/strong>: \u30c7\u30b6\u30a4\u30f3\u30bd\u30d5\u30c8\uff08Photoshop\u3084Figma\u306a\u3069\uff09\u3067\u8abf\u6574\u3057\u305fHSV\u5024\u3092\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306b\u5fc5\u8981\u306aRGB\u3084HEX\u5024\u306b\u5909\u63db\u3057\u305f\u3044\u5834\u5408\u306b\u6700\u9069\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u8272\u306e\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b\u3068\u304d<\/strong>: \u300c\u540c\u3058\u8272\u76f8\u3067\u660e\u308b\u3055\u3060\u3051\u3092\u5909\u3048\u305f\u8272\uff08\u30c8\u30fc\u30f3\uff09\u300d\u3092HSV\u3067\u4f5c\u6210\u3057\u3001\u305d\u306e\u6b63\u78ba\u306aRGB\u5024\u3092\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u4f7f\u7528\u3057\u305f\u3044\u3068\u304d\u306b\u4fbf\u5229\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u306e\u52d5\u7684\u306a\u8272\u6307\u5b9a<\/strong>: \u30b2\u30fc\u30e0\u958b\u767a\u3084\u52d5\u7684\u306aWEB\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30b9\u306a\u3069\u3067\u3001\u6570\u5f0f\u7684\u306b\u8272\u306e\u5909\u5316\uff08\u8679\u8272\u306e\u30eb\u30fc\u30d7\u306a\u3069\uff09\u3092\u8a08\u7b97\u3057\u3001\u6700\u7d42\u7684\u306a\u51fa\u529b\u5024\u3068\u3057\u3066RGB\u3092\u53d6\u5f97\u3057\u305f\u3044\u969b\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-3\">HSV\u3092RGB\u306b\u5909\u63db\u3059\u308b\u30e1\u30ea\u30c3\u30c8<\/h2>\n\n\n\n<p>HSV\u306f\u300c\u9bae\u3084\u304b\u3055\u3092\u534a\u5206\u306b\u3059\u308b\u300d\u300c\u660e\u308b\u3055\u3092\u5c11\u3057\u4e0a\u3052\u308b\u300d\u3068\u3044\u3063\u305f\u76f4\u611f\u7684\u306a\u64cd\u4f5c\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u30d6\u30e9\u30a6\u30b6\u3084\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u304c\u8272\u3092\u51fa\u529b\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u6700\u7d42\u7684\u306bRGB\u5f62\u5f0f\u306e\u30c7\u30fc\u30bf\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002 <br>\u3053\u306e\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u4eba\u9593\u304c\u8003\u3048\u305f\u7406\u60f3\u306e\u8272\uff08HSV\uff09\u3092\u3001\u30b7\u30b9\u30c6\u30e0\u304c\u7406\u89e3\u3067\u304d\u308b\u6b63\u78ba\u306a\u5f62\u5f0f\uff08RGB\/HEX\uff09\u3078\u3068\u30b9\u30e0\u30fc\u30ba\u306b\u6a4b\u6e21\u3057\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>RGB \u21d2 HSV HSV \u21d2 RGB HSV\uff08\u8272\u76f8\u30fb\u5f69\u5ea6\u30fb\u660e\u5ea6\uff09\u3092\u5165\u529b H \u00b0 S % V % RGB \/ HEX \u5909\u63db\u7d50\u679c Preview SAMPLE TEXT HEX (\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9) #FFFFFF HEX\u3092\u30b3 &#8230; <\/p>\n","protected":false},"author":4,"featured_media":13540,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,56],"tags":[],"class_list":{"0":"post-12448","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tool","8":"category-conversion","9":"entry"},"_links":{"self":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts\/12448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/comments?post=12448"}],"version-history":[{"count":0,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts\/12448\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/media\/13540"}],"wp:attachment":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/media?parent=12448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/categories?post=12448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/tags?post=12448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}