Below is a simple workflow you can follow whether you’re designing a website, creating a theme, or building a brand palette.

Step 1: Choose a base color

You have a few ways to choose your starting color:

• Drag inside the 2D picker
  
  
  • Left/right changes saturation
    
  • Up/down changes brightness
    
    
• Use the Hue slider
  
  
  • Move the hue slider to change the color family (red → yellow → green → blue → purple)
    
    
• Paste a HEX code
  
  
  • Type or paste a color like: #ff6b6b
    
  • The tool will sync everything automatically
    
    
• Pick from screen (EyeDropper)
  
  
  • Click “Pick from screen”
    
  • Select any color visible in your browser (supported in modern browsers)
    
    

Tip: If you already have a brand color from a logo or marketing graphic, start by pasting that HEX code.

Step 2: Preview the color and copy HEX

Once you choose a color, you’ll see:

• A large preview swatch
  
• A big HEX value that’s easy to read
  
• A Copy HEX button
  
  

Click Copy HEX and paste it into:

• WordPress theme customizer
  
• Elementor / page builder settings
  
• CSS files
  
• Canva / design tools (many accept HEX)
  
  

Step 3: Convert to the format you need

Different tools need different formats. Use the conversion section to get:

Common uses

• HEX → most common for web design
  
• RGB → useful for coding and some design tools
  
• HSL → great when adjusting colors with consistent lightness
  
• CMYK → helpful for print design (approximation)
  
• LAB → useful for advanced color matching
  
  

Each row includes a Copy button so you can copy the exact formatted value instantly.

Step 4: Generate tints and shades

This step is essential for real UI design.

• Tints = lighter versions (for backgrounds, subtle highlights)
  
• Shades = darker versions (for hover states, borders, dark themes)
  
  

Click any tint/shade to:

• Copy the HEX instantly
  
• Use it as the new base color (if your tool includes “Use” or a similar option)
  
  

Where this helps:

• Button hover colors
  
• Card backgrounds
  
• Borders and dividers
  
• Dark mode variants
  
  

Step 5: Generate a palette (matching colors)

Now you can build a full palette based on color theory.

Choose a palette type:

• Complementary: strong contrast, great for CTA buttons
  
• Analogous: smooth and harmonious, great for backgrounds
  
• Triadic: balanced variety, good for modern UI sets
  
• Tetradic: more complex color systems (branding kits)
  
• Split Complementary: contrast without harshness
  
• Monochromatic: professional and minimal
  
• Neutral Pairings: suggested background/surface/text colors
  
  

Click any swatch to copy its HEX. Use “Use” to set a swatch as the new base color if needed.

Step 6: Adjust palette controls

To fine-tune results, use:

• Number of colors (3 / 5 / 7 / 9)
  
• Saturation adjustment (-30% to +30%)
  
• Brightness adjustment (-30% to +30%)
  
• Shuffle to regenerate while keeping the same rules
  
• Locks (if enabled) to keep a swatch fixed while regenerating
  
  

This is useful when you like 2–3 colors but want fresh options for the rest.

Step 7: Export for development (fast)

Once you love your palette, export it:

Copy HEX list

Perfect for quickly storing in notes or sending to a client.

Copy CSS variables

Ideal for developers and WordPress custom CSS:

• –color-1: #xxxxxx;
  
• –color-2: #xxxxxx;
  
  

Copy JSON

Useful for:

• Design systems
  
• Theme settings
  
• Apps and plugins
  
• Saving palettes in external tools
  
  

Copy Share URL

This saves your color + settings in a link so you can:

• Send it to a client
  
• Save it for later
• Collaborate with a team