create color picker using javascript

 <div class="container">
        <div class="header">
            <h1>🎨 Color Picker</h1>
            <p>Choose, customize, and copy your perfect color</p>
        </div>

        <div class="content">
            <div class="color-display">
                <div class="color-preview" id="colorPreview"></div>
                
                <div class="color-info">
                    <div class="color-code">
                        <span id="hexCode">#FF0000</span>
                        <button class="copy-btn" onclick="copyToClipboard('hex')">Copy</button>
                    </div>
                    <div class="color-code">
                        <span id="rgbCode">rgb(255, 0, 0)</span>
                        <button class="copy-btn" onclick="copyToClipboard('rgb')">Copy</button>
                    </div>
                    <div class="color-code">
                        <span id="hslCode">hsl(0, 100%, 50%)</span>
                        <button class="copy-btn" onclick="copyToClipboard('hsl')">Copy</button>
                    </div>
                </div>

                <div class="section-title" style="margin-top: 20px;">Preset Colors</div>
                <div class="preset-colors" id="presetColors"></div>
            </div>

            <div class="controls">
                <div class="control-group">
                    <div class="section-title">Native Color Picker</div>
                    <input type="color" class="color-picker-input" id="colorPicker" value="#ff0000">
                </div>

                <div class="control-group">
                    <div class="control-label">
                        <span>Red</span>
                        <span class="control-value" id="redValue">255</span>
                    </div>
                    <div class="slider-container">
                        <input type="range" id="redSlider" min="0" max="255" value="255">
                    </div>
                </div>

                <div class="control-group">
                    <div class="control-label">
                        <span>Green</span>
                        <span class="control-value" id="greenValue">0</span>
                    </div>
                    <div class="slider-container">
                        <input type="range" id="greenSlider" min="0" max="255" value="0">
                    </div>
                </div>

                <div class="control-group">
                    <div class="control-label">
                        <span>Blue</span>
                        <span class="control-value" id="blueValue">0</span>
                    </div>
                    <div class="slider-container">
                        <input type="range" id="blueSlider" min="0" max="255" value="0">
                    </div>
                </div>

                <button class="random-btn" onclick="randomColor()">🎲 Random Color</button>
            </div>
        </div>
    </div>
  

   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #00c853 0%, #b2ff59 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 900px;
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #00c853 0%, #b2ff59 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .header p {
            font-size: 14px;
            opacity: 0.9;
        }

        .content {
            padding: 40px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        @media (max-width: 768px) {
            .content {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }

        .color-display {
            background: #f8f9fa;
            border-radius: 16px;
            padding: 24px;
            text-align: center;
        }

        .color-preview {
            width: 100%;
            height: 200px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            transition: all 0.3s;
            border: 4px solid white;
        }

        .color-info {
            background: white;
            border-radius: 12px;
            padding: 20px;
        }

        .color-code {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 12px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            font-weight: 600;
        }

        .color-code span {
            color: #2d3748;
        }

        .copy-btn {
            background: linear-gradient(135deg, #00c853 0%, #b2ff59 100%);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .copy-btn:hover {
            transform: scale(1.05);
        }

        .copy-btn:active {
            transform: scale(0.95);
        }

        .controls {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .control-group {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
        }

        .control-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-weight: 600;
            color: #2d3748;
            font-size: 14px;
        }

        .control-value {
            background: white;
            padding: 4px 12px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            color: #00c853;
        }

        .slider-container {
            position: relative;
        }

        input[type="range"] {
            width: 100%;
            height: 8px;
            border-radius: 5px;
            outline: none;
            -webkit-appearance: none;
            cursor: pointer;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: white;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            border: 3px solid #00c853;
        }

        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: white;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            border: 3px solid #00c853;
        }

        #redSlider {
            background: linear-gradient(to right, #000 0%, #ff0000 100%);
        }

        #greenSlider {
            background: linear-gradient(to right, #000 0%, #00ff00 100%);
        }

        #blueSlider {
            background: linear-gradient(to right, #000 0%, #0000ff 100%);
        }

        .color-picker-input {
            width: 100%;
            height: 60px;
            border: 3px solid #e9ecef;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .color-picker-input:hover {
            border-color: #00c853;
            transform: scale(1.02);
        }

        .preset-colors {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
            margin-top: 20px;
        }

        .preset-color {
            width: 100%;
            height: 40px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }

        .preset-color:hover {
            transform: scale(1.1);
            border-color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .random-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #00c853 0%, #b2ff59 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3);
        }

        .random-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 200, 83, 0.4);
        }

        .random-btn:active {
            transform: translateY(0);
        }

        .section-title {
            font-size: 14px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 12px;
        }

 const presetColorsArray = [
            '#00c853', '#b2ff59', '#76ff03', '#64dd17', '#aeea00',
            '#00e676', '#69f0ae', '#1de9b6', '#00bfa5', '#00acc1',
            '#26c6da', '#00bcd4', '#40c4ff', '#18ffff', '#b2ff59'
        ];

        const colorPreview = document.getElementById('colorPreview');
        const colorPicker = document.getElementById('colorPicker');
        const redSlider = document.getElementById('redSlider');
        const greenSlider = document.getElementById('greenSlider');
        const blueSlider = document.getElementById('blueSlider');
        const redValue = document.getElementById('redValue');
        const greenValue = document.getElementById('greenValue');
        const blueValue = document.getElementById('blueValue');
        const hexCode = document.getElementById('hexCode');
        const rgbCode = document.getElementById('rgbCode');
        const hslCode = document.getElementById('hslCode');

        function initPresetColors() {
            const container = document.getElementById('presetColors');
            presetColorsArray.forEach(color => {
                const div = document.createElement('div');
                div.className = 'preset-color';
                div.style.backgroundColor = color;
                div.onclick = () => setColorFromHex(color);
                container.appendChild(div);
            });
        }

        function updateColor() {
            const r = parseInt(redSlider.value);
            const g = parseInt(greenSlider.value);
            const b = parseInt(blueSlider.value);

            const hex = rgbToHex(r, g, b);
            const rgb = `rgb(${r}, ${g}, ${b})`;
            const hsl = rgbToHsl(r, g, b);

            colorPreview.style.backgroundColor = rgb;
            hexCode.textContent = hex;
            rgbCode.textContent = rgb;
            hslCode.textContent = hsl;

            redValue.textContent = r;
            greenValue.textContent = g;
            blueValue.textContent = b;

            colorPicker.value = hex;
        }

        function rgbToHex(r, g, b) {
            return '#' + [r, g, b].map(x => {
                const hex = x.toString(16);
                return hex.length === 1 ? '0' + hex : hex;
            }).join('').toUpperCase();
        }

        function rgbToHsl(r, g, b) {
            r /= 255;
            g /= 255;
            b /= 255;

            const max = Math.max(r, g, b);
            const min = Math.min(r, g, b);
            let h, s, l = (max + min) / 2;

            if (max === min) {
                h = s = 0;
            } else {
                const d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch (max) {
                    case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
                    case g: h = ((b - r) / d + 2) / 6; break;
                    case b: h = ((r - g) / d + 4) / 6; break;
                }
            }

            h = Math.round(h * 360);
            s = Math.round(s * 100);
            l = Math.round(l * 100);

            return `hsl(${h}, ${s}%, ${l}%)`;
        }

        function hexToRgb(hex) {
            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }

        function setColorFromHex(hex) {
            const rgb = hexToRgb(hex);
            if (rgb) {
                redSlider.value = rgb.r;
                greenSlider.value = rgb.g;
                blueSlider.value = rgb.b;
                updateColor();
            }
        }

        function randomColor() {
            redSlider.value = Math.floor(Math.random() * 256);
            greenSlider.value = Math.floor(Math.random() * 256);
            blueSlider.value = Math.floor(Math.random() * 256);
            updateColor();
        }

        function copyToClipboard(type) {
            let text = '';
            if (type === 'hex') text = hexCode.textContent;
            else if (type === 'rgb') text = rgbCode.textContent;
            else if (type === 'hsl') text = hslCode.textContent;

            navigator.clipboard.writeText(text).then(() => {
                const btn = event.target;
                const originalText = btn.textContent;
                btn.textContent = '✓ Copied!';
                setTimeout(() => {
                    btn.textContent = originalText;
                }, 1500);
            });
        }

        redSlider.addEventListener('input', updateColor);
        greenSlider.addEventListener('input', updateColor);
        blueSlider.addEventListener('input', updateColor);
        colorPicker.addEventListener('input', (e) => {
            setColorFromHex(e.target.value);
        });

        initPresetColors();
        updateColor();