Usage Instructions
- Copy the embed code above and paste it into your website's HTML
- You can set the initial color via URL parameter, e.g.:
?color=#ff0000 - You can also set the initial harmony type:
?harmony=triadic - In iframe mode, the tool automatically hides the title and embed code sections
- When a user selects a color, the tool sends a message to the parent window. You can receive it with this JavaScript code:
window.addEventListener('message', function(event) {
if (event.data && event.data.type === 'COLOR_WHEEL_CHANGE') {
const color = event.data.color; // Main hex color value
const harmony = event.data.harmony; // Active harmony type
const harmonyColors = event.data.harmonyColors; // Array of harmony colors
const hsl = event.data.hsl; // HSL object of main color
const rgb = event.data.rgb; // RGB object of main color
// Handle color change here
console.log('Selected color:', color);
console.log('Harmony colors:', harmonyColors);
}
});