{"id":4464,"date":"2025-05-24T13:07:44","date_gmt":"2025-05-24T13:07:44","guid":{"rendered":"https:\/\/ingenio.vip\/?post_type=tools-pages&#038;p=4464"},"modified":"2025-05-24T13:07:49","modified_gmt":"2025-05-24T13:07:49","slug":"hex-to-rgb-color-converter","status":"publish","type":"tools-pages","link":"https:\/\/ingenio.vip\/zh\/tools-pages\/hex-to-rgb-color-converter\/","title":{"rendered":"Hex to RGB Color Converter"},"content":{"rendered":"<div class=\"color-converter-tool\">\r\n    <div class=\"tool-header\">\r\n        <h1><span class=\"dashicons dashicons-art\"><\/span> Hex to RGB Color Converter<\/h1>\r\n        <p>Convert hexadecimal color codes to RGB values with live color preview.<\/p>\r\n    <\/div>\r\n    \r\n    <div class=\"tool-container\">\r\n        <div class=\"converter-section\">\r\n            <div class=\"input-group\">\r\n                <div class=\"input-field\">\r\n                    <label for=\"hex-input\">Hex Color:<\/label>\r\n                    <div class=\"input-with-preview\">\r\n                        <input type=\"text\" id=\"hex-input\" placeholder=\"#RRGGBB or RRGGBB\" maxlength=\"7\">\r\n                        <div class=\"color-preview\" id=\"hex-preview\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"conversion-arrow\">\r\n                    <span class=\"dashicons dashicons-arrow-right-alt\"><\/span>\r\n                <\/div>\r\n                \r\n                <div class=\"output-field\">\r\n                    <label for=\"rgb-output\">RGB Color:<\/label>\r\n                    <div class=\"input-with-preview\">\r\n                        <input type=\"text\" id=\"rgb-output\" readonly>\r\n                        <div class=\"color-preview\" id=\"rgb-preview\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"color-details\">\r\n                <div class=\"detail-card\">\r\n                    <h3><span class=\"dashicons dashicons-info\"><\/span> Color Information<\/h3>\r\n                    <div class=\"detail-content\">\r\n                        <div class=\"detail-row\">\r\n                            <span class=\"detail-label\">Hex:<\/span>\r\n                            <span class=\"detail-value\" id=\"hex-value\">#------<\/span>\r\n                        <\/div>\r\n                        <div class=\"detail-row\">\r\n                            <span class=\"detail-label\">RGB:<\/span>\r\n                            <span class=\"detail-value\" id=\"rgb-value\">rgb(---, ---, ---)<\/span>\r\n                        <\/div>\r\n                        <div class=\"detail-row\">\r\n                            <span class=\"detail-label\">CSS:<\/span>\r\n                            <span class=\"detail-value\" id=\"css-value\">background-color: #------;<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"color-schemes\">\r\n                    <h3><span class=\"dashicons dashicons-admin-customizer\"><\/span> Color Schemes<\/h3>\r\n                    <div class=\"schemes-grid\">\r\n                        <div class=\"scheme-card\" data-scheme=\"complementary\">\r\n                            <div class=\"scheme-preview\" id=\"complementary-preview\"><\/div>\r\n                            <div class=\"scheme-name\">Complementary<\/div>\r\n                        <\/div>\r\n                        <div class=\"scheme-card\" data-scheme=\"analogous\">\r\n                            <div class=\"scheme-preview\" id=\"analogous-preview\"><\/div>\r\n                            <div class=\"scheme-name\">Analogous<\/div>\r\n                        <\/div>\r\n                        <div class=\"scheme-card\" data-scheme=\"triadic\">\r\n                            <div class=\"scheme-preview\" id=\"triadic-preview\"><\/div>\r\n                            <div class=\"scheme-name\">Triadic<\/div>\r\n                        <\/div>\r\n                        <div class=\"scheme-card\" data-scheme=\"monochromatic\">\r\n                            <div class=\"scheme-preview\" id=\"monochromatic-preview\"><\/div>\r\n                            <div class=\"scheme-name\">Monochromatic<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"color-palettes\">\r\n            <h3><span class=\"dashicons dashicons-palmtree\"><\/span> Popular Color Palettes<\/h3>\r\n            <div class=\"palettes-grid\">\r\n                <div class=\"palette-card\" data-colors=\"#4285F4,#34A853,#FBBC05,#EA4335\">\r\n                    <div class=\"palette-colors\">\r\n                        <div class=\"palette-color\" style=\"background-color: #4285F4;\"><\/div>\r\n                        <div class=\"palette-color\" style=\"background-color: #34A853;\"><\/div>\r\n                        <div class=\"palette-color\" style=\"background-color: #FBBC05;\"><\/div>\r\n                        <div class=\"palette-color\" style=\"background-color: #EA4335;\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"palette-name\">Google Colors<\/div>\r\n                <\/div>\r\n                <div class=\"palette-card\" data-colors=\"#1DA1F2,#14171A,#657786,#AAB8C2,#E1E8ED,#F5F8FA\">\r\n                    <div class=\"palette-colors\">\r\n                        <div class=\"palette-color\" style=\"background-color: #1DA1F2;\"><\/div>\r\n                        <div class=\"palette-color\" style=\"background-color: #14171A;\"><\/div>\r\n                        <div class=\"palette-color\" style=\"background-color: #657786;\"><\/div>\r\n                        <div class=\"palette-color\" style=\"background-color: #AAB8C2;\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"palette-name\">Twitter Colors<\/div>\r\n                <\/div>\r\n                <div class=\"palette-card\" data-colors=\"#3B5998,#8B9DC3,#DFE3EE,#F7F7F7,#FFFFFF\">\r\n                    <div class=\"palette-colors\">\r\n                        <div class=\"palette-color\" style=\"background-color: #3B5998;\"><\/div>\r\n                        <div class=\"palette-color\" style=\"background-color: #8B9DC3;\"><\/div>\r\n                        <div class=\"palette-color\" style=\"background-color: #DFE3EE;\"><\/div>\r\n                        <div class=\"palette-color\" style=\"background-color: #F7F7F7;\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"palette-name\">Facebook Colors<\/div>\r\n                <\/div>\r\n                <div class=\"palette-card\" data-colors=\"#FF0000,#282828,#FFFFFF\">\r\n                    <div class=\"palette-colors\">\r\n                        <div class=\"palette-color\" style=\"background-color: #FF0000;\"><\/div>\r\n                        <div class=\"palette-color\" style=\"background-color: #282828;\"><\/div>\r\n                        <div class=\"palette-color\" style=\"background-color: #FFFFFF;\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"palette-name\">YouTube Colors<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"tool-footer\">\r\n        <p>\u00a9 2026 AtoZ Design Tools | Hex to RGB Converter<\/p>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .color-converter-tool {\r\n        max-width: 1000px;\r\n        margin: 0 auto;\r\n        padding: 20px;\r\n        background: #f5f5f5;\r\n        border-radius: 8px;\r\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n    }\r\n    \r\n    .tool-header {\r\n        text-align: center;\r\n        margin-bottom: 30px;\r\n    }\r\n    \r\n    .tool-header h1 {\r\n        color: #23282d;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n    }\r\n    \r\n    .tool-header p {\r\n        color: #666;\r\n        font-size: 16px;\r\n    }\r\n    \r\n    .input-group {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 20px;\r\n        margin-bottom: 30px;\r\n    }\r\n    \r\n    .input-field, .output-field {\r\n        flex: 1;\r\n    }\r\n    \r\n    label {\r\n        display: block;\r\n        margin-bottom: 8px;\r\n        font-weight: 600;\r\n        color: #555;\r\n    }\r\n    \r\n    .input-with-preview {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    \r\n    input[type=\"text\"] {\r\n        flex: 1;\r\n        padding: 12px 15px;\r\n        border: 1px solid #ddd;\r\n        border-radius: 4px;\r\n        font-size: 16px;\r\n    }\r\n    \r\n    #rgb-output {\r\n        background-color: #f0f0f0;\r\n        cursor: not-allowed;\r\n    }\r\n    \r\n    .color-preview {\r\n        width: 50px;\r\n        height: 50px;\r\n        border-radius: 4px;\r\n        border: 1px solid #ddd;\r\n        background-color: #fff;\r\n    }\r\n    \r\n    .conversion-arrow .dashicons {\r\n        font-size: 32px;\r\n        color: #666;\r\n    }\r\n    \r\n    .color-details {\r\n        display: flex;\r\n        gap: 20px;\r\n        margin-bottom: 30px;\r\n    }\r\n    \r\n    .detail-card, .color-schemes {\r\n        flex: 1;\r\n        background: white;\r\n        border-radius: 8px;\r\n        padding: 20px;\r\n        box-shadow: 0 2px 5px rgba(0,0,0,0.05);\r\n    }\r\n    \r\n    .detail-card h3, .color-schemes h3, .color-palettes h3 {\r\n        margin-top: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        color: #23282d;\r\n    }\r\n    \r\n    .detail-row {\r\n        display: flex;\r\n        margin-bottom: 10px;\r\n    }\r\n    \r\n    .detail-label {\r\n        font-weight: 600;\r\n        width: 80px;\r\n        color: #555;\r\n    }\r\n    \r\n    .detail-value {\r\n        flex: 1;\r\n        font-family: monospace;\r\n    }\r\n    \r\n    .schemes-grid, .palettes-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(4, 1fr);\r\n        gap: 15px;\r\n        margin-top: 15px;\r\n    }\r\n    \r\n    .scheme-card, .palette-card {\r\n        cursor: pointer;\r\n        transition: transform 0.2s;\r\n    }\r\n    \r\n    .scheme-card:hover, .palette-card:hover {\r\n        transform: translateY(-3px);\r\n    }\r\n    \r\n    .scheme-preview {\r\n        height: 60px;\r\n        border-radius: 4px;\r\n        margin-bottom: 8px;\r\n    }\r\n    \r\n    .scheme-name {\r\n        text-align: center;\r\n        font-size: 14px;\r\n        color: #555;\r\n    }\r\n    \r\n    .color-palettes {\r\n        background: white;\r\n        border-radius: 8px;\r\n        padding: 20px;\r\n        box-shadow: 0 2px 5px rgba(0,0,0,0.05);\r\n    }\r\n    \r\n    .palette-colors {\r\n        display: flex;\r\n        height: 60px;\r\n        border-radius: 4px;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .palette-color {\r\n        flex: 1;\r\n    }\r\n    \r\n    .palette-name {\r\n        text-align: center;\r\n        margin-top: 8px;\r\n        font-size: 14px;\r\n        color: #555;\r\n    }\r\n    \r\n    .tool-footer {\r\n        text-align: center;\r\n        margin-top: 30px;\r\n        color: #666;\r\n        font-size: 14px;\r\n    }\r\n    \r\n    @media (max-width: 768px) {\r\n        .input-group {\r\n            flex-direction: column;\r\n        }\r\n        \r\n        .color-details {\r\n            flex-direction: column;\r\n        }\r\n        \r\n        .schemes-grid, .palettes-grid {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const hexInput = document.getElementById('hex-input');\r\n    const rgbOutput = document.getElementById('rgb-output');\r\n    const hexPreview = document.getElementById('hex-preview');\r\n    const rgbPreview = document.getElementById('rgb-preview');\r\n    const hexValue = document.getElementById('hex-value');\r\n    const rgbValue = document.getElementById('rgb-value');\r\n    const cssValue = document.getElementById('css-value');\r\n    \r\n    \/\/ Color scheme preview elements\r\n    const complementaryPreview = document.getElementById('complementary-preview');\r\n    const analogousPreview = document.getElementById('analogous-preview');\r\n    const triadicPreview = document.getElementById('triadic-preview');\r\n    const monochromaticPreview = document.getElementById('monochromatic-preview');\r\n    \r\n    \/\/ Popular color palettes\r\n    const paletteCards = document.querySelectorAll('.palette-card');\r\n    \r\n    \/\/ Default color\r\n    const defaultColor = '#4285F4';\r\n    hexInput.value = defaultColor.replace('#', '');\r\n    updateColorPreview(defaultColor);\r\n    \r\n    \/\/ Event listeners\r\n    hexInput.addEventListener('input', function() {\r\n        let hex = this.value.trim();\r\n        if (hex.charAt(0) === '#') {\r\n            hex = hex.substr(1);\r\n        }\r\n        \r\n        if (hex.length === 3 || hex.length === 6) {\r\n            const fullHex = hex.length === 3 ? \r\n                hex.split('').map(c => c + c).join('') : hex;\r\n            \r\n            if (\/^[0-9A-Fa-f]{6}$\/.test(fullHex)) {\r\n                const color = `#${fullHex}`;\r\n                updateColorPreview(color);\r\n            }\r\n        }\r\n    });\r\n    \r\n    \/\/ Color scheme click handlers\r\n    document.querySelectorAll('.scheme-card').forEach(card => {\r\n        card.addEventListener('click', function() {\r\n            const scheme = this.dataset.scheme;\r\n            applyColorScheme(scheme);\r\n        });\r\n    });\r\n    \r\n    \/\/ Palette click handlers\r\n    paletteCards.forEach(card => {\r\n        card.addEventListener('click', function() {\r\n            const colors = this.dataset.colors.split(',');\r\n            applyColorPalette(colors);\r\n        });\r\n    });\r\n    \r\n    \/\/ Copy RGB value on click\r\n    rgbOutput.addEventListener('click', function() {\r\n        this.select();\r\n        document.execCommand('copy');\r\n        \r\n        \/\/ Show toast notification\r\n        const toast = document.createElement('div');\r\n        toast.textContent = 'RGB value copied to clipboard!';\r\n        toast.style.position = 'fixed';\r\n        toast.style.bottom = '20px';\r\n        toast.style.right = '20px';\r\n        toast.style.padding = '10px 20px';\r\n        toast.style.background = '#23282d';\r\n        toast.style.color = 'white';\r\n        toast.style.borderRadius = '4px';\r\n        toast.style.zIndex = '1000';\r\n        document.body.appendChild(toast);\r\n        \r\n        setTimeout(() => {\r\n            document.body.removeChild(toast);\r\n        }, 2000);\r\n    });\r\n    \r\n    \/\/ Functions\r\n    function updateColorPreview(hexColor) {\r\n        \/\/ Update hex preview\r\n        hexPreview.style.backgroundColor = hexColor;\r\n        \r\n        \/\/ Convert to RGB\r\n        const rgb = hexToRgb(hexColor);\r\n        \r\n        if (rgb) {\r\n            const rgbString = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\r\n            \r\n            \/\/ Update RGB preview and output\r\n            rgbPreview.style.backgroundColor = rgbString;\r\n            rgbOutput.value = rgbString;\r\n            \r\n            \/\/ Update color information\r\n            hexValue.textContent = hexColor.toUpperCase();\r\n            rgbValue.textContent = rgbString;\r\n            cssValue.textContent = `background-color: ${hexColor.toUpperCase()};`;\r\n            \r\n            \/\/ Update color schemes\r\n            updateColorSchemes(hexColor);\r\n        }\r\n    }\r\n    \r\n    function hexToRgb(hex) {\r\n        \/\/ Remove # if present\r\n        hex = hex.replace('#', '');\r\n        \r\n        \/\/ Convert 3-digit hex to 6-digits\r\n        if (hex.length === 3) {\r\n            hex = hex.split('').map(c => c + c).join('');\r\n        }\r\n        \r\n        \/\/ Parse hex to RGB\r\n        const result = \/^([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\r\n        return result ? {\r\n            r: parseInt(result[1], 16),\r\n            g: parseInt(result[2], 16),\r\n            b: parseInt(result[3], 16)\r\n        } : null;\r\n    }\r\n    \r\n    function updateColorSchemes(baseColor) {\r\n        const baseRgb = hexToRgb(baseColor);\r\n        \r\n        if (!baseRgb) return;\r\n        \r\n        \/\/ Complementary color (180\u00b0 rotation)\r\n        const complementary = hslToRgb((rgbToHsl(baseRgb.r, baseRgb.g, baseRgb.b)[0] + 0.5) % 1, 1, 0.5);\r\n        complementaryPreview.style.background = `rgb(${complementary.r}, ${complementary.g}, ${complementary.b})`;\r\n        \r\n        \/\/ Analogous colors (30\u00b0 and -30\u00b0)\r\n        const analogous1 = hslToRgb((rgbToHsl(baseRgb.r, baseRgb.g, baseRgb.b)[0] + 0.083) % 1, 1, 0.5);\r\n        const analogous2 = hslToRgb((rgbToHsl(baseRgb.r, baseRgb.g, baseRgb.b)[0] - 0.083) % 1, 1, 0.5);\r\n        analogousPreview.style.background = `\r\n            linear-gradient(to right, \r\n                rgb(${analogous2.r}, ${analogous2.g}, ${analogous2.b}), \r\n                ${baseColor}, \r\n                rgb(${analogous1.r}, ${analogous1.g}, ${analogous1.b})\r\n            )`;\r\n        \r\n        \/\/ Triadic colors (120\u00b0 and -120\u00b0)\r\n        const triadic1 = hslToRgb((rgbToHsl(baseRgb.r, baseRgb.g, baseRgb.b)[0] + 0.333) % 1, 1, 0.5);\r\n        const triadic2 = hslToRgb((rgbToHsl(baseRgb.r, baseRgb.g, baseRgb.b)[0] - 0.333) % 1, 1, 0.5);\r\n        triadicPreview.style.background = `\r\n            linear-gradient(to right, \r\n                rgb(${triadic2.r}, ${triadic2.g}, ${triadic2.b}), \r\n                ${baseColor}, \r\n                rgb(${triadic1.r}, ${triadic1.g}, ${triadic1.b})\r\n            )`;\r\n        \r\n        \/\/ Monochromatic colors (different lightness)\r\n        const mono1 = hslToRgb(rgbToHsl(baseRgb.r, baseRgb.g, baseRgb.b)[0], 1, 0.2);\r\n        const mono2 = hslToRgb(rgbToHsl(baseRgb.r, baseRgb.g, baseRgb.b)[0], 1, 0.4);\r\n        const mono3 = hslToRgb(rgbToHsl(baseRgb.r, baseRgb.g, baseRgb.b)[0], 1, 0.6);\r\n        const mono4 = hslToRgb(rgbToHsl(baseRgb.r, baseRgb.g, baseRgb.b)[0], 1, 0.8);\r\n        monochromaticPreview.style.background = `\r\n            linear-gradient(to right, \r\n                rgb(${mono1.r}, ${mono1.g}, ${mono1.b}), \r\n                rgb(${mono2.r}, ${mono2.g}, ${mono2.b}), \r\n                rgb(${mono3.r}, ${mono3.g}, ${mono3.b}), \r\n                rgb(${mono4.r}, ${mono4.g}, ${mono4.b})\r\n            )`;\r\n    }\r\n    \r\n    function applyColorScheme(scheme) {\r\n        let color;\r\n        \r\n        switch(scheme) {\r\n            case 'complementary':\r\n                color = complementaryPreview.style.backgroundColor;\r\n                break;\r\n            case 'analogous':\r\n                \/\/ Get the middle color from the analogous gradient\r\n                color = hexInput.value;\r\n                break;\r\n            case 'triadic':\r\n                \/\/ Get the middle color from the triadic gradient\r\n                color = hexInput.value;\r\n                break;\r\n            case 'monochromatic':\r\n                \/\/ Get the third color from the monochromatic gradient\r\n                const monoColors = monochromaticPreview.style.background.match(\/rgb$\\d+, \\d+, \\d+$\/g);\r\n                if (monoColors && monoColors.length >= 3) {\r\n                    color = monoColors[2];\r\n                }\r\n                break;\r\n        }\r\n        \r\n        if (color) {\r\n            if (color.startsWith('rgb')) {\r\n                \/\/ Convert RGB to hex\r\n                const rgb = color.match(\/\\d+\/g);\r\n                if (rgb && rgb.length === 3) {\r\n                    const hex = rgbToHex(parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2]));\r\n                    hexInput.value = hex.replace('#', '');\r\n                    updateColorPreview(hex);\r\n                }\r\n            } else {\r\n                hexInput.value = color.replace('#', '');\r\n                updateColorPreview(color);\r\n            }\r\n        }\r\n    }\r\n    \r\n    function applyColorPalette(colors) {\r\n        if (colors && colors.length > 0) {\r\n            const firstColor = colors[0];\r\n            hexInput.value = firstColor.replace('#', '');\r\n            updateColorPreview(firstColor);\r\n        }\r\n    }\r\n    \r\n    \/\/ Color conversion helpers\r\n    function rgbToHex(r, g, b) {\r\n        return '#' + [r, g, b].map(x => {\r\n            const hex = x.toString(16);\r\n            return hex.length === 1 ? '0' + hex : hex;\r\n        }).join('');\r\n    }\r\n    \r\n    function rgbToHsl(r, g, b) {\r\n        r \/= 255, g \/= 255, b \/= 255;\r\n        const max = Math.max(r, g, b), min = Math.min(r, g, b);\r\n        let h, s, l = (max + min) \/ 2;\r\n        \r\n        if (max === min) {\r\n            h = s = 0; \/\/ achromatic\r\n        } else {\r\n            const d = max - min;\r\n            s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\r\n            switch(max) {\r\n                case r: h = (g - b) \/ d + (g < b ? 6 : 0); break;\r\n                case g: h = (b - r) \/ d + 2; break;\r\n                case b: h = (r - g) \/ d + 4; break;\r\n            }\r\n            h \/= 6;\r\n        }\r\n        \r\n        return [h, s, l];\r\n    }\r\n    \r\n    function hslToRgb(h, s, l) {\r\n        let r, g, b;\r\n        \r\n        if (s === 0) {\r\n            r = g = b = l; \/\/ achromatic\r\n        } else {\r\n            const hue2rgb = (p, q, t) => {\r\n                if (t < 0) t += 1;\r\n                if (t > 1) t -= 1;\r\n                if (t < 1\/6) return p + (q - p) * 6 * t;\r\n                if (t < 1\/2) return q;\r\n                if (t < 2\/3) return p + (q - p) * (2\/3 - t) * 6;\r\n                return p;\r\n            };\r\n            \r\n            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\r\n            const p = 2 * l - q;\r\n            r = hue2rgb(p, q, h + 1\/3);\r\n            g = hue2rgb(p, q, h);\r\n            b = hue2rgb(p, q, h - 1\/3);\r\n        }\r\n        \r\n        return {\r\n            r: Math.round(r * 255),\r\n            g: Math.round(g * 255),\r\n            b: Math.round(b * 255)\r\n        };\r\n    }\r\n});\r\n<\/script>\n\n\n\n<p><a href=\"https:\/\/ingenio.vip\/wp-admin\/admin.php?page=ingenio-tools-hex-to-rgb-color-converter\"><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Hex to RGB Color Converter Convert hexadecimal color codes to RGB values with live color preview. Hex Color: RGB Color: Color Information Hex: #&#8212;&#8212; RGB: rgb(&#8212;, &#8212;, &#8212;) CSS: background-color: #&#8212;&#8212;; Color Schemes Complementary Analogous Triadic Monochromatic Popular Color Palettes Google Colors Twitter Colors Facebook Colors YouTube Colors \u00a9 2026 AtoZ Design Tools | Hex [&hellip;]<\/p>\n<\/p><div class=\"more-link\"><a href=\"https:\/\/ingenio.vip\/zh\/tools-pages\/hex-to-rgb-color-converter\/\" class=\"btn btn-small btn--dark btn-hover-shadow\"><span class=\"text\">Continue Reading<\/span><i class=\"seoicon-right-arrow\"><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"elementor_header_footer","meta":{"_acf_changed":false,"googlesitekit_rrm_CAowrpbbCw:productID":"","footnotes":""},"tools-categories":[],"class_list":["post-4464","tools-pages","type-tools-pages","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages"}],"about":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/types\/tools-pages"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4464\/revisions"}],"predecessor-version":[{"id":4465,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4464\/revisions\/4465"}],"wp:attachment":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/media?parent=4464"}],"wp:term":[{"taxonomy":"tools-categories","embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-categories?post=4464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}