Sorry about the long, step-by-step tutorial above. I had to do it to demonstrate that this simple thing of dealing with colors can be exhaustive, specially when we don't have a designer-force to give the shades for us.
To get this topic started, from now on, we're going to call the "tones" as "shades", ok? Semantically speaking, that's what they are. Tones are forks of a color, not necessarily darker or lighter, while shades are supposed to be a progressive mutation of that color necessarily with lighter or heavier weights.
Almost every website, app or system implements shades of colors, even when developers are not aware of that. These apps can have a main gray, and for the titles a darker shade is used whilst the paragraphs go with a lighter one. Same thing for buttons, modals, heroes, and almost every component out there.
Thankfully, introducing Reshader is the easiest part of this article. Shortly, it is a very new library—at the moment I'm writing this, I've released it publicly just a few days ago—to get the shades of colors. Its API is minimal, intuitive and well documented.
Moving straight to the hands-on, I'm going to use the same app/landing page we've built earlier to demonstrate how Reshader can optimize the process we used before.
First things first, let's install Reshader:
yarn add reshader or
npm install reshader is enough. The only dependency is the Qix-'s Color, which is bundled in the installation. If you want to implement it with RequireJS or in your
window, I'll invite you to manually download the distribution file.
After that, let's jump again to the
colors.js of our app. With those same main colors, all we have to do is import Reshader and get the shades using it:
And by applying these new colors and palettes, this is our new look and feel:
You might have noticed that things messed up a little, and you're not wrong. Essentially, this is what happened:
- Reshader automatically generates shades based on the given color progressively and consistently. We are no longer dealing with tones—random forks of a color,—but real shades. Learn more.
- The button is barely visible, the border isn't bold anymore and the background doesn't look yellow because of Reshader's default options.
Let's fix this.
[numberOfVariations is] the number of variations you want to extract out of the color you entered. This option will get both lighter and darker shades in the same amount, meaning that if you set it as
10, it will get you 10 lighter shades and 10 darker shades.
To prepare you with some understanding in advance, previously, the
yellow property returned an array with three elements within. The first one was the lightest shade, the second one was the main color, and the third one was the darkest shade. As I said, we've aimed that shape to have a logical, cohesive palette of the yellow color.
Fundamentally Reshader was designed and outputs based on this same logic. As you saw in the gist above, we're picking the
.palette property of the
reshader's function and setting it to our colors. This
.palette returns an array with the shades and the color you passed in the first argument of the
reshader's function. And as you may guess, it's sorted from the lightest shade to the darkest, not skipping the given color. Meaning that
yellow is the lightest shade and
yellow[yellow.length — 1] is the darkest.
Getting back to the
numberOfVariations… by default, its value is
5. According to the documentation, this means that it’ll get 5 lighter shades and 5 darker shades of the given color. (By reading this out loud, I think there’s an opportunity to make this option name better.)
That being said, thanks to the
numberOfVariations option, we no longer have 3 variations of the yellow color anymore. The amount of variations of the other colors changed as well, meaning that now they all are arrays of 11 elements: 5 lighter shades, the main color and 5 darker shades.
By changing the wires a bit on our
Button.js file in accordance to the Reshader output (changing the indices), this is our new visual:
Pretty similar to the last results, right? To highlight better how simple managing colors with Reshader is, let's remove a few colors of our brand's palette. Now it will only consist of
And after refashioning the landing page with these new colors and shades, this is how it looks:
Easy, ain't it?
The key differences of Reshader's approach to the manual one are:
- You don't have to worry about the shades anymore. They just work.
- It's easy to scale and maintain.
- Getting different results depends only on changing the options of Reshader's API.
- As I mentioned before, the shades will always be consistent. Meaning they'll always be darker or lighter versions of the given color. This sounds confusing, right? But what I meant is that when you pick a color by the eye, it's not a robot projected to lighten or darken a color. It is very arbitrary and oftentimes people that are more into design will spot these color inconsistencies with ease.
- Theming gets easy to achieve.
- Accessible colors are easy to achieve as well. There's an option called contrastRatio that you can play with to get accessible palettes.
But as usual, life is not a bed of roses. I have to be transparent and highlight the main downsides of using Reshader at the current state:
- If you're pairing with a designer, in order to use Reshader, you really must pair with him and I mean it. The process gets rougher to his side: basically, he has to pass you the main colors and you have to pass back the shades of them which were generated by Reshader. Unfortunately, at the moment this article was written, there was no out-of-the-box shortcuts.
- Although you can do some magic tricks to get it working with your CSS/SASS/LESS environment, Reshader was initially designed with css-in-js in mind. This means that you're gonna have some extra effort to translate its outputs into variables of different style systems.
For both cases, I promise I'm thinking in solutions. Feel free to submit your ideas to the Reshader's repo on GitHub.
Please, just don't run
reshader several times within your
render method and you'll be fine. Read more.
The future of Reshader
Reshader is very fresh. Though its API is already stable, there are several ideas on my mind of features that'll optimize the process of handling colors even more. As I said before, currently I'm focused on figuring solutions for the current most common problems the library has.
Apart of these solutions, I'm collecting feedback to pinpoint the features that are requested most by fellow developers. Again, >feel free to submit your ideas.
Ideally, Reshader will come in handy mostly for projects that cares with colors and operates with the css-in-js approach—specially those without a design crew. Also, if somehow you want to programatically generate shades of colors, it'd be a way-to-go.
If you have any questions, write a comment and I’ll respond as soon as I see it.
Source : https://medium.com/@chiefgui/managing-scalable-consistent-colors-in-your-css-in-js-app-with-reshader-ab29f03f1a35