调色板选择器，Trae 为设计增添色彩，快速生成经典配色方案

🎨 色彩，作为网页设计中最基本且最直观的元素之一，它直接影响到用户的视觉体验和情感反馈。无论是在 UI 设计、图形设计还是网站开发中，色彩的搭配都是至关重要的因素。如何从丰富的色彩中挑选出既和谐又有吸引力的配色方案，是设计师在创作时面临的一项挑战。

为了简化设计过程中配色的选择，调色板选择器应运而生。这个工具不仅提供多种经典的色彩搭配方案（如 Material、Tailwind、Adobe 等），还能让用户一键复制所选配色，轻松应用于自己的项目中。本文将深入探讨调色板选择器的功能、用途和与 Trae 的智能交互。

🌈 调色板的重要性

色彩不仅仅是网页或应用的"装饰"，它是设计语言的重要组成部分。合理的配色不仅能提升页面的美观度，还能有效引导用户的注意力，传达情感和品牌理念。

常见的配色方案包括：

基础配色：选择两三种主色和辅助色，构建简洁的色彩搭配，确保设计的清晰性。
对比配色：通过颜色的对比度来强化视觉冲击力，如红与绿、蓝与橙的搭配。
渐变配色：通过渐变过渡的方式，创造出层次感和深度感。
品牌色配色：结合品牌的色彩风格，定制符合品牌形象的配色方案。

无论是哪种配色方式，设计师都需要一个高效的工具来快速选择和调整色彩。调色板选择器正是为了满足这一需求而设计的。

🛠 调色板选择器的核心功能

调色板选择器的目标是为设计师和开发者提供一个快速、精准且易于使用的工具，帮助他们轻松选择合适的配色方案。它的主要功能包括：

提供多种经典配色方案

调色板选择器内置了多种经典的配色方案，满足不同项目需求：

Material Design 配色：Google 的 Material Design 提供了一套非常成熟的配色方案，包含了主色、强调色、背景色等，适合各种界面设计。
Tailwind 配色：Tailwind CSS 是一种实用的 CSS 框架，具有丰富的色彩类，可以用来快速构建响应式和现代化的网页。Tailwind 配色方案适合快速原型设计及大多数前端开发项目。
Adobe 配色：Adobe 提供了许多色彩搭配的灵感和推荐，涵盖了从色相、饱和度到明度的多种搭配，适合艺术设计和图形创作。
自定义配色方案：支持用户根据个人需求自定义配色，或者选择已有的经典色板作为基础。

这些经典的配色方案经过设计师和开发者的验证，保证了色彩的搭配既美观又符合视觉设计的基本原则。

快速点击复制配色

选择好配色方案后，调色板选择器提供一键复制功能，用户可以快速将选定的颜色值（如 HEX、RGB 或 HSL 等格式）复制到剪贴板，节省了手动复制的时间，极大提高了工作效率。

用户在选择一个颜色时，通常会看到色彩的展示和它的具体数值（例如：#FF5733）。只需点击一次，系统便会将该颜色值复制到剪贴板，无需担心出错或者忘记记录。

多格式支持

除了常规的HEX 格式，调色板选择器还支持RGB 、HSL 和CMYK等不同的色彩值格式，确保用户能够在不同的场景中灵活使用。设计师可以根据需求选择最适合的颜色格式，方便地将颜色值应用到设计工具或开发环境中。

交互式调色板预览

调色板选择器通过实时预览功能，展示每种配色方案的实际效果。用户可以直接看到所选颜色在背景、文字、按钮等元素上的应用效果，帮助他们做出最合适的选择。

例如，当选择一个新的背景色时，页面会实时展示该背景色的效果，并自动搭配相应的文字颜色，确保色彩之间的对比度符合可读性要求。

颜色对比与辅助工具

除了直接选择颜色外，调色板选择器还可以分析不同颜色之间的对比度。它会提供对比度建议，确保文本与背景色之间具有足够的可读性，符合 Web 可访问性标准。对于设计师而言，这项功能非常重要，因为它确保设计不仅好看，还能被所有用户所接受和使用。

💡 为什么需要调色板选择器？

对于设计师和开发者来说，调色板选择器是一个不可或缺的工具。它不仅能提高配色的效率，还能减少配色时产生的困惑，确保配色的一致性和专业性。以下是调色板选择器带来的几个优势：

提升工作效率
确保色彩搭配和谐
便捷的复制功能
多种颜色格式支持

🤖 与 Trae 的交互指令

通过与 Trae 配合，调色板选择器的使用变得更加智能和便捷。你可以通过自然语言指令与 Trae 进行交互，快速生成所需的配色方案，并一键复制到剪贴板。以下是几个常见的指令示例：

