让Trae实现一个颜色搭配神器

前言

每次做前端的颜色设计，最头疼的就是选颜色，甲方又不太懂，这个时候就需要开发人员给出专业的颜色搭配。

这个时候不是选不出，而是选了又怕出错------背景太深、文字太浅，主色太跳、辅色太闷。

试来试去，大部分的时间全花在微调十六进制码上，最后还是回到那几组"安全色"，前端展示却越做越保守，看起来都不高级，一点都不吸引人。

那么就让Trae 帮我们做一个颜色搭配神器，用来解决这一件事，让甲方想要的配色不再靠猜。

选择一个颜色，它给出可直接用的整套组合，还可以本地保存搭配方案，以及复制代码

先来看看最终的效果

复制的css代码，看起来还不错，代码格式也符合我们去做全局变量，太专业了吧

css 复制代码

:root {
  --color-1: #9e4fc9;
  --color-2: #cba0ee;
  --color-3: #c94fb7;
  --color-4: #c94f7a;
  --color-5: #614fc9;
  --color-6: #eea0ea;
}

/* 示例用法 */
.primary-bg { background-color: var(--color-1); }
.accent-bg { background-color: var(--color-2); }

下面我们来看看Trae是怎么帮我们实现代码的

这个是Trae生成的主要功能以及根据配色生成的一套颜色方案

主要功能

主颜色选择：您可以通过颜色选择器或直接输入十六进制值选择一个主颜色
多种配色方案：支持互补色、类似色、三角色、分裂互补色、四角色和单色调等多种配色方案
自定义配色：您可以添加自定义颜色，与主颜色一起生成和谐的配色方案
和谐度评分：自动计算生成的配色方案的和谐度，并给出评分
配色详情：显示每个颜色的详细信息，包括颜色名称、十六进制值和HSL值
保存功能：可以保存喜欢的配色方案

主颜色更新

ini 复制代码

function updateMainColor(color) {
    mainColorInput.value = color;
    mainColorHex.value = color;
    mainColorPreview.style.backgroundColor = color;
}

当用户通过颜色选择器或输入HEX值更改主颜色时，会同步更新颜色预览和输入框的值。

自定义颜色管理

添加自定义颜色：通过点击"+"按钮，动态创建新的颜色选择器元素
更新自定义颜色：与主颜色类似，更新颜色预览和输入框
移除自定义颜色：点击"×"按钮移除对应的颜色选择器元素

随机颜色生成

javascript 复制代码

function getRandomColor() {
    return '#' + Math.floor(Math.random()*16777215).toString(16).
    padStart(6, '0');
}

3. 配色方案生成

生成按钮交互

点击"生成配色方案"按钮时，会添加加载动画，然后调用 generatePalette() 函数生成配色方案。

配色方案算法

javascript 复制代码

function generatePalette() {
    const scheme = document.querySelector('.scheme-btn.active').
    dataset.scheme;
    const mainColorHex = mainColorInput.value;
    const hsl = hexToHSL(mainColorHex);
    let colors = [mainColorHex];
    
    // 根据不同的配色方案生成颜色
    switch(scheme) {
        case 'complementary':
            // 生成互补色
            break;
        case 'analogous':
            // 生成类似色
            break;
        // 其他配色方案...
    }
    
    // 添加自定义颜色
    // 计算和谐度
    // 显示结果
}

配色方案生成的核心逻辑：

获取当前选择的配色方案类型（互补色、类似色等）
将主颜色从HEX转换为HSL格式，便于颜色计算
根据配色方案类型，使用不同的算法生成配色：
- 互补色：在色相环上相对的颜色（相差180°）
- 类似色：在色相环上相邻的颜色（相差30°）
- 三角色：在色相环上均匀分布的三种颜色（相差120°）
- 分裂互补色：主色的互补色两侧的颜色
- 四角色：在色相环上形成矩形的四种颜色
- 单色调：相同色相，不同亮度和饱和度的颜色
将自定义颜色添加到生成的配色方案中

总结

有了这套方案，我们就可以让甲方先自主选一个颜色，然后再根据颜色设计一版布局和颜色搭配，让甲方先行验收，避免花太多的时间在选择颜色上面，快来试试吧，让你不再有颜色搭配烦恼~