Getting Started with paletteIO

Learn how to create beautiful, accessible color palettes in just a few steps

Quick Start (2 Minutes)

1

Pick Your Starting Color

Click the color picker in the first tab to choose your base color. You can:

  • Use the visual color picker
  • Type a HEX code (e.g., #3B82F6)
  • Adjust RGB or HSL values
2

Generate Your Palette

Choose a color harmony type to automatically generate a complete palette:

ComplementaryAnalogousTriadicTetradicSplit-ComplementaryMonochromatic

Adjust the palette size (3-12 colors) and regenerate until you find the perfect combination.

3

Check Accessibility

Switch to the "Contrast Checker" tab to ensure your colors are WCAG compliant:

  • Test color combinations for readability
  • AAEnsure AA compliance (4.5:1 ratio minimum)
  • AAAAim for AAA compliance (7:1 ratio) when possible
4

Preview & Export

Use the "Live Preview" tab to see your colors in real UI components, then export in your preferred format:

JSONCSS VariablesTailwindSCSSCSS-in-JSAndroid XMLiOS Swift+ More

Essential Features

Save Your Palettes

Love a palette? Save it to your personal library for easy access later.

  • • Click the heart icon to save
  • • Access from the "Library" tab
  • • Search and filter saved palettes
  • • Works offline, no account required
One-Click Copy

Copy any color value instantly to your clipboard in multiple formats.

  • • Click any color swatch to copy
  • • Available in HEX, RGB, HSL
  • • Visual feedback confirms copy
  • • Perfect for design workflows
Keyboard Shortcuts

Speed up your workflow with built-in keyboard shortcuts.

  • • Ctrl+R Random palette
  • • Ctrl+S Save palette
  • • Ctrl+E Export dialog
  • • ? Show all shortcuts
Live Preview

See your colors in action with real UI component previews.

  • • Buttons, cards, and forms
  • • Navigation and text elements
  • • Light and dark backgrounds
  • • Mobile and desktop views

Pro Tips

Color Theory

  • • Start with complementary for high contrast
  • • Use analogous for harmonious, calm palettes
  • • Try monochromatic for subtle, professional looks
  • • Triadic creates vibrant, balanced combinations

Accessibility Best Practices

  • • Always test text on background colors
  • • Aim for AAA compliance when possible
  • • Use the contrast checker for every combination
  • • Consider colorblind users in your choices

Ready to Create?

You now have everything you need to create professional, accessible color palettes. Start experimenting and discover your perfect colors!

Start CreatingLearn WCAG Compliance

Need help? Check out our troubleshooting guide or explore keyboard shortcuts.