Branding
Background
"Palit" is a play off of the word "Palette", and a color palette generator website done for my Intermediate Web Design class. The project was completely open-ended, so I decided to take my first steps into learning Javascript by creating a website that required a computational aspect, going beyond using JS for just styling.
I was drawn to using color as I enjoy Adobe Color's website and knew dynamically changing hex codes should translate well with a web design project. I decided to combine changing hex to RGB and back again, creating a formula on my own to generate color palettes based on an input, and to come up with multiple styles of user input to create the color palette.
Branding
Development
The first challenge was turning hex codes into variables that could be run through a function to alter them. After researching online for different methods of approaching this obstacle, I settled on transforming hex codes into individual RGB values in order to change each individual value into another.
Once the hex to RGB was completed, the next crucial step was to create formulas that would manipulate each Red, Blue and Green value into another color to create a palette. The first color value manipulation formula I created was to take the original color and make it a shade lighter and darker. This was done by either adding or subtracting to each RGB value.
I didn't want only monochromatic color palettes, so my next step was to create a formula that would find a close complimentary color to the one selected. This formula was done by observing the change of values as colors move across a color wheel, then done through creating formulas by hand and verifying it through trail and error. In extreme RGB values, the additional color will be closer to an analogous color instead. I am proud to say I have created all the palette formulas on my own with no outside help or reference.
Branding
Final Touches
After creating formulas that can generate a color, its complimentary color, and two shades of each, I needed to create inputs to generate the palettes. I started with a randomizer and a hex code input, but knew I needed a dynamic color picker to make the site more user friendly. This was the only source code that I used, called Spectrum by @bgrins on Github. Link.
After all the inputs were connected with the formulas, displaying results and designing the rest of the website was completed. Please click below to view the website.
