Hub

Palette Lab

Your palette

    Harmony

    Text contrast

    Each square: row colour as text on the column colour. AAA 7+ AA 4.5+ Big 3+, large text only

    Contrast ratio of every colour pair

    Colour blindness

    How your palette looks to people with each type. Colours that merge here need another clue, like a label or a pattern.

    Export

    
        
    
          
          
        
    
        
    
      
    

      
      
    
        
    Saved palettes
    
        
    
          
          
          
        
    
        
    
        
      
        
      Nothing saved yet. Name a palette you like and tap Save.
      
      
      
    
      

    
    
      
      
      
        
      How to use it
      
        
        
          
      1. Pick a harmony. Tap Generate until you like one.
        2. 
          
      2. Lock the colours you want to keep. Generate again.
        3. 
          
      3. Tweak a colour: type a hex code or use the picker.
        4. 
          
      4. Check the contrast grid and colour-blind rows.
        5. 
          
      5. Copy or download it for CSS, Godot or Aseprite.
        6. 
        
      
        
      
          
      Do thisPhoneKeyboard
      
          
            
      New paletteGenerate buttonSpace
      
            
      Lock a colourTap its lock1 to 5
      
            
      Edit a colourTap the hex or the pickerTab to it, type, Enter
      
            
      ExportCopy or DownloadTab to it, Enter