Categories: Codepen
Tags: Font-awesome, Sass, JavaScript, jQuery, jscolor, tinycolor
Well, I can’t say that this palette generator page is my original idea because I got the design inspiration from another palette generator website, but I definitely wrote my own code. There were several cool features about that site that I wanted to emulate:
So I used several JavaScript tools (jscolor for the color picker, tinycolor for manipulation of the colors in JavaScript, and jquery for drag-and-drop) to build a functional sort-of replica that I can now use for picking a color scheme for future projects.
I also added two extra features that I really like: the sliding bar on the right side lets you use the buttons to adjust the color settings by any percentage you want, and the animate button generates new colors every 2 seconds (but that setting can be changed). Really awesome! :)
I organized the layout into an .intro
div and several .col
divs. I imported
Font-awesome to use with the buttons (of which there are many!). I used jscolor
as a color picker by adding a class jscolor
to the HTML markup on each column:
<input class="jscolor {hash: true}" value="#0000FF" />
. jscolor allows you to
set an arbitrary initial color using the hex code as shown above.
Gosh I love Sass, and using it here really helped! Not only did I use Sass variables,
but I also utilized the built-in color functions: darken()
, lighten()
, saturate()
,
invert()
, grayscale()
, adjust-hue()
, and complement()
. Although color manipulation
was done with the JavaScript plugins, I used these functions to style the buttons nicely.
I also used a media query @media screen and (max-width: 730px) {...}
to hide some buttons
and options on smaller screens.
I also used an icon gallery called Font Awesome which added some visual flare to my buttons.
I used two JavaScript libraries on this project:
First I wanted to be able to change the color of any column with the color picker. The JavaScript code for this is quite simple, actually:
The function updateColBg
updates the background-color
of the column of the color
picker using the .toRgbString()
method of tinycolor. The checkLightness
function
determines if that color is light or dark. If it is light, the text color of the
column becomes black. Otherwise, the text color becomes white.
That’s great! Now I can pick any color I want for each column. But what if I want to generate all random colors? Well, the first step is getting one random color:
By the way, the opts
object passed in as a parameter contains boolean variables
regarding which, if any, options have been checked in the settings panel.
Cool, now I can get a random color with one call to getRandColor
and I’ll get
a tinycolor object returned, which includes lots of helpful methods.
But what I really want now is to randomize ALL of the column colors when I press
the global randomize button. Not to worry! We just bind a click event to the button
and write the callback function with a for
loop:
opts
ObjectRemember that opts
object? We get it from the checkOptions
function, which checks
all the options in the settings panel above the columns:
Now that we have the opts
object returned, we can pass it as a parameter to another
function, getColorCombos
, which uses the methods in tinycolor.js to get sets of
colors (like analogous, monochromatic, or tetrad colors) given a starting color.
Note: I added the complement to the tetrad colors to get a full 5 colors.
Now that we know which of the color combinations we want (if any) given the opts
object, and we actually have all of those colors as objects, we can check which
color we need in the for
loop above: currentColor = checkCombos(opts,combos,i);
.
Alright! Now we have a way to get all random colors for the five columns, including optional color combos. But now we want to be able to modify all the currently displayed colors of the five columns at once with buttons such as lighten, darken, saturate, spin, etc.
In order to do that, though, we need to be able to modify an individual color. We
do so with a function called performColorOp
, which takes a color, an operation
(like lighten, darken, etc), and an integer percentage for adjustment as parameters
and returns the modified color.
Now that we can modify a color in JavaScript, we can write a function to adjust all
displayed colors with a given command. We again use a for
loop and then get a
var newcolor
inside the loop by calling performColorOp
:
Sometimes we’d like to adjust the transparency of a color. With a range input in the HTML markup, it’s easy to specify via a jQuery event binding:
After the transparency is specified through the HTML <input />
tag, the color’s
alpha
value (the opposite of transparency) is set with var alpha = 1 - tp
and
then currentColor.setAlpha(alpha)
. Note: in my example, the input is scaled
from 0 to 1000 for smooth scrolling on the input.
The column background is also updated just like last time, and the transparency slider and numerical percentage shown is also updated via a simple function:
The color picker color is similarly updated:
Let’s say instead of randomizing all the colors, we want to adjust them via one of
the top buttons (lighten, darken, etc). Remember the onGbAdjBtnPress
function
from before which used performColorOp
to change the color? We simply bind the
events now and pass in the command to perform:
Binding an event to buttons on individual columns to randomize or manipulate a single color is simple and analogous to the global functions discussed above.
I added my own custom animation feature which displays new random colors every
given interval (default 2s
).
I did some research on jQuery UI to see how to get things to drag and drop. It turns
out the library is easy to use (just like jQuery) after importing it. I simply
identified the containing element and used the .sortable
like so:
Note that .move
is the element that is clickable for moving.
Wow, definitely a lot! I think this project turned out easier than I initially suspected, which is unusual. However, I did learn to work well with third party JavaScript tools and integrate them with my code (including scrutinizing the documentation). I learned that adding features takes time, especially when it comes to working out all the bugs.