Code Color Playground – Outil de création et manipulation de couleurs

Code Color Playground - Outil gratuit pour les professionnels du web et du design Expérimentez avec les couleurs et les différents formats de code couleur .container { max-width: 1200px; margin: 0 auto; } .playground { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .color-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .color-preview { width: 100%; height: 150px; border-radius: 8px; margin-bottom: 15px; transition: all 0.3s ease; } .slider-container { margin: 10px 0; } .slider-label { display: flex; justify-content: space-between; margin-bottom: 5px; } input[type="range"] { width: 100%; height: 5px; border-radius: 5px; -webkit-appearance: none; appearance: none; background: #ddd; outline: none; opacity: 0.7; transition: opacity .2s; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #3498db; cursor: pointer; } .code-output { margin-top: 15px; font-family: monospace; background: #f8f9fa; padding: 10px; border-radius: 5px; font-size: 14px; } .palette-generator { background: white; padding: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .color-palette { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; } .palette-color { width: 100px; height: 100px; border-radius: 8px; cursor: pointer; position: relative; transition: transform 0.2s; } .palette-color:hover { transform: scale(1.05); } .color-info { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: white; padding: 5px; font-size: 12px; text-align: center; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .controls { display: flex; gap: 10px; margin-top: 15px; } button { padding: 8px 15px; border: none; border-radius: 5px; background: #3498db; color: white; cursor: pointer; transition: background 0.3s; } button:hover { background: #2980b9; } .copied-tooltip { position: fixed; bottom: 20px; right: 20px; background: #2ecc71; color: white; padding: 10px 20px; border-radius: 5px; display: none; } RGB Color Mixer R 0 G 0 B 0 rgb(0, 0, 0) HSL Color Mixer Hue 0 Saturation 0% Lightness 0% hsl(0, 0%, 0%) Générateur de Palette Générer une nouvelle palette Palette harmonieuse Copié ! // RGB Mixer const redSlider = document.getElementById('redSlider'); const greenSlider = document.getElementById('greenSlider'); const blueSlider = document.getElementById('blueSlider'); const rgbPreview = document.getElementById('rgbPreview'); const rgbOutput = document.getElementById('rgbOutput'); function updateRGB() { const r = redSlider.value; const g = greenSlider.value; const b = blueSlider.value; document.getElementById('redValue').textContent = r; document.getElementById('greenValue').textContent = g; document.getElementById('blueValue').textContent = b; const color = `rgb(${r}, ${g}, ${b})`; rgbPreview.style.backgroundColor = color; rgbOutput.textContent = color; } redSlider.addEventListener('input', updateRGB); greenSlider.addEventListener('input', updateRGB); blueSlider.addEventListener('input', updateRGB); // HSL Mixer const hueSlider = document.getElementById('hueSlider'); const satSlider = document.getElementById('satSlider'); const lightSlider = document.getElementById('lightSlider'); const hslPreview = document.getElementById('hslPreview'); const hslOutput = document.getElementById('hslOutput'); function updateHSL() { const h = hueSlider.value; const s = satSlider.value; const l = lightSlider.value; document.getElementById('hueValue').textContent = h; document.getElementById('satValue').textContent = s + '%'; document.getElementById('lightValue').textContent = l + '%'; const color = `hsl(${h}, ${s}%, ${l}%)`; hslPreview.style.backgroundColor = color; hslOutput.textContent = color; } hueSlider.addEventListener('input', updateHSL); satSlider.addEventListener('input', updateHSL); lightSlider.addEventListener('input', updateHSL); // Color Palette Generator function generateRandomColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return [r, g, b]; } function rgbToHex(r, g, b) { return '#' + [r, g, b].map(x => { const hex = x.toString(16); return hex.length === 1 ? '0' + hex : hex; }).join(''); } function generatePalette() { const palette = document.getElementById('colorPalette'); palette.innerHTML = ''; for(let i = 0; i < 5; i++) { const [r, g, b] = generateRandomColor(); const hex = rgbToHex(r, g, b); const colorDiv = document.createElement('div'); colorDiv.className = 'palette-color'; colorDiv.style.backgroundColor = hex; const colorInfo = document.createElement('div'); colorInfo.className = 'color-info'; colorInfo.textContent = hex; colorDiv.appendChild(colorInfo); colorDiv.addEventListener('click', () => copyToClipboard(hex)); palette.appendChild(colorDiv); } } function generateHarmonious() { const palette = document.getElementById('colorPalette'); palette.innerHTML = ''; const baseHue = Math.floor(Math.random() * 360); const hueStep = 360 / 5; for(let i = 0; i < 5; i++) { const hue = (baseHue + i * hueStep) % 360; const sat = 70 + Math.random() * 30; const light = 40 + Math.random() * 20; const color = `hsl(${hue}, ${sat}%, ${light}%)`; const colorDiv = document.createElement('div'); colorDiv.className = 'palette-color'; colorDiv.style.backgroundColor = color; const colorInfo = document.createElement('div'); colorInfo.className = 'color-info'; colorInfo.textContent = color; colorDiv.appendChild(colorInfo); colorDiv.addEventListener('click', () => copyToClipboard(color)); palette.appendChild(colorDiv); } } function copyToClipboard(text) { navigator.clipboard.writeText(text).then(() => { const tooltip = document.getElementById('copiedTooltip'); tooltip.style.display = 'block'; setTimeout(() => { tooltip.style.display = 'none'; }, 2000); }); } // Initial generation generatePalette(); updateRGB(); updateHSL();