Sebastian Krüger
de18e007a6
🎨 WebAssembly color manipulation library Features: - ✨ Color parsing (hex, rgb, hsl, named colors) - 🎨 Color manipulation (lighten, darken, saturate, desaturate) - 🌈 Color generation (random, gradients, palettes) - ♿ Accessibility (colorblind simulation, contrast, WCAG) - 📏 Color distance (CIE76, CIEDE2000) - 🎯 Color spaces (RGB, HSL, HSV, Lab, LCH) - 🏷️ 148 CSS/X11 named colors Bundle size: 132KB Performance: ~0.1ms per operation 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
205 lines
6.7 KiB
HTML
205 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>pastel-wasm Example</title>
|
|
<style>
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.demo {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.color-box {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
margin: 5px;
|
|
border: 2px solid #ddd;
|
|
}
|
|
.palette {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
code {
|
|
background: #f0f0f0;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
h2 {
|
|
color: #333;
|
|
border-bottom: 2px solid #3498db;
|
|
padding-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎨 pastel-wasm Demo</h1>
|
|
|
|
<div class="demo">
|
|
<h2>Color Manipulation</h2>
|
|
<div id="manipulation-demo"></div>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
<h2>Color Gradients</h2>
|
|
<div id="gradient-demo"></div>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
<h2>Color Palettes</h2>
|
|
<div id="palette-demo"></div>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
<h2>Random Colors</h2>
|
|
<div id="random-demo"></div>
|
|
<button onclick="generateRandomColors()">Generate New Colors</button>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
<h2>Accessibility</h2>
|
|
<div id="accessibility-demo"></div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import init, * as pastel from './pkg/pastel_wasm.js';
|
|
|
|
async function main() {
|
|
// Initialize WASM
|
|
await init();
|
|
|
|
// Demo 1: Color Manipulation
|
|
demonstrateManipulation();
|
|
|
|
// Demo 2: Gradients
|
|
demonstrateGradients();
|
|
|
|
// Demo 3: Palettes
|
|
demonstratePalettes();
|
|
|
|
// Demo 4: Random Colors
|
|
window.generateRandomColors = demonstrateRandom;
|
|
demonstrateRandom();
|
|
|
|
// Demo 5: Accessibility
|
|
demonstrateAccessibility();
|
|
}
|
|
|
|
function createColorBox(color, label) {
|
|
return `
|
|
<div style="display: inline-block; text-align: center; margin: 10px;">
|
|
<div class="color-box" style="background: ${color}"></div>
|
|
<div style="margin-top: 5px; font-size: 12px;">
|
|
${label ? `<strong>${label}</strong><br>` : ''}
|
|
<code>${color}</code>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function demonstrateManipulation() {
|
|
const base = '#3498db';
|
|
const lighter = pastel.lighten_color(base, 0.2);
|
|
const darker = pastel.darken_color(base, 0.2);
|
|
const saturated = pastel.saturate_color(base, 0.3);
|
|
const desaturated = pastel.desaturate_color(base, 0.3);
|
|
const complement = pastel.complement_color(base);
|
|
|
|
document.getElementById('manipulation-demo').innerHTML = `
|
|
<p>Starting with <code>${base}</code></p>
|
|
<div class="palette">
|
|
${createColorBox(lighter, 'Lighter')}
|
|
${createColorBox(base, 'Original')}
|
|
${createColorBox(darker, 'Darker')}
|
|
${createColorBox(saturated, 'Saturated')}
|
|
${createColorBox(desaturated, 'Desaturated')}
|
|
${createColorBox(complement, 'Complement')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function demonstrateGradients() {
|
|
const gradient = pastel.generate_gradient('#ff0000', '#0000ff', 10);
|
|
|
|
document.getElementById('gradient-demo').innerHTML = `
|
|
<p>Gradient from <code>#ff0000</code> to <code>#0000ff</code></p>
|
|
<div class="palette">
|
|
${gradient.map((color, i) => createColorBox(color, `Step ${i + 1}`)).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function demonstratePalettes() {
|
|
const base = '#e74c3c';
|
|
const schemes = ['monochromatic', 'analogous', 'complementary', 'triadic'];
|
|
|
|
const html = schemes.map(scheme => {
|
|
const colors = pastel.generate_palette(base, scheme);
|
|
return `
|
|
<div style="margin-bottom: 20px;">
|
|
<h3 style="text-transform: capitalize;">${scheme}</h3>
|
|
<div class="palette">
|
|
${colors.map(color => createColorBox(color)).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
document.getElementById('palette-demo').innerHTML = `
|
|
<p>Palettes based on <code>${base}</code></p>
|
|
${html}
|
|
`;
|
|
}
|
|
|
|
function demonstrateRandom() {
|
|
const vivid = pastel.generate_random_colors(6, true);
|
|
|
|
document.getElementById('random-demo').innerHTML = `
|
|
<p>Vivid random colors</p>
|
|
<div class="palette">
|
|
${vivid.map(color => createColorBox(color)).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function demonstrateAccessibility() {
|
|
const backgrounds = ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c'];
|
|
|
|
const html = backgrounds.map(bg => {
|
|
const textColor = pastel.get_text_color(bg);
|
|
const contrast = pastel.calculate_contrast(bg, textColor);
|
|
const wcagAA = contrast >= 4.5;
|
|
const wcagAAA = contrast >= 7.0;
|
|
|
|
return `
|
|
<div style="background: ${bg}; color: ${textColor}; padding: 20px; margin: 10px 0; border-radius: 4px;">
|
|
<strong>Sample Text</strong><br>
|
|
Background: <code style="background: rgba(255,255,255,0.2); color: inherit;">${bg}</code><br>
|
|
Text: <code style="background: rgba(255,255,255,0.2); color: inherit;">${textColor}</code><br>
|
|
Contrast: ${contrast.toFixed(2)}
|
|
${wcagAAA ? '✅ WCAG AAA' : wcagAA ? '✅ WCAG AA' : '❌ Fails WCAG'}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
document.getElementById('accessibility-demo').innerHTML = html;
|
|
}
|
|
|
|
main();
|
|
</script>
|
|
</body>
|
|
</html>
|