Color Palettes Generator ColorKit Reviewed

Why review an online color palette generator?

Some of you are maybe thinking, isn’t LayerWP all about WordPress? You’d be right, that’s what I do, I review WordPress themes/plugins. What you might be surprised to know is, ColorKit is built on WordPress.

So, in my mind’s eye, it makes the cut in terms of a review. Plus, I’m super interested to find out what it offers.

To those of you who think WP has limitations, then this review of a WordPress based color palette generator may end up making you rethink your stance.

I’ve had a brief play around with ColorKit prior to the review. I honestly cannot believe the functionality so far, and to think this is all WordPress based?

It’s mind boggling to say the very least, at every step of the way, I’ve been oooo’ing and aaaa’ing at functionality and scratching my head at how the heck did they do that?

Or, wow that’s a nice feature.

I scratch my head a lot. Which leads me onto colors. Weird, right? From scratching my head, to colors.

I’ll take a stab in the dark and say some of you may well be nodding your head in agreement.

Colors are HARD!!!!

Choosing a color scheme for a website is difficult

With each new idea that pops up into the old brain box, whether it’s a niche to go for, content ideas, layout etc, all of it doesn’t matter one single iota, unless you generate a color palette.

Colors are emotive, they can scream a brand at you from a hundred paces, they’re used to such a wild effect, and you probably don’t even realize it. From different hues of colors to demonstrate feelings, and so much more besides.

Picking the right color for your website design, well that can take time, experimentation, and some trial and error. That’s where ColorKit comes in, its whole purpose is to make the generation of a color palette simple, fun and useful for users.

How much is this going to cost?

There’s a wealth of online palette generators, some free, some premium. ColorKit at this stage is completely free to use, when that changes? Who knows.

For now I’m going to enjoy it, and share it with you. I think you’re going to like it. There’s quite a bit to get through, so let me show you what ColorKit offers, and then you can make your own mind up whether to add it to your design arsenal.

ColorKit color tools

There’s a total of seven color tools available, each one is available to play with by clicking on the Tools menu item. I’ll cover each one, so you know what to expect.

First up?

The color palette generator

Fairly self-explanatory, the color palette generator, randomly creates palettes for you to view. Clicking the “Generate” button, till something tickles your fancy. Nothing special there right?

There’s a bit more to it than that. Take a look at the below to see what I mean:

As you can see from the above screenshot, I’ve hovered over a color, as a result, there are some options to choose from. We have the hex code for the color #5a8bce, clicking this automatically saves it to your clipboard, which is handy!

Underneath the color information, we have an option to randomize the color, lock it in place, and if you need to, delete it entirely.

The last circle, underneath the delete icon, allows you to drag and drop the color, to create your very own order. If you need to add colors to the one that’s caught your eye, clicking either plus icon will add a new color.

Adjusting your generated color palette

So you’ve used the color palette generator, and perhaps you need to make adjustments? Clicking on the “Adjust Colors” button, duplicates your color scheme directly underneath your palette. See below:

This is incredibly useful, you need to compare the result. Using the new tools available you can adjust the Hue, Brightness, Saturation, and Temperature. When you’re at the right mix, simply hit “Apply” and save your newly generated palette.

Need some color inspiration?

Not everyone is a designer, nor does everyone have an eye for color, ColorKit offers a selection of color palettes to whet your appetite, generated by other users.

Choose a palette you like the look of, then make changes as you see fit, and save it! If you create an account on ColorKit, you can add generated palettes by clicking on the “Like” button and saving them to your account, see below for some saved ones from my account.

As it stands at the moment, ColorKit is completely free, so it’s worth signing up to save palettes and refer to them at a later date. Useful, if you have lots of clients or projects you need to whip up color schemes for!

It’s worth noting here, when you save a color palette, it actually gives you a URL with the color codes in it, take a look at this one click here to view the palette.

Why is this useful to you? Well, let’s say you work as part of a team, and you need to share color ideas, send someone the link and discuss it. Love this feature, it’s a great idea.

When you hover over the “Export” button, you get two options, see below:

The first option is the URL, this performs the same function as the Save button next to it. The second is “Save as PNG”, and this is what you get:

The Gradient maker