调色板选择器，提供多种经典配色方案（如 Material、Tailwind、Adobe），支持点击复制。
指令要求 Trae 提供一个完整的 Material、Tailwind、Adobe 配色方案，并展示预览。

追加功能：基础配色：选择两三种主色和辅助色，构建简洁的色彩搭配，确保设计的清晰性。对比配色：通过颜色的对比度来强化视觉冲击力，如红与绿、蓝与橙的搭配。渐变配色：通过渐变过渡的方式，创造出层次感和深度感。品牌色配色：结合品牌的色彩风格，定制符合品牌形象的配色方案。

追加功能，自定义配色方案：支持用户根据个人需求自定义配色，或者选择已有的经典色板作为基础。

通过与 Trae 的配合，调色板选择器不仅能提升用户体验，还能让设计师和开发者更加高效地进行配色工作。

调色板选择器是一个非常实用的工具，它帮助设计师和开发者快速选择和复制适合的配色方案，节省了大量的时间和精力。无论是选择 Material Design、Tailwind 还是 Adobe 等经典配色方案，调色板选择器都能为用户提供直观的预览和高效的复制功能。

结合 Trae 的智能交互，用户可以通过简单的指令获取理想的配色方案，进一步提高工作效率。如果你是设计师，或者正在从事前端开发，这个调色板选择器绝对是你必备的工具之一。

源码分享

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专业调色板选择器</title>
    <style>
        :root {
            --radius: 8px;
            --shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .scheme-tabs {
            display: flex;
            gap: 1rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: var(--radius);
        }

        .palette-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1rem;
            padding: 2rem;
        }

        .color-card {
            display: flex;
            flex-direction: column;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.2s;
        }

        .color-preview {
            height: 100px;
            cursor: pointer;
            position: relative;
        }

        .color-meta {
            padding: 0.8rem;
            background: white;
        }

        .gradient-preview {
            height: 100px;
            cursor: pointer;
            background: linear-gradient(to right, var(--color1), var(--color2));
        }

        .input-container {
            display: flex;
            gap: 1rem;
            margin-top: 20px;
            padding: 1rem;
            background: #f1f1f1;
            border-radius: var(--radius);
        }

        .input-container input {
            padding: 0.5rem;
            border-radius: var(--radius);
            border: 1px solid #ccc;
            font-size: 1rem;
        }

        .input-container button {
            padding: 0.5rem 1rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: var(--radius);
            cursor: pointer;
        }

        .input-container button:hover {
            background-color: #0056b3;
        }

    </style>
</head>
<body>
    <div class="scheme-tabs" id="schemeTabs"></div>
    <main class="palette-grid" id="paletteContainer"></main>

    <div class="input-container">
        <input type="text" id="colorInput" placeholder="请输入颜色 (#ff5733)" />
        <button onclick="addCustomColor()">添加颜色</button>
        <button onclick="saveCustomPalette()">保存配色方案</button>
    </div>

    <script>
        // 配色方案数据模块
        class ColorScheme {
    constructor(config) {
        this.type = config.type;
        this.name = config.name;
        this.colors = config.colors || [];
        this.validate();
    }

    validate() {
        const colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
        if(!['basic', 'contrast', 'gradient', 'brand', 'custom'].includes(this.type)) {
            throw new Error('Invalid scheme type');
        }
        this.colors.forEach(color => {
            if(!colorRegex.test(color)) throw new Error(`Invalid color: ${color}`);
        });
    }

    saveToLocal() {
        const schemes = JSON.parse(localStorage.getItem('colorSchemes') || '{}');
        schemes[this.name] = this;
        localStorage.setItem('colorSchemes', JSON.stringify(schemes));
    }

    static loadFromLocal() {
        return JSON.parse(localStorage.getItem('colorSchemes') || '{}');
    }
}

