无需登录 数据私有 本地保存

调色板导出为 Tailwind 配置 - 从图片/手动生成色阶

CSS 设计工具 Tailwind 导出 调色板 配置
48
0
0
0
已复制到剪贴板

Tailwind 调色板生成器

从图片智能提取品牌色，或手动选择基色，一键生成 Tailwind CSS 50-950 完整色阶配置

拖拽图片到此处，或点击上传

支持 JPG / PNG / WebP，推荐使用品牌Logo或情绪板图片

基色将被放置在 500 等级，自动向亮/暗两端延展生成完整色阶

点击下方预设颜色快速生成色阶

色阶预览
1 个颜色组
Tailwind 配置代码

    

  


  
  

    
常见问题

    

      

        什么是 Tailwind CSS 色阶？
        
      

      

        Tailwind CSS 使用数字等级（50-950）来组织颜色，其中 50 是最亮的色调（接近白色），500 是标准基色，950 是最暗的色调（接近黑色）。完整的色阶包含11个等级：50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950。这种设计让你在不同UI状态（hover、active、disabled等）中灵活使用同一色系。
      

    

    

      

        生成的配置代码如何使用？
        
      

      

        复制生成的代码，粘贴到你的 tailwind.config.js 文件的 theme.extend.colors 中。保存后重新构建项目，即可通过 bg-brand-500、text-brand-300 等类名使用自定义颜色。支持 JS、TS 和 ESM 三种格式。
      

    

    

      

        如何从图片中提取合适的品牌色？
        
      

      

        推荐使用品牌Logo、官网截图或情绪板图片。工具会自动过滤掉纯白、纯黑和灰色像素，提取最具代表性的色彩。上传后点击色块即可选中/取消，选中的颜色可一键加入色阶生成。颜色提取基于色相聚类算法，能识别图片中的主要色调。
      

    

    

      

        色阶生成的算法原理是什么？
        
      

      

        本工具基于 HSL 色彩空间生成色阶。以基色（500位置）为锚点，保持色相(H)基本不变，按照预设曲线调整亮度(L)和饱和度(S)。亮色端（50-400）逐渐提升亮度并降低饱和度，暗色端（600-950）逐渐降低亮度并适当调整饱和度，确保色阶过渡自然、视觉协调。
      

    

    

      

        支持 Tailwind CSS v4 吗？
        
      

      

        生成的配置代码主要针对 Tailwind CSS v3 的 tailwind.config.js 格式。对于 Tailwind CSS v4（使用CSS变量定义），你可以参考生成的色值手动转换。后续版本将增加 v4 的 CSS 变量格式输出。
      

    

    

      

        可以同时管理多个颜色组吗？
        
      

      

        可以。每个颜色组独立命名（如 brand、accent、neutral），生成的配置代码会包含所有颜色组。你可以从图片中提取多个颜色分别添加，或手动创建多个颜色组，最终统一导出。
      

    

  










 🔧 相关工具