已复制！

🎨 HSL 色卡生成器

作者：豪冷 · 公众号：Haomissyou

—— 推荐专栏 ——

🎛 选择主色 HSL 滑块 · HEX 输入 · 颜色选择器 · 实时预览
H 色相 210°
S 饱和 80%
L 明度 55%
🔁 辅色色相偏移 在主色 H 基础上偏移，生成第二色组
H 色相 S 饱和度 L 明度 ⬆ L 阶梯 7→97 步长 10 🔁 辅色 H 偏移 🟠 当前 L 位置
❶ 主色明度阶梯 保持 H、S 不变，L 从 7→97，步长 10 · 点击色卡复制 HEX
❷ 辅色明度阶梯 H+30°，L 7→97，步长 10
🎯 最终调色板 主色 · 辅色 · 文字 · 背景 · 强调 — 含 WCAG 对比度
💻 CSS 变量导出 可直接用于项目

    


    

        
🌈 Tailwind 风格色阶 主色，对应 50/100…900

        

    







    

        🖥 UI 配色预览
        

            深色模式
            
        

    

    

        

            
            首页   产品   关于
        

        

            
创意配色方案

            
基于 HSL 系统生成的和谐配色，让你的设计更有层次感。

            开始设计
            

                

                    
主色调

                    
明亮且充满活力，适合主要交互元素。

                    Primary
                

                

                    
辅色调

                    
与主色形成对比，用于次级信息与装饰。

                    Accent
                

            

        

    







    

        🌟 收藏历史 最多保存 5 套，刷新后保留 · 点击恢复配色
        
    

    






    HSL 技法 保持 S 不变，L 以步长 10 衍生；新色相 H 偏移后再衍生明度。
    文字色基于主色加深，背景色基于主色提亮，强调色取自辅色组中段。