const $colorPicker = document.getElementById('color-picker');
// HEX format
$colorPicker.color = '#60f542';
// OR HEX with opacity
$colorPicker.color = '#60f542ff';
// OR rgb
$colorPicker.color = 'rgb(96, 245, 66)';
// OR rgb with opacity
$colorPicker.color = 'rgba(96, 245, 66, 1)';
// OR hsv
$colorPicker.color = 'hsv(110, 73%, 96%)';
// OR hsv with opacity
$colorPicker.color = 'hsva(110, 73%, 96%, 1)';
// OR hsl
$colorPicker.color = 'hsl(110, 90%, 61%)';
// OR hsl with opacity
$colorPicker.color = 'hsla(110, 90%, 61%, 1)';
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter