Front end application to create color themes
https://color-themes.surge.sh/
Developed as a personal project while following Barcelona's IT Academy React Front End Path.
Just click on the play button to generate a 5 color theme, choose from different color harmonies in the sliding menu. Once you find an interesting theme, you may download a PNG with the colors, download a JSON, or just copy the hex codes of individual colors.
Project created with:
- React for building all the UI. Working exclusively with functional components and React Hooks: useState, useEffect, useRef.
- Chroma-js for color conversion and interpolation.
- Canvas API to generate a PNG image with the color theme.
- CSS Flexbox responsive layout.
- Source Code Pro font, from Google Fonts
Clone and install it locally with npm:
mkdir color-themes
cd color-themes
git clone git@github.com:pyrenaicus/color-themes.git
npm install
npm start
From an initial random color, generate a palette of five colors according to different color harmonies1:
- analogous
- complementary
- split complementary
- monochromatic
Colors were initially expressed in HSL coordinates as it seemed the most intuitive way to deal with color harmonies (complementary and analog colors can be found just applying a rotation on hue component). That was in theory, because right away in the first tests, problems arise, due to the differences between actual physical lightness of a color and perceived lightness.
Some interesting articles on this issue:
- Color Spaces for Human Beings by Alexei Boronine, creator of HSLuv.
- Hue-angle transitions by Riley J. Shaw.
- How To Avoid Equidistant HSV Colors by Gregor Aisch, author of Chroma-js.
- Mastering Multi-hued Color Scales with Chroma.js by Gregor Aisch.
A solution was to interpolate color transitions in CIE Lab color space using chroma.js, a small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales. Chroma.js is pleasantly well documented and easy to use.
An analogous color palette is a group of colors that are located close to each other on the color wheel, often those are hues around 30 degrees apart from the base hue. Analogous color schemes are found in nature, and are often soothing and relaxing to the eye.
A complentary color is one that exists in the opposite side of the color wheel. Complementary color schemes are contrasting and energizing by nature.
Monochromatic color schemes use only one hue, varying only it's lightness and saturation.
The idea is to create a random color, and from it, different color schemes
Using chroma.contrast to calculate contrast ratio, when contrast is below minimum, text color changes to ensure it's readable.
Right now the app is a minimal working solution developed during a 2 weeks sprint. To keep on adding functionality like:
- pass color codes to URL search string with react router, so you can share a color theme bjust y sharing a url.
- User registration, allowing to keep a record of favorite color themes. Save the data to Firebase.
- Create color themes with variable number (btw 3 and 12) of colors. This will require a rewrite of almost everything.
- Add a page with info about color harmonies.
chroma.js used for all color calculations.
I read through some interesting posts on the subject, to list just a few:
-
Canvas with React.js, this post helped me a lot to create a PNG with the color theme.
Have a look at the Trello board of the project for more references: https://trello.com/b/Q91AixOQ/sprint-9
Footnotes
-
Colours are said to be in harmony when their juxtaposition produces a satisfying unity or balance to the viewer. Colour harmonies can be created by using two or more shades of the same hue (a monochromatic harmony), or with colors that exist on opposite sides of the color wheel (complementary harmony). ↩