{"id":25,"date":"2026-03-19T14:47:10","date_gmt":"2026-03-19T14:47:10","guid":{"rendered":"https:\/\/netguide.io\/tools\/?p=25"},"modified":"2026-03-19T14:47:11","modified_gmt":"2026-03-19T14:47:11","slug":"hex-rgb-converter","status":"publish","type":"post","link":"https:\/\/netguide.io\/tools\/de\/hex-rgb-converter\/","title":{"rendered":"Hex &amp; RGB Converter"},"content":{"rendered":"\n<div class=\"wp-color-container\">\n    <h3 class=\"wp-color-title\">Color Converter (Hex &#038; RGB)<\/h3>\n\n    <div class=\"wp-color-main-grid\">\n        <div class=\"wp-color-section\">\n            <div class=\"wp-color-group\">\n                <label>Hex Code<\/label>\n                <div class=\"wp-color-input-wrapper\">\n                    <span class=\"wp-color-prefix\">#<\/span>\n                    <input type=\"text\" id=\"wp-hex-input\" placeholder=\"FFFFFF\" maxlength=\"6\" oninput=\"convertFromHex()\">\n                <\/div>\n            <\/div>\n\n            <div class=\"wp-color-group\">\n                <label>RGB Values<\/label>\n                <div class=\"wp-rgb-grid\">\n                    <div class=\"wp-rgb-item\">\n                        <span>R<\/span>\n                        <input type=\"number\" id=\"wp-r-input\" min=\"0\" max=\"255\" value=\"255\" oninput=\"convertFromRgb()\">\n                    <\/div>\n                    <div class=\"wp-rgb-item\">\n                        <span>G<\/span>\n                        <input type=\"number\" id=\"wp-g-input\" min=\"0\" max=\"255\" value=\"255\" oninput=\"convertFromRgb()\">\n                    <\/div>\n                    <div class=\"wp-rgb-item\">\n                        <span>B<\/span>\n                        <input type=\"number\" id=\"wp-b-input\" min=\"0\" max=\"255\" value=\"255\" oninput=\"convertFromRgb()\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"wp-color-preview-section\">\n            <label>Preview<\/label>\n            <div id=\"wp-color-preview\" class=\"wp-color-preview-box\" style=\"background-color: #FFFFFF;\"><\/div>\n            <div id=\"wp-color-info\" class=\"wp-color-info-text\">rgb(255, 255, 255)<\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"wp-color-results\">\n        <div class=\"wp-color-res-item\">\n            <span>CSS Format:<\/span>\n            <code id=\"wp-css-output\">rgb(255, 255, 255)<\/code>\n            <button onclick=\"copyColor('wp-css-output')\" class=\"btn-copy-tiny\">Copy<\/button>\n        <\/div>\n    <\/div>\n\n    <div class=\"wp-color-footer\">\n        <button onclick=\"clearColor()\" class=\"btn-danger\">Reset<\/button>\n    <\/div>\n\n    <style>\n        .wp-color-container { max-width: 100%; background: #fff; padding: 20px; border: 1px solid #ddd; border-radius: 10px; font-family: -apple-system, sans-serif; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }\n        .wp-color-title { margin: 0 0 15px 0; color: #2271b1; font-size: 1.4rem; border-bottom: 1px solid #eee; padding-bottom: 10px; }\n        \n        .wp-color-main-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; margin-bottom: 15px; }\n        @media (max-width: 500px) { .wp-color-main-grid { grid-template-columns: 1fr; } }\n\n        .wp-color-group { margin-bottom: 15px; }\n        .wp-color-group label { display: block; font-size: 11px; font-weight: bold; margin-bottom: 5px; text-transform: uppercase; color: #666; }\n        \n        .wp-color-input-wrapper { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; }\n        .wp-color-prefix { background: #eee; padding: 8px 12px; font-weight: bold; color: #555; border-right: 1px solid #ccc; }\n        .wp-color-input-wrapper input { border: none; padding: 8px; width: 100%; font-family: monospace; font-size: 16px; outline: none; }\n\n        .wp-rgb-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }\n        .wp-rgb-item { display: flex; flex-direction: column; align-items: center; background: #f9f9f9; padding: 5px; border-radius: 4px; border: 1px solid #eee; }\n        .wp-rgb-item span { font-size: 10px; font-weight: bold; color: #999; margin-bottom: 2px; }\n        .wp-rgb-item input { width: 100%; border: 1px solid #ccc; border-radius: 3px; padding: 4px; text-align: center; font-size: 14px; }\n\n        .wp-color-preview-box { width: 100%; height: 80px; border-radius: 8px; border: 1px solid #ddd; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 8px; transition: background 0.2s; }\n        .wp-color-info-text { font-size: 12px; font-family: monospace; text-align: center; color: #666; }\n\n        .wp-color-results { margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px; }\n        .wp-color-res-item { display: flex; align-items: center; justify-content: space-between; background: #f0f6fb; padding: 8px 12px; border-radius: 5px; font-size: 13px; }\n        .wp-color-res-item code { font-family: monospace; font-weight: bold; color: #2271b1; }\n        \n        .btn-copy-tiny { background: #46b450; color: #fff; border: none; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 10px; }\n        .btn-danger { background: #fff; color: #d63638; border: 1px solid #d63638; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: bold; }\n        .wp-color-footer { display: flex; justify-content: flex-end; margin-top: 15px; }\n    <\/style>\n\n    <script>\n        function convertFromHex() {\n            let hex = document.getElementById('wp-hex-input').value.replace('#', '');\n            if (hex.length === 3) {\n                hex = hex.split('').map(s => s + s).join('');\n            }\n            if (hex.length === 6) {\n                const r = parseInt(hex.substring(0, 2), 16);\n                const g = parseInt(hex.substring(2, 4), 16);\n                const b = parseInt(hex.substring(4, 6), 16);\n                \n                if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {\n                    document.getElementById('wp-r-input').value = r;\n                    document.getElementById('wp-g-input').value = g;\n                    document.getElementById('wp-b-input').value = b;\n                    updateUI(r, g, b, hex);\n                }\n            }\n        }\n\n        function convertFromRgb() {\n            let r = parseInt(document.getElementById('wp-r-input').value) || 0;\n            let g = parseInt(document.getElementById('wp-g-input').value) || 0;\n            let b = parseInt(document.getElementById('wp-b-input').value) || 0;\n\n            r = Math.min(255, Math.max(0, r));\n            g = Math.min(255, Math.max(0, g));\n            b = Math.min(255, Math.max(0, b));\n\n            const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n            document.getElementById('wp-hex-input').value = hex;\n            updateUI(r, g, b, hex);\n        }\n\n        function updateUI(r, g, b, hex) {\n            const rgbStr = `rgb(${r}, ${g}, ${b})`;\n            document.getElementById('wp-color-preview').style.backgroundColor = '#' + hex;\n            document.getElementById('wp-color-info').innerText = rgbStr;\n            document.getElementById('wp-css-output').innerText = rgbStr;\n        }\n\n        function copyColor(id) {\n            const text = document.getElementById(id).innerText;\n            navigator.clipboard.writeText(text).then(() => alert(\"Copied: \" + text));\n        }\n\n        function clearColor() {\n            document.getElementById('wp-hex-input').value = 'FFFFFF';\n            document.getElementById('wp-r-input').value = '255';\n            document.getElementById('wp-g-input').value = '255';\n            document.getElementById('wp-b-input').value = '255';\n            updateUI(255, 255, 255, 'FFFFFF');\n        }\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Color Converter (Hex &#038; RGB) Hex Code # RGB Values R G B Preview rgb(255, 255, 255) CSS Format: rgb(255, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[53],"tags":[55,61,59,57],"class_list":["post-25","post","type-post","status-publish","format-standard","hentry","category-converter","tag-converter","tag-farben","tag-hex","tag-rgb"],"_links":{"self":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":1,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/25\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}