Embed Color Palettes on Your Website

Swatchery's free embed widget allows you to display beautiful, interactive color palettes directly on your website, blog, or portfolio. Share your color schemes with visitors using a simple embed code that works on any platform.

How to Embed a Palette

1. Create Your Palette: Use our color extractor or palette studio to create the perfect color scheme
2. Generate Embed Code: Click the share button and copy the embed code
3. Paste on Your Site: Add the code to your HTML where you want the palette to appear

Embed Features

• Responsive Design: Palettes automatically adjust to fit any container width
• Copy on Click: Visitors can click any color to copy its hex code
• Dark Mode Support: Embeds respect your site's color scheme preferences
• Lightweight: Minimal impact on page load times
• No Account Required: Embed palettes without signing up

Embed Options

Choose from multiple embed styles to match your website's design. Options include compact single-row displays, grid layouts for larger palettes, and detailed views showing color codes. Customize the width, border radius, and spacing to seamlessly integrate with your existing design.

Use Cases

• Design Portfolios: Showcase the color palettes used in your projects
• Blog Posts: Include color references in design tutorials and articles
• Brand Guidelines: Display official brand colors on your documentation
• E-commerce: Show product color options with precise hex codes
• Educational Content: Teach color theory with interactive examples

Technical Details

Embeds use a lightweight iframe that loads asynchronously, ensuring your page performance isn't affected. The embed respects Content Security Policy (CSP) headers and works with most website builders including WordPress, Squarespace, Wix, and custom HTML sites.