EasyWebTools

How Did Leonardo da Vinci Pick His Colors?

V
tools color picker developer tools design product update

How did Leonardo da Vinci go about picking colors for his palette?

He didn’t — he invented a machine to do it. Then he never finished building it.

That’s actually not far from the truth. The man had 13,000 pages of unfinished notes. But the point is this: choosing colors has been a headache since the Renaissance, and the internet hasn’t made it much easier. It’s just made the headache faster.

The Five-Tab Problem

Here’s a workflow that anyone who’s designed a website, a slide deck, or even a social media graphic will recognize:

  • Tab one: a color picker to find a hex code
  • Tab two: a palette generator to get complementary colors
  • Tab three: a converter because someone asked for the RGB value
  • Tab four: a contrast checker to make sure the text is actually readable
  • Tab five: the original design file, now buried under the other four tabs

Every single one of those tools exists online. Most of them are pretty good. But they’re all separate. You pick a color in one, manually type the hex code into another, realize you need the HSL version, open a third tool, and by the time you’ve checked the contrast ratio you’ve forgotten which blue you started with.

We built one tool that does all four things. One tab. One page. Zero signups.

The Color Picker That Actually Picks

Our Color Picker opens to a visual gradient area — click or drag anywhere to choose your color, slide the hue bar to shift across the spectrum. It feels like a real color picker, not three sliders pretending to be one. (Though if you want to type a hex code directly, you can do that too.)

Every color you select shows its HEX, RGB, and HSL values with one-click copy buttons. Found something you like? Add it to your history — the tool remembers your last 10 picks, so you can compare without scribbling hex codes on a sticky note.

Arrow keys work for fine-tuning, because sometimes one pixel of saturation makes the difference between “modern and clean” and “1997 GeoCities.”

Palettes That Actually Work Together

Switch to the Palettes tab and things get interesting. Pick a base color — either from the Picker tab or type one in directly — choose a harmony rule, and generate a five-color palette in one click.

Six harmony modes:

  • Complementary — colors opposite on the wheel, high contrast, high energy
  • Analogous — neighbors on the wheel, naturally harmonious
  • Triadic — three evenly spaced colors, balanced and vibrant
  • Split-Complementary — a softer take on complementary, less tension
  • Monochromatic — one hue, five shades, always elegant
  • Random — for when you want to be surprised

Found one color you love but the rest need work? Lock it. Hit generate again. The locked color stays, and the rest regenerate around it. Keep locking and regenerating until the whole palette clicks.

When it does, export it. CSS custom properties, Tailwind config, SCSS variables, or plain JSON. He Mona-polized the good ones. (Sorry. We’re a dad-and-daughter operation. The puns are non-negotiable.)

The Converter Nobody Knew They Needed

The Converter tab takes any color format — HEX, RGB, or HSL — and shows all three simultaneously. Auto-detection means you don’t have to tell it what you’re pasting. Just throw #3B82F6 or rgb(59, 130, 246) or hsl(217, 91%, 60%) into the input and get everything back instantly.

One-click copy on every value. It’s the kind of feature that saves you maybe 15 seconds each time, which adds up to roughly a thousand hours over the course of a career. (We didn’t check that math. Don’t use the compound interest calculator on it.)

The Eat-Your-Vegetables Feature

Nobody wakes up excited about WCAG contrast ratios. But if you’ve ever squinted at light gray text on a white background and thought “this can’t be accessible,” you were probably right — and the Contrast tab will tell you exactly how right.

Pick a foreground color and a background color. The tool shows your contrast ratio, a live preview with sample text, and whether your combination passes WCAG AA and AAA standards for both normal and large text. Green means go. Red means your users are going to email you.

There’s a swap button for quickly checking the reverse combination, and both colors accept hex input or native color pickers. It turns a compliance requirement into a 10-second check.

Your Colors Stay in Your Browser

Everything runs client-side. The color math, the palette generation, the contrast calculations — all JavaScript, all local. No server calls, no accounts, no cookies, no tracking pixels.

We mention this in every product post because it matters in every product post. Color tools seem harmless, but design workflow data — which palettes you generate, which contrast ratios you check — paints a picture of what you’re building and for whom. On EasyWebTools, that data doesn’t exist outside your browser tab.

What’s Next

We’re down to one more tool in this phase — an image compressor — before we move into the next batch. The developer tools section is filling out nicely: JSON formatter, hash generators, base64 encoding, and now a proper color toolkit.

If there’s a design or developer tool you wish existed — or if your favorite color harmony is “whatever the client picks after ignoring the palette I spent three hours on” — we’d love to hear about it.

In the meantime, go pick some colors. Da Vinci never finished his machine, but we finished ours.