How Palette was made

Palette is an open source lightweight color picker for the most famous
color schemes, like Material Design, Flat UI, iOS, Windows Phone etc.

Despite being color blind, I like apps and websites with the right selection of
colors. And sometimes when starting a new project it’s easier to pick a color
palette from the existing ones. Or, if you want to meet the guidelines for the
certain platform - you’d better use the colors they offer.

I used flatuicolors.com for the excellent Flat UI
palette, I used materialcolors.com for picking
Android colors, I used Tango and Solarized when I configured by terminal and
tmux colors. However, I won’t be using those websites anymore.

a pragmatic solution

Let’s put several really good palettes in one place. Only well-known palettes
that are described in some guidelines. For your own custom palettes why not use
Adobe Kuler, which ironically doesn’t use Adobe Flash anymore?

Of course, it should be responsive and touchscreen-friendly.

Now, if it’s possible to copy data to clipboard automatically - do that. If not
- help user to copy it manually with Ctrl+C. After all, how long it takes you
to press Ctrl+C? I bet it’s faster than the animation shown after the color
selection at flatuicolors.com.

And if there is no JavaScript available (yes, lots of people use NoScript) -
just show the color codes and let people either enable JS, or copy the colors
manually.

markup

I defined all the palettes in _data.json and rendered the color tiles in
index.jade. I used harp to build the web page. After the compilation is
done - the static web page will be filled with colorful divs grouped into
the palettes.

Navigation is done by good old anchors, so it works without javascript. Each
palette has a unique anchor, and header navigation menu just contains links to
those anchors.

Flex boxes made it possible to fill the full screen with the tiles from
one palette and to center/stretch elements without much pain, as it normally
happens with div/float.

javascript

No jQuery for this project. We target on the latest browsers and using
techniques from youmightnotneedjquery.com
is a quick way to make your website lightweight.

When user clicks on the tile - we try to select the color element’s text. So
the only thing left to the user after he clicks on the color - is to press
Ctrl+C. Selecting text of the element is easy:

We try to copy the current selection (the one we got after the previous snippet
of code) into the system clipboard. If the browser supports it - we go further,
and do a small animation to give user some feedback that the color was copied.

If not - we fall into the exception handler and leave the text selection as it
was letting the user to press Ctrl+C.

Clipboard API works in recent Chrome and Chrome for Android. Also people
mention it works in Opera, I haven’t tested it.