tutorial

How to Build an AI Color Palette Generator with AI Pass SDK

Build an AI color palette generator with AI Pass SDK. Users pay directly, you earn 50% commission. Tutorial with code.

EiliyaFebruary 21, 20262 min read

How to Build an AI Color Palette Generator with AI Pass SDK

Create a color palette generator that creates beautiful color schemes from text descriptions. Users pay directly — you earn 50% commission.

What You'll Build

A color palette generator that:

Accepts text descriptions (mood, theme, brand)
Generates 5-7 coordinated colors
Offers multiple styles (harmonious, bold, pastel, neon)
Exports hex codes and CSS variables

Step 1: Create Account & OAuth2 Client

Sign up
Get OAuth2 Client ID from Developer Dashboard
Use YOUR_CLIENT_ID placeholder in code

Step 2: Build the App

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AI Color Palette Generator</title>
    <link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
    <style>
        body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        input, select, button { padding: 12px; margin: 5px; font-size: 16px; }
        .palette { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
        .color { flex: 1; min-width: 80px; height: 150px; border-radius: 8px; padding: 10px; cursor: pointer; position: relative; }
        .color .hex { position: absolute; bottom: 10px; left: 10px; right: 10px; background: rgba(0,0,0,0.5); color: white; padding: 5px; border-radius: 4px; text-align: center; font-size: 12px; }
        .css-output { background: #f5f5f5; padding: 15px; margin-top: 20px; border-radius: 8px; font-family: monospace; }
    </style>
</head>
<body>
    <h1>AI Color Palette Generator</h1>
    <input type="text" id="description" placeholder="e.g., calming beach sunset" style="width: 60%">
    <select id="style">
        <option value="harmonious">Harmonious</option>
        <option value="bold">Bold</option>
        <option value="pastel">Pastel</option>
        <option value="monochromatic">Monochromatic</option>
        <option value="earth-tones">Earth Tones</option>
        <option value="neon">Neon</option>
    </select>
    <button onclick="generate()">Generate</button>
    <div id="result"></div>
    <script src="https://aipass.one/aipass-sdk.js"></script>
    <script>
        AiPass.initialize({ clientId: 'YOUR_CLIENT_ID', requireLogin: true, darkMode: true });
        
        async function generate() {
            const description = document.getElementById('description').value;
            const style = document.getElementById('style').value;
            const result = document.getElementById('result');
            
            if (!description) { alert('Please enter a description'); return; }
            result.innerHTML = '<p>Generating...</p>';
            
            try {
                const response = await AiPass.generateCompletion({
                    model: 'gpt-5-mini',
                    temperature: 1,
                    max_tokens: 16000,
                    messages: [{
                        role: 'system',
                        content: 'Generate 5-7 hex color codes for a color palette. Return valid JSON array with hex codes only.'
                    }, {
                        role: 'user',
                        content: `Create a ${style} color palette for: ${description}. Return only a JSON array of hex codes like ["#RRGGBB", ...]`
                    }]
                });
                
                const colors = JSON.parse(response.choices[0].message.content);
                
                const paletteHtml = colors.map(hex => `
                    <div class="color" style="background: ${hex}" onclick="navigator.clipboard.writeText('${hex}')">
                        <div class="hex">${hex}</div>
                    </div>
                `).join('');
                
                const cssVars = colors.map((hex, i) => `--color-${i + 1}: ${hex};`).join('\n');
                
                result.innerHTML = `
                    <div class="palette">${paletteHtml}</div>
                    <div class="css-output">
                        <strong>CSS Variables:</strong><br>
                        <code>:root {<br>${cssVars.replace(/\n/g, '<br>&nbsp;&nbsp;')}<br>}</code>
                        <br><br>
                        <button onclick="copyCSS()">Copy CSS</button>
                    </div>
                `;
            } catch (e) {
                result.innerHTML = `<p style="color:red">Error: ${e.message}</p>`;
            }
        }
        
        function copyCSS() {
            const css = document.querySelector('.css-output code').innerText;
            navigator.clipboard.writeText(css);
            alert('Copied!');
        }
    </script>
</body>
</html>

Step 3: Deploy & Earn

Host anywhere or publish on AI Pass. Earn 50% commission on every palette generated.

Get Your Client ID and start building!

Related apps

color palette