免费 · 实时生成 · 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

              
            

          

          

            

              
            

            

              
                
外贸PI生成器

              
            

          

		     

              

                

                  
                

                

                  
                    
网站邮箱抓取

                  
                

              

            

			
        

        

          

            

              
            

            

              
                
大小写转换工具

              
            

          

          

            

              
            

            

              
                
外贸邮件模板工具

              
            

          

          

            

              
            

            

              
                
图片转 PDF

              
            

          

          

            

              
            

            

              
                
网站配色生成器

              
            

          

		  
		  

              

                

                  
                

                

                  
                    
人民币金额大小写转换

                  
                

              

            

			
			
        

        

          

            

              

                

                  
                

                

                  
                    
外贸开发信模板工具

                  
                

              

            

            

              

                

                  
                

                

                  
                    
图片压缩工具

                  
                

              

            

            

              

                

                  
                

                

                  
                    
发票生成器

                  
                

              

            

            

              

                

                  
                

                

                  
                    
在线生成ICO图标

                  
                

              

            

            

              

                

                  
                

                

                  
                    
世界节日大全

                  
                

              

            

         
            
          

        

      

    

  




























	
	

		
			电话咨询
			
电话咨询

		
	

	

		
			
			
微信咨询

		
		

			二维码
		

	

	

		
			预约顾问
			
预约顾问

		
	







	

		

		

			
立即联系营销顾问

			
185-5511-2860

			

				二维码
				微信扫一扫联系
			

		

		

			

								

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

			

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

		

	






    

        
            在线咨询
            
在线咨询

        
    

    

        
            电话咨询
            
电话咨询