const colorSchemes = {
            material: {
                name: 'Material Design',
                colors: ['#2196F3', '#4CAF50', '#FF9800', '#F44336', '#9C27B0']
            },
            tailwind: {
                name: 'Tailwind CSS',
                colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6']
            },
            basic: {
                name: '基础配色',
                colors: ['#1D3557', '#457B9D', '#A8DADC']
            },
            contrast: {
                name: '对比配色',
                colors: ['#FF0000', '#00FF00', '#0000FF', '#FFA500']
            },
            gradient: {
                name: '渐变配色',
                colors: ['#FF7F50', '#00BFFF']  // Example gradient (coral to deep sky blue)
            },
            brand: {
                name: '品牌色配色',
                colors: ['#007bff', '#6610f2', '#e83e8c']  // Example brand colors
            }
        };

        let customPalette = []; // Array to store user-defined custom color palette

        // 视图渲染模块
        function renderPalette(scheme) {
            const container = document.getElementById('paletteContainer');
            container.innerHTML = scheme.colors.map(color => {
                if (Array.isArray(color)) { // Check if it's a gradient
                    return `
                        <div class="color-card">
                            <div class="gradient-preview" style="--color1:${color[0]}; --color2:${color[1]}" 
                                 onclick="copyToClipboard('${color[0]} -> ${color[1]}')">
                            </div>
                            <div class="color-meta">
                                <div>${color[0]} -> ${color[1]}</div>
                                <button onclick="copyToClipboard('${color[0]} -> ${color[1]}')">复制</button>
                            </div>
                        </div>
                    `;
                }
                return `
                    <div class="color-card">
                        <div class="color-preview" style="background:${color}" 
                             onclick="copyToClipboard('${color}')">
                        </div>
                        <div class="color-meta">
                            <div>${color}</div>
                            <button onclick="copyToClipboard('${color}')">复制</button>
                        </div>
                    </div>
                `;
            }).join('');
        }

        // 自定义配置模块
        function initCustomPanel() {
            const panel = document.createElement('div');
            panel.className = 'config-panel';
            panel.innerHTML = `
                <div class="config-form">
                    <select id="baseScheme">
                        ${Object.values(colorSchemes).map(s => 
                            `<option value="${s.name}">${s.name}</option>`)}
                    </select>
                    <color-picker id="customPicker"></color-picker>
                    <button onclick="saveCustomScheme()">保存方案</button>
                </div>
            `;
            document.body.appendChild(panel);
        }

        function saveCustomScheme() {
            const base = document.getElementById('baseScheme').value;
            const colors = [...document.querySelectorAll('#customPicker input')]
                          .map(input => input.value);
            
            try {
                const scheme = new ColorScheme({
                    type: 'custom',
                    name: `自定义-${Date.now()}`,
                    colors
                });
                scheme.saveToLocal();
                renderPalette(scheme);
            } catch (e) {
                showToast(`配置错误: ${e.message}`);
            }
        }

        // 功能模块
        function copyToClipboard(color) {
            navigator.clipboard.writeText(color)
                .then(() => showToast('已复制: ' + color))
                .catch(err => console.error('复制失败:', err));
        }

        // 用户输入自定义颜色
        function addCustomColor() {
            const colorInput = document.getElementById('colorInput').value.trim();
            if (/^#[0-9A-F]{6}$/i.test(colorInput)) {
                customPalette.push(colorInput);
                document.getElementById('colorInput').value = ''; // Clear input field
                showToast(`已添加颜色: ${colorInput}`);
            } else {
                alert('请输入有效的颜色代码（如 #ff5733）');
            }
        }

        // 保存自定义配色方案
        function saveCustomPalette() {
            if (customPalette.length === 0) {
                alert('请先添加一些颜色!');
                return;
            }
            const customScheme = {
                name: '自定义配色',
                colors: customPalette
            };
            colorSchemes.custom = customScheme;  // Add custom scheme to the schemes object
            renderPalette(customScheme); // Show the custom palette immediately
            updateTabs(); // Update scheme tabs to include custom scheme
            customPalette = []; // Clear the custom palette after saving
            showToast('已保存自定义配色方案');
        }

        // 更新配色方案选项卡
        function updateTabs() {
            const schemeTabs = document.getElementById('schemeTabs');
            const customTab = document.createElement('button');
            customTab.textContent = '自定义配色';
            customTab.addEventListener('click', () => renderPalette(colorSchemes.custom));
            schemeTabs.appendChild(customTab);
        }

        // 初始化选项卡
        const savedSchemes = ColorScheme.loadFromLocal();
        Object.entries({...colorSchemes, ...savedSchemes}).forEach(([id, scheme]) => {
            const tab = document.createElement('button');
            tab.textContent = scheme.name;
            tab.addEventListener('click', () => renderPalette(scheme));
            document.getElementById('schemeTabs').appendChild(tab);
        });

        // 默认显示第一个方案
        renderPalette(colorSchemes.material);

        // 显示提示框
        function showToast(message) {
            const toast = document.createElement('div');
            toast.style.position = 'fixed';
            toast.style.bottom = '20px';
            toast.style.left = '50%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.padding = '10px';
            toast.style.backgroundColor = '#333';
            toast.style.color = '#fff';
            toast.style.borderRadius = '5px';
            toast.style.zIndex = '1000';
            toast.textContent = message;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 2000);
        }
    </script>
</body>
</html>