Need to generate color gradients? ColorKit has your back. A straightforward process, but with another super cool feature. For now, let’s take a look at the user interface, see below:

Here you can choose different colors, randomize colors, and even add colors for your gradient, I’ve had a quick play around with it, see below for the result:

Notice anything? Yes, we have the URL for sharing etc., and save as a PNG. A new addition, Copy CSS. So if you’re comfortable with code, you can click to copy the CSS and add it to your website’s CSS file.

Take a look below at the code:

The above image was generated by Code To Image, the same people behind ColorKit! It makes sense to use it in this case, and if you’d like to learn more about Code to Image, read my review here.

The Color Picker

What if you already have a specific color in mind? Like a base to work from? Perhaps your client has a logo in a specific color? See below:

Another killer feature for ColorKit! In the example above, I picked a random color, and the above information spewed forth, which is sweet.

Information such as color values in RGB Percentages, HSV, LAB, XYZ, LUV and more. Couple that with palettes showcasing the difference for Brighten, Darken, Desaturate, Hue and a lot more.

The Color contrast checker

Let’s say you’ve picked your colors, and you need to check the contrast of them against WCAG (Web Content Accessibility Guidelines), again another great feature from ColorKit.

With color contrasts comes great responsibility, it’s your duty to ensure your website color scheme meets accessibility standards.

What passes in terms of accessibility? What fails? Heck, I don’t know. ColorKit does. See below for an example of a pass:

Here’s an example of a WCAG fail:

Note, this is done in real-time, so using the color wheel for foreground, background, you can see pass/fail accordingly.

Using this tool, you can ensure your website is compliant with WCAG, and rest easy, knowing your website is accessible to people. Honestly, this tool alone is worth taking a look at.

The Gradient palette generator

If you need to generate a gradient palette, you can. Similar in principle to the color palette, here you can select how many steps from one color to another, in my example below, I’ve chosen 10.

There are options to randomize the gradient, pick different start/end colors, as well as the ability to open in the palette editor and export it.

The Color shades generator

Have a single color? Want to know what tints and shades are available? Using the color picker at the top, choose your color, and sit back as ColorKit does the rest for you:

Color palette from an image

If you’re looking to generate colors from an image online, ColorKit, once more, has you covered. If you’ve seen an image from around the web and want to know what colors are the most prominent, you can. Take a look at the below:

This is such a cool feature, I don’t have to sit there and use an eye drop tool to pick out colors I like the look of. I uploaded an image and chose the amount of colors I’d like to show, see what happened:

Probably not the best example with my ugly old mug in it, but it serves a purpose. The image I uploaded wasn’t particularly big, that’s why I did it.

Size wise, it was only 400px by 400px, but still the output was pleasing to the eye (not because of my face) but the colors it generated.

It gets better, what if you wanted to share your color schemes from uploaded images? Post them to Instagram, or something? See below:

If you hover over Create Collage, you’ll see a popup, with some options for exporting images (please note I’ve changed the image, as my face is too much). The first collage option, will center the colors in front of the image like so:

The second, will place the color palette to the right of the image:

There are also options for size of the collage, options are 1×1, 16×9 and 9×16, when you’re happy with your layout and size, simply download as a PNG, here’s mine at a 1×1 ratio:

Perfect for sharing with others, your design team, or pin it to a board for your inspiration. This is a great feature, and the result looks awesome. 

For the record the image used was a Photo by Benjamin Behre on Unsplash.

ColorKit verdict

Switching off my amazed that ColorKit is powered by WordPress mindset for a second. ColorKit is a fantastic tool, there’s plenty on offer, and I’ve bookmarked it, and I intend to use it.

I only recommend what I’d use, and personally? I’d recommend ColorKit, whether you’re a web designer, or designer in general, it’s a source of inspiration, discovery, and dare I say it a bit of fun.

Turning my mindset that ColorKit is powered by WordPress back on, I’m staggered. For those of you hardcore developers, you probably know all the ins and outs of producing a website such as ColorKit.

As a user of WordPress (not a developer), I’m awestruck by what is possible using the platform. If someone asked me to name a site, powered by WP, to showcase what someone can do with it, well, you can guess my answer.