Interactive Color Picker - RGB, HEX and RGBA Converter

Use sliders to set Red, Green, and Blue colors and transparency (alpha channel). The tool will automatically calculate all formats you need when writing CSS code.

EXAMPLE

                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Color Picker - Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="cp-container">
        <div class="cp-preview-wrapper">
            <div id="preview" class="cp-preview"></div>
        </div>
        
        <div class="cp-controls-grid">
            <div class="cp-control">
                <div class="cp-label-wrapper">
                    <label for="r">Red (R)</label>
                    <span id="rVal" class="badge badge-r">255</span>
                </div>
                <input type="range" id="r" min="0" max="255" value="255">
            </div>
            
            <div class="cp-control">
                <div class="cp-label-wrapper">
                    <label for="g">Green (G)</label>
                    <span id="gVal" class="badge badge-g">0</span>
                </div>
                <input type="range" id="g" min="0" max="255" value="0">
            </div>
            
            <div class="cp-control">
                <div class="cp-label-wrapper">
                    <label for="b">Blue (B)</label>
                    <span id="bVal" class="badge badge-b">0</span>
                </div>
                <input type="range" id="b" min="0" max="255" value="0">
            </div>
            
            <div class="cp-control">
                <div class="cp-label-wrapper">
                    <label for="a">Opacity (Alpha)</label>
                    <span id="aVal" class="badge badge-a">1</span>
                </div>
                <input type="range" id="a" min="0" max="1" step="0.1" value="1">
            </div>
        </div>

        <div class="cp-outputs">
            <div class="cp-output-item"><strong>HEX:</strong> <span id="hexOut">#FF0000</span></div>
            <div class="cp-output-item"><strong>RGB:</strong> <span id="rgbOut">rgb(255, 0, 0)</span></div>
            <div class="cp-output-item"><strong>RGBA:</strong> <span id="rgbaOut">rgba(255, 0, 0, 1)</span></div>
        </div>
    </div>
</body>
</html>
                    

                        .cp-container {
    max-width: 450px;
    margin: 2rem auto;
    padding: 25px;
    background: var(--card, #ffffff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 14px;
    color: var(--fg, #1e1e1e);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* The wrapper creates a checkered background to display transparency */
.cp-preview-wrapper {
    width: 100%;
    height: 140px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 1px solid var(--border, #e0e0e0);
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%), 
                      linear-gradient(-45deg, #eee 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #eee 75%), 
                      linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    overflow: hidden;
}

.cp-preview {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 1);
    transition: background-color 0.1s ease;
}

.cp-controls-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 25px;
}

.cp-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-label-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cp-control label {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.9;
}

/* Styled badges for displaying current slider values */
.badge {
    font-family: 'Source Code Pro', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--bg, #f1f3f5);
}
.badge-r { color: #dc3545; background: rgba(220, 53, 69, 0.1); }
.badge-g { color: #28a745; background: rgba(40, 167, 69, 0.1); }
.badge-b { color: #007bff; background: rgba(0, 112, 243, 0.1); }
.badge-a { color: #6c757d; background: rgba(108, 117, 125, 0.1); }

.cp-control input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: var(--bg, #e9ecef);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

/* Beautiful custom slider thumb styling for Chrome/Safari/Webkit */
.cp-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent, #007bff);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.1s ease;
}
.cp-control input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* Beautiful custom slider thumb styling for Firefox */
.cp-control input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: var(--accent, #007bff);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.1s ease;
}
.cp-control input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.15);
}

.cp-outputs {
    background: var(--bg, #f8f9fa);
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid var(--border, #e0e0e0);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-output-item {
    font-family: 'Source Code Pro', monospace;
    font-size: 0.95rem;
    color: var(--fg);
    display: flex;
    justify-content: space-between;
}

.cp-output-item span {
    font-weight: 700;
    color: var(--accent, #007bff);
}

                    

                        // Wrap JavaScript inside a DOMContentLoaded event listener to safely wait for the full HTML DOM tree!
document.addEventListener("DOMContentLoaded", function() {
    const r = document.getElementById('r');
    const g = document.getElementById('g');
    const b = document.getElementById('b');
    const a = document.getElementById('a');

    const rVal = document.getElementById('rVal');
    const gVal = document.getElementById('gVal');
    const bVal = document.getElementById('bVal');
    const aVal = document.getElementById('aVal');

    const preview = document.getElementById('preview');
    const hexOut = document.getElementById('hexOut');
    const rgbOut = document.getElementById('rgbOut');
    const rgbaOut = document.getElementById('rgbaOut');

    // Safety guard check for the simulator
    if (!r || !g || !b || !a) return;

    function componentToHex(c) {
        var hex = parseInt(c).toString(16);
        return hex.length == 1 ? "0" + hex : hex;
    }

    function updateColors() {
        const rv = r.value;
        const gv = g.value;
        const bv = b.value;
        const av = a.value;

        // Update value badges next to the sliders
        if(rVal) rVal.textContent = rv;
        if(gVal) gVal.textContent = gv;
        if(bVal) bVal.textContent = bv;
        if(aVal) aVal.textContent = av;

        // Construct color string values
        const rgb = `rgb(${rv}, ${gv}, ${bv})`;
        const rgba = `rgba(${rv}, ${gv}, ${bv}, ${av})`;
        const hex = `#${componentToHex(rv)}${componentToHex(gv)}${componentToHex(bv)}`.toUpperCase();

        // Update output text and display color preview
        if(preview) preview.style.backgroundColor = rgba;
        if(hexOut) hexOut.textContent = hex;
        if(rgbOut) rgbOut.textContent = rgb;
        if(rgbaOut) rgbaOut.textContent = rgba;
    }

    // Attach input event listeners to all sliders
    [r, g, b, a].forEach(el => {
        if(el) el.addEventListener('input', updateColors);
    });

    // Run initial calculation on page load
    updateColors();
});
                    

RESULT

Interactive Color Picker - RGB, HEX and RGBA Converter

Vadnica.org

Links

Support