免费 · 实时生成 · CSS 代码直接复制

网站HEX 颜色调色板生成器

输入一个 HEX 颜色值，即刻生成完整的色调系统：和谐色、色调刻度、语义色彩令牌，以及可直接使用的 CSS 变量。

#

支持 #RGB 或 #RRGGBB，例如 #0EA5E9

快速预设：

调色板总览

查看基础色与衍生色之间的关系，快速构建一致的色彩系统

#2563EB
基础色

色调刻度 (50 - 900)

由浅至深的渐变色阶，适用于背景、边框、状态和文字对比

语义色彩令牌

直接在 UI 中使用这些角色，保持产品视觉和品牌风格的一致性

CSS 变量

复制后直接粘贴到您的样式表中


      

    


    
    

      

        
对比度检测

        
验证文字与背景的颜色对比度是否符合 WCAG 可访问性标准

      

      

    


  








  

    
使用方法

    

      

        
1

        
输入或选择颜色

        
直接输入 HEX 值，使用拾色器，或点击「随机颜色」探索新方向。

      

      

        
2

        
查看调色板总览

        
查看基础色旁边自动生成的和谐色，它们能完美配合并扩展您的设计语言。

      

      

        
3

        
探索色调刻度与语义令牌

        
审阅 50-900 色调刻度，以及预定义的语义角色，直接在设计系统中使用。

      

      

        
4

        
复制 CSS 变量

        
一键复制 CSS 变量或 Tailwind 配置，立即在项目中使用。

      

    

  







  

    
常见问题

    

      

        什么是 HEX 颜色调色板生成器？
        
它是一种工具，基于单个 HEX 颜色值创建完整的颜色调色板，包括色调变化和和谐色。

      

      

        可以从任何 HEX 代码生成调色板吗？
        
是的，您可以输入任何有效的 HEX 颜色，手动选择颜色，或生成随机颜色。

      

      

        色调刻度有什么用？
        
色调刻度（50-900）提供结构化的色调，用于背景、边框、悬停状态和可访问的文字对比。

      

      

        如何使用生成的 CSS 变量？
        
只需复制变量并粘贴到您的 CSS 文件或设计系统配置中即可。

      

      

        什么是语义色彩令牌？
        
语义令牌是有具体用途含义的颜色名称（如 primary、secondary、accent），让颜色在整个产品中保持一致的视觉规范。

      

      

        WCAG 对比度标准是什么？
        
WCAG AA 要求普通文字对比度至少 4.5:1，大文字至少 3:1；AAA 级别则分别要求 7:1 和 4.5:1。

      

    

  



  

    

      

        
推荐免费外贸常用工具

      

      

        

          

            

              
            

            

              
                
外贸邮件签名工具

              
              
专业的邮件签名生成工具，创建美观、专业的邮件签名，提升品牌形象

            

          

          

            

              
            

            

              
                
可视化编辑器

              
              
强大的可视化编辑工具，轻松创建和编辑各种外贸文档、产品描述和营销内容

            

          


            
              

                

                  
                

                

                  
                    
PDF 转 JPG

                  
                  
将 PDF 文档快速转换为高质量的 JPG 图片，支持批量转换所有页面，可自定义图片质量

                

            
            


              

                

                  
                

                

                  
                    
外贸PI生成器

                  
                  
专业的外贸形式发票生成工具，支持自定义产品信息、价格条款、付款方式，快速生成PI文档

                

              

        

        

          

            

              
            

            

              
                
大小写转换工具

              
              
便捷的文本大小写转换工具，支持多种格式转换，提高外贸文案处理效率

            

          

          

            

              
            

            

              
                
外贸邮件模板工具

              
              
丰富的外贸邮件模板库，涵盖开发信、跟进邮件、报价单等多种业务场景 

            

          


                
            

              

                

                  
                

                

                  
                    
图片转 PDF

                  
                  
将多张图片合并转换为 PDF 文档，支持 JPG、PNG、WebP 格式，可自定义页面设置

                

              

            


               

              

                

                  
                

                

                  
                    
网站配色生成器

                  
                  
智能生成专业的网站配色方案，支持色彩和谐搭配，提供CSS代码一键复制

                

              

            


            
        

        

          

            

              

                

                  
                

                

                  
                    
外贸开发信模板工具

                  
                  
专业的外贸开发信模板，帮助您撰写高回复率的客户开发邮件，拓展海外市场

                

              

            

            

              

                

                  
                

                

                  
                    
图片压缩工具

                  
                  
免费的在线图片压缩工具，支持 JPEG、PNG、WebP 格式 

                

              

            


            

              

                

                  
                

                

                  
                    
发票生成器

                  
                  
免费专业的发票生成工具，支持自定义公司信息、税率计算、多币种，一键生成PDF发票

                

              

            


            

              

                

                  
                

                

                  
                    
在线生成ICO图标

                  
                  
快速将图片转换为网站ICO图标，支持多种尺寸生成，一键下载favicon.ico文件

                

              

            


         

          

        

      

    

  




























	
	

		
			电话咨询
			
电话咨询

		
	

	

		
			
			
微信咨询

		
		

			二维码
		

	

	

		
			预约顾问
			
预约顾问

		
	







	

		

		

			
立即联系营销顾问

			
185-5511-2860

			

				二维码
				微信扫一扫联系
			

		

		

			

								

					
请输入正确手机号
预约顾问
				

			

			
链为隐私条款信息保护中，请放心填写

		

	






    

        
            在线咨询
            
在线咨询

        
    

    

        
            电话咨询
            
电话咨询