Color Picker & Palette Generator
Pick a colour with hex, RGB or HSL — they stay live-synced. Generate complementary, analogous, triadic, tetradic and monochromatic palettes. Export as CSS, Tailwind or JSON.
Palette
About this tool
This is a designer's daily-driver picker that doesn't bury the basics. Three input formats — hex, RGB, HSL — stay live-synced, so when you drag a slider in one, the others update automatically. The native browser colour picker is also wired in for OS-level pixel selection. On Chromium, the EyeDropper API gives you screen-wide colour sampling with one tap; on Safari/Firefox, an image-upload fallback gives the same capability.
Pick a base, then generate one of five palette schemes. Each is computed in HSL: complementary rotates the hue by 180°, analogous samples ±30° around the base, triadic spaces 3 hues 120° apart, tetradic uses 4 hues forming a rectangle, and monochromatic varies lightness while keeping hue and saturation constant. The 5-swatch grid shows hex / RGB / HSL for each colour, plus the nearest CSS named colour from a built-in 140-name list.
When you're happy, Export gives you the palette as CSS variables, a Tailwind colors object, raw JSON, or ASE-style swatch text — paste straight into your design tokens.
How to use it (5 steps)
- Pick a base colour. Use the native picker, type a hex value, drag the RGB sliders, or use the HSL inputs. All three formats stay live-synced.
- Use the eyedropper (optional). On Chromium browsers, tap Eyedropper to sample any pixel on screen. On Safari/Firefox, upload an image and click to sample.
- Choose a scheme. Tap Complementary, Analogous, Triadic, Tetradic or Monochromatic. The 5-swatch palette regenerates from your base.
- Copy individual colours. Each swatch has hex / RGB / HSL copy buttons. The nearest CSS named colour is shown beside the value.
- Export the palette. Tap Export to download or copy the palette as CSS variables, a Tailwind colors object, JSON, or ASE-style swatch text.
Frequently asked questions
+−What's the difference between complementary and analogous?
Complementary = the colour directly opposite on the wheel (180° away). High contrast, attention-grabbing. Analogous = three colours next to each other (±30°). Soft, harmonious, low contrast. Triadic = three points 120° apart (vibrant balance). Tetradic = four points forming a rectangle (rich, but tricky to balance). Monochromatic = one hue with varying lightness — safe, minimal, brand-friendly.
+−When should I use a palette generator?
Anywhere you need more than one colour to look intentional — a brand identity, a UI theme, a chart with multiple series, slide decks, marketing posters. Pick a base colour you like, choose a scheme that matches the mood (analogous = calm; triadic = playful; complementary = punchy), and adjust from there.
+−How accurate are the colour names?
We match against 140 CSS named colours by minimum RGB distance. The closest name is often quite close visually but not exact — 'tomato' might be reported for any reddish-orange in a wide neighborhood. If you need a precise name, copy the hex value instead.
+−Does the eyedropper work in Safari or Firefox?
No. The browser EyeDropper API is currently Chromium-only (Chrome, Edge, Brave, Opera). On Safari and Firefox we hide the button. As a fallback you can upload an image and click on it to sample a pixel, which works everywhere.
+−Can I export the palette?
Yes. Tap Export to copy the current palette as CSS variables (--primary: #abcdef), a Tailwind colors object, raw JSON, or ASE-style swatch text. One click each. Everything is generated in your browser.
+−Is the palette colour-blind safe?
Not necessarily. Triadic and complementary schemes can cause issues for red-green and blue-yellow colour blindness. Monochromatic and analogous schemes — combined with strong lightness contrast — tend to be safer. Always test critical UI with a colour-blind simulator.
Related on WRRK Tools
Convert CSV ↔ JSON in your browser
ToolWords, characters, sentences, reading time — instant
ToolLive character count for tweets, SMS, meta tags
CategoryBrowse the full developer tools category
ArticleJSON formatting is essential for debugging and readability. Discover how to format JSON online quickly using free tools and best practices.
CompareHonest comparison: features, pricing, signup