Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Adobe Spectrum - ColorPicker
Getting started
Adobe Spectrum
Spectrum UI
Pro
Components
Autocomplete
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Group
Color Area
Color Field
Color Picker
Color Slider
Color Swatch
Color Swatch Picker
Color Wheel
Combo Box
Date Field
Date Picker
Date Range Picker
Dialog
Disclosure
Disclosure Group
Drop Zone
File Trigger
Form
Grid List
Group
Link
List Box
Menu
Meter
Modal
Number Field
Popover
Progress Bar
Radio Group
Range Calendar
Search Field
Select
Slider
Switch
Table
Tabs
Tag Group
Text Field
Time Field
Toast
Toggle Button
Toggle Button Group
Toolbar
Tooltip
Tree
Virtualizer
Advanced
React Aria Components
Styling
</div> <div class="color-swatch-item" style="background-color: #f80;" onclick="selectSwatch(this, '#f80')"></div> <div class="color-swatch-item" style="background-color: #080;" onclick="selectSwatch(this, '#080')"></div> <div class="color-swatch-item" style="background-color: #08f;" onclick="selectSwatch(this, '#08f')"></div> <div class="color-swatch-item" style="background-color: #008;" onclick="selectSwatch(this, '#008')"></div> </div> </div> </div> </div> <h3>Eye Dropper</h3> <div class="example-section"> <div style="position: relative; display: inline-block;"> <button class="color-picker" onclick="toggleColorPicker(this)"> <div class="color-swatch" style="background-color: #345;"></div> <span>Color</span> </button> <div class="color-picker-dialog"> <div class="color-area" style="background: linear-gradient(to right, white, #345), linear-gradient(to bottom, transparent, black);"> <div class="color-area-thumb" style="left: 20%; top: 60%;"></div> </div> <div class="color-slider" style="background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);"> <div class="color-slider-thumb" style="left: 70%;"></div> </div> <button class="eyedropper-button" onclick="openEyeDropper(this)" id="eyeDropperBtn"> <svg width="16" height="16" viewBox="0 0 16 16"> <path d="M13.5 2.5L10 6l-1-1 3.5-3.5c.3-.3.7-.3 1 0s.3.7 0 1zM9 7l1 1-6 6H2v-2l6-6z" fill="currentColor"/> </svg> </button> </div> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on GitHub, or updating this file.</p> </div> <script type="module"> function toggleColorPicker(button) { const dialog = button.nextElementSibling; const isOpen = dialog.classList.contains('open'); document.querySelectorAll('.color-picker-dialog').forEach(d => d.classList.remove('open')); if (!isOpen) { dialog.classList.add('open'); } } function updateColorFromHex(input) { const color = input.value; const swatch = input.closest('.color-picker-dialog').previousElementSibling.querySelector('.color-swatch'); swatch.style.backgroundColor = color; } function updateColorSpace(select) { const value = select.value; const sliders = select.closest('.color-picker-dialog').querySelector('.channel-sliders'); let channels = []; switch(value) { case 'rgb': channels = ['R', 'G', 'B']; break; case 'hsl': channels = ['H', 'S', 'L']; break; case 'hsb': channels = ['H', 'S', 'B']; break; } sliders.innerHTML = channels.map(channel => ` <div class="channel-slider"> <label>${channel}</label> <div class="color-slider" style="background: linear-gradient(to right, #ccc, #666);"> <div class="color-slider-thumb" style="left: 50%;"></div> </div> </div> `).join('') + ` <div class="channel-slider"> <label>A</label> <div class="color-slider" style="background: linear-gradient(to right, transparent, #666);"> <div class="color-slider-thumb" style="left: 100%;"></div> </div> </div> `; } function selectSwatch(element, color) { element.closest('.color-swatches').querySelectorAll('.color-swatch-item').forEach(item => { item.classList.remove('selected'); }); element.classList.add('selected'); const swatch = element.closest('.color-picker-dialog').previousElementSibling.querySelector('.color-swatch'); swatch.style.backgroundColor = color; } async function openEyeDropper(button) { if (!window.EyeDropper) { alert('EyeDropper API is not supported in your browser. Please use Chrome or Edge.'); return; } try { const eyeDropper = new EyeDropper(); const result = await eyeDropper.open(); const swatch = button.closest('.color-picker-dialog').previousElementSibling.querySelector('.color-swatch'); swatch.style.backgroundColor = result.sRGBHex; const hexInput = button.closest('.color-picker-dialog').querySelector('input[type="text"]'); if (hexInput) { hexInput.value = result.sRGBHex; } } catch (error) { console.log('User cancelled eye dropper'); } } document.addEventListener('click', (e) => { if (!e.target.closest('.color-picker') && !e.target.closest('.color-picker-dialog')) { document.querySelectorAll('.color-picker-dialog').forEach(d => d.classList.remove('open')); } }); if (!window.EyeDropper) { document.getElementById('eyeDropperBtn').disabled = true; document.getElementById('eyeDropperBtn').title = 'EyeDropper API not supported'; } window.toggleColorPicker = toggleColorPicker; window.updateColorFromHex = updateColorFromHex; window.updateColorSpace = updateColorSpace; window.selectSwatch = selectSwatch; window.openEyeDropper = openEyeDropper; </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">