ferdychristant.com Open in urlscan Pro
52.4.145.119  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Open in app

Sign up

Sign In

Write


Sign up

Sign In




COLOR FOR THE COLOR-CHALLENGED


READ THIS IF YOU SUCK AT PICKING COLORS

Ferdy Christant

·

Follow

Published in

Ferdy Christant

·
27 min read
·
Apr 20, 2019

151

3

Listen

Share


INTRODUCTION

Rather than placing web folks into the bucket Developer or Designer, I think
many people would find themselves somewhere in the gray zone in between, not at
the extreme ends.

I most certainly feel that way about myself. I’m primarily a developer, yet with
some creative tendencies (I used to draw a lot when I was younger and I’m
passionate about photography). I also like to think that I have acquired
somewhat of a taste for good design. Meaning, I can tell apart good design from
bad design.

But I definitely fall short of the skills of a schooled and/or talented
professional designer to create a good design. They operate at another level. So
that means that in cases where I’m tasked with design work, I have to
compensate. Fake it, basically.

When you lack specific design skills or talent, it’s very well possible to
compensate for it, here’s a few strategies:

 * Engineer it. Several aspect of design are bound by rules and guidelines, all
   of which can be learned. Examples I can think of are in layout and
   typography, there’s several best practices one can simply reuse. Part of
   design is math.
 * Brute-force it. Although inefficient, you can keep re-iterating until you
   have a design that is good. The sheer determination approach.
 * Steal or reuse it. Preferably in ethical ways. The go-to method. This could
   mean reusing an entire framework (say, Bootstrap), an approach, or to take
   inspiration from the great work of others, and then tune it to make it your
   own.

So there are ways to bridge the gap, but there is this one aspect of design that
I cannot seem to master or fake: Color. Color has to be the most artful and
emotional aspect of design, making it very hard to replicate. And it’s not just
artful, it’s also technically complex. Color theory is hard, and full of
pitfalls.

Simpler put: when I’m tasked to pick a color palette or scheme, I typically
iterate forever, and still will be displeased with the result. I’m aware of the
many tools that aid in this task, yet those results often still break down when
put to real-world usage.

In other words, I’m color-challenged. And if you are too, maybe this article has
value.


SHOULD I BOTHER READING THIS?

This is going to be an extensive article with an overload of text, and color. I
better try to sell it to you now, leaving you to decide whether this is worth
your time. Here are the main parts:

 * Chapter I:
   The release of a large, very widely usable ready-to-go color palette that is
   attractive, well-behaving and extensible. It is based on the fantastic work
   done by the creator of Open Color, with a few extensions added.
 * Chapter II:
   A theoretical part on how to judge and rank color palettes by various
   characteristics, strengthening our understanding of color.
 * Chapter III:
   Discussing the extensions I added to Open Color, and why.
 * Chapter IV:
   Probably the most interesting part of the article: squeezing optimal value
   out of the color palette by means of many advanced real-world tests and great
   helpers to utilize the color palette the best we can.
 * Chapter V:
   An explanation of techniques to extend or replace the palette with your own
   hues, in a way that keeps the integrity of the entire palette intact.


CHAPTER I: THE COLOR PALETTE

For those wanting immediate value, let’s first release the end result, a big
palette of 234 colors (18 hues x 13 luminosity steps). It is an intentionally
large and wide color palette so that its potential applicability is wide. It can
be used for web and app design, illustration, and possibly also print.

All hues and luminosity steps in the palette

A quick explainer on how to read the palette:

A single hue in the palette

A single hue has 13 steps (I’ll explain this weird number later on) in its
widest form, but I’m also sharing compressed sets of 7-step and 5-step palettes.
Each color has a name, numbered from high to low luminosity. The hex code is
shared for each tone. The number below the hex value is the luminosity value
which indicates how bright the color is perceived. Luminosity is not to be
confused with brightness or lightness as found in the HSL color system. The L in
HSL does not represent luminosity as experienced by human vision.

Below each color row you’ll find a gradient band that runs a smooth gradient
based on the 13 steps. This allows for two things:

 * In the odd case where you need an in-between value, you can pick it from the
   band and do so in a way that roughly respects the curve.
 * It’s a great checksum for the consistency and integrity of the palette. If
   there’s any weird jumps in hue, saturation or luminosity from one step to the
   other, the band will not appear smooth.

I don’t know about you, but the addition of the gradient band to me creates the
illusion of the main color tones being a gradient as well. I can ensure you that
they are solid colors. Color is weird. Or brains are.

Here’s the 7-step palette:



This smaller palette has the same begin and end value, just less steps in
between. Here’s the even more compressed 5-step system:



Now, let’s share this palette in more useful ways, allowing for easy integration
in your workflow. For example in Photoshop:



I’ve created a repo here. The palette is shared in the following ways:

 * .aco: Photoshop
 * .afpalette: Affinity Designer
 * .ase: Adobe exchange format
 * .json: For scripting
 * .php: PHP array format
 * .png: high-res screenshot
 * .scss: For (S)CSS integration
 * .sketchpalette: Sketch (did not test it, don’t have a Mac)

Take and use as you please. I do want to put a giant disclaimer here. The repo
should not be seen as a fork of Open Color. I simply needed a place to store
these assets publicly. I named it “Colar” because I needed to name it something.
It’s not a repo I will maintain, it’s a one-time dump of assets to supplement
this article.

Likewise, I do not claim any ownership or credit for the end result, the truly
hard work has been done by @Yeun of Open Color. Be sure to thank her if you use
this. This article takes her fundamental work and:

 * Extends it to make it suitable for wider usage (more steps, more hues)
 * Discusses advanced methods to utilize the palette
 * Discusses ways to add your own hues in a consistent way

Maybe some of these ideas make it back to Open Color, maybe not. In any case,
Open Color should be seen as the active project, and credit belongs there.


CHAPTER II: CHARACTERISTICS OF A COLOR PALETTE

With the palette sharing out of the way, we’re now going to discuss what makes
for a good color palette. We’ll find out that this depends on intended usage,
and we’ll also discover that it’s quite impossible to serve all goals, as they
can be at odds with each other.

Once again I need to praise the work of others. Much of this chapter and my
newfound understanding of color systems is based on this article, which I
consider required reading:


DESIGNING SYSTEMATIC COLORS


HOW TO MAKE THEMABLE, FLEXIBLE, WCAG 2.1 COMPLIANT COLOR RAMPS FOR A DESIGN
SYSTEM

uxplanet.org



With this in hand, we’re going to explore the following characteristics of a
color palette:

 * Attractiveness
 * Completeness
 * Themability
 * Equal distance colors
 * Accessibility
 * Extensibility

We’ll be discussing these characteristics based on the Open Color palette, yet
you can use this understanding to analyze any color palette.


ATTRACTIVENESS

A color palette has to look good, it has to be attractive. A palette may score
well in secondary aspects, yet if it looks bad, everything falls apart. So I’d
say attractiveness comes first, before anything else.

Part of attractiveness is subjective of course, based on opinion, culture,
fashion. Yet there are still ways to distinguish one palette from the other when
it comes to attractiveness, or perhaps elegance. To explain, I’m borrowing some
screenshots and conclusions from the aforementioned article:


Credit: https://uxplanet.org/designing-systematic-colors-b5d2605b15c

Above is Google’s Material Design red hue plotted on a saturation/brightness
scale. The values on the scale seem to appear without much of a plan. Worse, if
you look at the actual colors on the left, they seem all over the place. As if
three different red hues are mixed into a single set. It’s possible that some
advanced research has led to these color choices, but I most certainly am not
detecting any artistic thought or elegance here.

Now compares this to the Open Color red hue:


Credit: https://uxplanet.org/designing-systematic-colors-b5d2605b15c

Clearly the visual consistency is better here, supported by the elegant curve
that seems to have an artistic thought behind it. These curves are optimized for
each hue:


Credit: https://uxplanet.org/designing-systematic-colors-b5d2605b15c

You can’t apply the same curve to every hue because human vision does not work
that way. The creator of Open Color has handpicked ideal, elegant and attractive
tones on curves optimized per hue. Doing this is not only a lot of work, it also
demonstrates a deep artistic understanding of color, that I surely lack.

This is why as it comes to attractiveness, I rank Open Color very highly, and
for my personal needs, the highest.

Optimizing for attractiveness may come at the expense of other characteristics.
Whether this matters at all, depends on your usage.


COMPLETENESS

A simpler characteristic to judge a color palette by is color completeness. This
simply means it has the hues that you need. Open Color is fairly complete as a
general purpose palette yet is lacking in some ways. For example, it lacks any
browns. A big part of my extensions is adding a few hues, as well as explaining
how you can add even more, easily.


THEMABILITY

The themability of a color palette comes down to consistency in luminosity
values across hues. Example:



Say we make a button and give it the background color Teal-6, with foreground
text using Teal-1. If we’d now make a second button using the same color steps
from a different hue, we might use Green-6 and Green-1, respectively.

What we do not want is for such a hue switch to lead to a big difference in
contrast. For contrast to remain consistent, for the sake of legibility and
accessibility, the luminance of each color should be the same (or close).
Green-6 should be roughly as “bright” as Teal-6. Which is true in the example
above (check the luminosity numbers).

Does Open Color support this equal luminosity requirement across the board?

The short answer is that Open Color largely meets this goal. Not perfectly, but
largely so. The devil is in the details, so let’s dive a little deeper.



Above is a gray-scale conversion of the palette. At face value, there seems to
be quite a few brightness deviations, yet things are not as bleak as they seem:



In general, the palette has a roughly equal brightness with minor differences
being manageable. However, a specific subset of hues has larger deviations, and
within those specific hues, the problem cases are all in the mid-level colors.
The white block in the image above marks the problem cases.

Why are there luminosity inconsistencies specifically in that block? This
illustration does a great job explaining the root cause:


Credit: http://www.workwithcolor.com/color-luminance-2233.htm

On the right is a simplified color wheel as would be used in the HSL model,
where the main hue is at a certain degree of the wheel. On the left is the
gray-scale conversion with luminosity numbers.

To pick two extremes, yellow is at 94% brightness, blue at 44%. Perceived
brightness is not at all uniform at equal starting points, it depends on the
hue, as well as the saturation.

This has an important implication. If like me, you were happy with the HSL model
as a much more understandable way to manipulate color compared to RGB, there’s
some bad news. If you’re using the Lightness part programmatically, you should
realize that it does not take into account perceived brightness at all.
Perceived brightness is the result of all 3 values, not just the lightness
value. This means the following does not work:

 * Take two colors of equal brightness and manipulate both with the same
   Lightness change. The result will not be two changed colors of equal
   perceived brightness.
 * Take one color and manipulate its Lightness in equal steps (say lower 5 times
   by 0.1 Lightness). The result will not be a palette where the perceived
   brightness change between steps is consistent.

Guess which hues in our brightness test as marked by the white block are
problematic? The bright hues, running from teal to orange. These are simply hues
perceived as bright by human vision, there’s nothing you can do about it, other
than to reincarnate as a Praying Mantis. Yet you wouldn’t be able to read the
rest of this article, so let’s postpone that for now until after the clapping.

What can we do about this problem, and how much of a problem is it really to not
have perfect equal brightness across all hues?

Well, that depends on your goal. If you want equal brightness across the palette
in order to be one-to-one themable, you could throw out some colors, for they
are simply not suitable for it.

Yellow is a great (bad) example. If we would apply equal brightness rules to
yellow, Yellow-4 would roughly require a luminosity value of 0.3–0.4. We would
then have theoretical brightness consistency with the rest of the palette.

The problem: yellow at 0.3–0.4 brightness is already a dark orange, close to
brown even. So it fails to be a yellow after step 4, and then we still have
several steps to go. The theoretical consistency would be a case of “surgery
successful, yet the patient died”.

Rather than throwing out these colors, Open Color takes the approach of
following a different brightness curve for these bright hues. It favors color
completeness and attractiveness for these special cases, and I think this is a
great approach.

Does this hurt the palette being themable for these hues? Not necessarily. You
could have a mapping system in place, like below. We’ll use the example of a
button again:

 * Blue theme (background: Blue-7, foreground: Blue-1)
 * Yellow theme (background: Yellow-9, foreground: Yellow-3)

So just because these hues are not one-to-one themable, does not mean they
aren’t themable at all.


EQUAL DISTANCE

Here’s a characteristic of a color palette that can be important, but often
isn’t:



The question is: are luminosity changes to the next color step of equal size? Is
the luminosity change a constant?

No, they are not in this color palette. For example, the jump from Teal-1 to
Teal-2 is a luminosity change of 0.11, whilst the jump from Teal-7 to Teal-8 is
a change of 0.7. So it’s not a constant, and we kind of already knew this
because of the curves discussed earlier.

I can’t think of important use cases where this matters, it seems a theoretical
characteristic only, one that directly conflicts with our very first goal:
attractiveness.

There is, however, a secondary question you can ask here instead: is the
luminosity change of adjacent colors large enough for human vision to clearly
distinguish each color if they were put directly next to each other?

Here’s a use case where the answer to this question matters:


Source: http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=9

In charts and maps, the luminosity distance between color steps matters for
users to be able to distinguish them clearly from each other when used in close
proximity.

Does our palette support this use case? It depends. The luminosity steps in the
13-step system are too small for all of them to be used in this way. Yet the
7-step system would largely meet this goal, as it has larger jumps in
luminosity.


ACCESSIBILITY

When a color palette is used for the display of typography, and using the
palette colors for either the foreground text or background color (or both),
accessibility comes into play. Accessibility in this case refers to the contrast
between both colors in order to express how legible the foreground text is.
Legibility in turn is a function of said contrast, text size and how wide (or
narrow) you define your audience in terms of eyesight.

Well, no. Let me correct that last part. It’s a common misconception to think of
“poor” eyesight as a fixed physiological shortcoming affecting a subset of
people. It’s not just physiological, it can also be situational.

Imagine having a major hangover whilst being in full daylight outside staring at
your mobile phone of which you turned down brightness since it’s almost out of
juice. Is contrast still strong enough for you to read the text in these
conditions? The situation has reduced your ability to read text despite having
good eyesight in general.

I know, it’s a crazy example. People don’t really go outside.

So how does Open Color rank when it comes to contrast? To be honest, not that
great. I’ll go into more detail in another chapter when we test this, but for
now let’s briefly discuss high level conclusions.

Roughly, the first 3 columns are bright enough so that when you place dark text
on top of it, it would meet minimum contrast guidelines. For a few special
bright hues (like yellow), this may go into step 4 or 5.

The middle group of colors, about step 4 to 8, are deep, beautiful, vibrant
tones yet would fail the contrast test in most cases no matter whether you place
light or dark text on it.

Worse, not even the darkest 2 tones in the original 10-step Open Color palette
meet contrast guidelines when placing light text on it, exceptions aside. They
either don’t meet guidelines, or barely so.

The article I linked to earlier came to the same conclusion: Open Color does not
rank well when it comes to contrast. The root cause here is that we’re paying
the price of beauty. Revisit that article and see how alternative palettes that
score better in contrast also lack beauty, as subjective as it is. Color tones
are harsh, they lack elegance. Worse, they even have to throw some hues out, as
some can never comply with contrast guidelines (like yellow).

We won’t give up this beauty though, so time for some words of comfort. One of
my extensions is to add 3 new dark tones to each hue. This means that for each
hue, we’d have roughly 6 (sometimes more) steps that would meet contrast
guidelines in typography scenarios.

What about the middle colors though? They would continue to fail contrast
guidelines, but there’s no need to throw them out. You can use them for
non-typographic scenarios. For example, the border of a button. A shadow or
highlight tone of an element. A decorative panel that has no foreground text. Or
a non-UI use case, such as an illustration.


EXTENSIBILITY

Extensibility is kind of a nonsense characteristic of a palette. Of course you
can extend any palette with new hues. Yet you could consider how easy or hard it
is to do so whilst respecting the integrity of the palette as a whole. In the
case of Open Color, it’s not easy because it is based on hand-picked curves.
However, I did find a way to do so, which will be explained in the last chapter.


CHAPTER III: OPEN COLOR EXTENSIONS

Phew, that was a hefty chapter! This one will be lighter on the stomach, I
promise. Here I’ll detail out the 3 main changes/extensions I made to the
original Open Color palette:

 * Gray toning
 * Three new tones
 * Five new hues


GRAY TONING

Black, white, and gray tones in between are probably the most important color of
any color system, for two reasons:

 * It is usually the main color for text, which is often very bright (white) or
   very dark (black)
 * It is very often used for backgrounds, typical as very light grey or a dark
   close to pure black

Because of its very wide usage, it’s also a very “sensitive” color. As an
example, a light grey background can have a dramatically different appearance
based on a tiny change in hue, saturation or lightness. Strangely, gray tones
are some of the least neutral colors. You can test this yourself. Sample the
grays from a dozen or so websites. You’ll find out that there’s no such thing as
neutral gray, it’s a very opinionated color, an artistic choice with a large
impact.

Because of its importance, you could even consider taking blacks, whites and
grays outside your main color palette and manage them separately. I did not do
so, but it’s a strategy to consider.

Anyways, I made two changes to the “gray” hue:

 * I found it a very cold gray scale, so I warmed it up
 * I remapped the values themselves, as there were some inconsistencies in
   luminosity values (gaps)

The result:



As you can see, brightness changes are smaller on the outer ends compared to the
middle. This is to support a practical, highly common need. With grays, you
often need subtle tones with smaller luminosity jumps.

Outside the palette, I also have variables for pure black and pure white, for
edge cases. Pure black, for example, is great on OLED screens.

The gradient bar below the color blocks is useful here. If you need even finer
steps in between, you can pick them from the gradient bar whilst respecting
overal hue.


THREE NEW TONES

This is probably the most important extension to the original palette. I added 3
new darker tones to each hue. I added them to the end, thereby keeping the
beauty of the original Open Color values intact. The main reason for adding
these additional darker tones was explained before: to offer more options that
meet contrast guidelines.

As per the Open Color method, I picked the values themselves entirely manually.
I did so in Photohop, using the HSB system. For the most part, it was a matter
of taking the last color of the 10-step system, and then manipulating B. At this
point in the scale, the color is already saturated, therefore the need to also
change that factor reduces. Only in 3 or so cases did I have to change both. I
kept iterating this approach until I found colors that look right artistically,
as well as show consistent (or close) technical values for luminosity across
hues.

You may wonder why I added 3 tones, leading to an uneven total of 13 tones. 12
sounds like a more sensible number. I thought so too, until I faced a problem.

As chapter I shows, I’m also sharing compressed palettes, that have less tones.
When using 12 steps, you would be forgiven to think that delivering a 6-step
system is easy: just pick every other color.

Here’s why this won’t work. You want the compressed set to start and end at the
brightest and darkest steps of the larger 12-step system. The beginning and end
tones are critical for usage. If we spend 2 colors on the outsides, we have 4
colors left that we need to pick from the remaining 10 steps of the larger
12-step system.

How do you divide 10 by 4? You could skips tones (2, 3, 2, etc) but this leaves
luminosity gaps, it breaks the curve. You could also create entirely new colors
that sit between the existing known steps, but this undoes a lot of work of the
original palette.

So that’s why we have uneven numbers: 13, 7, 5. Uneven numbers have a middle.


FIVE NEW HUES

The final main extension is the addition of new hues, which are all at the
bottom of the palette. Here they are:



An explanation of each:

 * Choco: A warm to hot brown. Open Color originally lacks any brown.
 * Brown: A more neutral brown
 * Sand: A muddy gray-scale. Don’t underestimate this one, it scores
   spectacularly well when put to use. It has character.
 * Camo: Not my favorite, but commonly seen, here called “Camo”, others may call
   it “Olive”.
 * Jungle: Ignore this color, it’s a brand color for personal needs. If you use
   it, I will sue you with everything I got. Which is nothing.

As said, the last chapter of this article will discuss techniques to add your
own hues.


CHAPTER IV: TESTING AND PICKING

This is going to be my favorite chapter to write as it allows me to show a lot
of cool stuff. We managed to come to a large, attractive color palette that is
useful for wide usage. We did so by standing on the shoulders of others (Open
Color) and adding a few extensions.

This still does not satisfy all needs of the color-challenged. Colors only come
to life when seeing them in action (testing).

And there’s another problem. Picking! With 234 colors in the palette, there’s
still the task of picking good combinations from this subset. Which can be
tedious, iterative work.

To deal with both problems, I’ve built an extensive suite of test tools and
helpers. Unfortunately, it’s not open source as it’s part of a bigger project
that is not open source. However, ultimately it boils down to the generation of
some HTML and CSS from an array that defines the color palette. It should be
easy to reproduce.

Let’s go. Be prepared for a LOT of color.


RAMP TESTING

A ramp is a set of tones of the same hue (so no accent colors from another hue)
put together in a real-world test. Like so:



This particular test entails 3 different dark background tones, with various UI
elements placed on top of it, at different luminosity levels. It allows for the
quick discovery of the most attractive hues in a theming situation. Here’s all
of them:



My personal conclusions based on this test:

 * The blue hues don’t work well in this context, same for yellow and red
 * Pink and purple are unexpectedly attractive, even if a bold design choice
 * Other colors not mentioned yet are generally OK, a possible choice
 * Gray, Lime, Choco, Chocolate and Sand rock. They are gorgeous.


TYPOGRAPHY TEST

In this test, we’re using the colors of the palette as a foreground text color,
on both a white and black background. In typography, the safe choice is to use
gray tones for text, very dark or very light. This test aims to find out our
options to add some color to that. Let’s start with a dark background:



On black, there’s a ton of options that could work, and quite a few gorgeous
ones. In the previous test, the darker hues were winning but in this test, the
middle vibrant hues seem to win. Even a troublesome UI color like yellow turns
from weak to strong in this case.

Still, I’d use this in moderation. The trouble with dark themes is that almost
everything is calling for attention.

The same test on white:



Quite a few options to bring some spark to your design!


MULTI-HUE TESTING

Now we come to my favorite part of the test suite. Our palette has 234 colors.
If we want to discover an attractive combination of 2 colors, this leaves 234 x
234 = 54,756 options. So when color-challenged, you’d still struggle in finding
attractive combinations.

No more. Or at least it has become far easier. In my test suite, I can click on
any color in the palette. Next, a page opens with the selected color set as the
background color. On the foreground, 234 color tones are shown on the selected
background color. Example:



I intentionally picked a weird dark purple hue. As you can see, all 234 colors
are laid out on top of it, allowing you to see the attractiveness of the
combination. Not just that, also whether it meets AA or AAA contrast guidelines
(marked by the green and red labels).

Here’s how this drastically speeds up selecting color combinations from multiple
hues. Before, we had the intimidating task of picking from 54,756 combinations,
with no idea where to start. Now, we break up this task into a series of much
smaller choices:

 * Pick main hue (1 out of 18, but based on taste you can dismiss several)
 * Pick tone of the hue (1 out of 13, but more likely a choice of 3 or so tones)
 * Check test page. Probably half of the combinations is invalid due to contrast
   issues. Another 25% will be impossibly ugly. Focus on the remaining 25%.
   Since you can scan so many options in such a convenient matter, you’ll find
   what you want.

To me this is a game-changer, that really solves picking color combinations.
It’s not just speeding up the process, it’s also seeing options you wouldn’t
even have tried in the first place.

As you would expect, the very bright and very dark tones of each hue deliver the
most valid (contrast) options. An unexpected benefit of this tool, however, is
finding the edge cases of the challenging colors. Those middle colors that are
beautiful, vibrant, yet hard to work with as it comes to contrast.



See example. Choco-10 on Yellow-4 pretty much creates the M&M brand, and it has
excellent contrast. It’s not a color combination I would ever think of out of
the blue, but this tool reveals it.

Here’s a true edge case:



Indigo-2 on Pink-8. It’s bold, and not neccessarily attractive. The unexpected
finding here is that it meets contrast guidelines, which I totally did not
expect. It’s fun to find these edge cases and surprising outcomes. The accent
testing tool not only speeds up color selection, it also is a wonderful way to
discover them in ways you would never have imagined yourself.


TEXTURE TESTING

The suite also has a test that does all of the above, yet mixes it with
textures/patterns. For example, here’s a Sand-10 background combined with a
subtle noise texture:




SHADOW TESTING

A test to see how each color responds to an overlay shadow:



Or, a stage light:




GRADIENT TESTING

Gradients nowadays are a popular choice for backgrounds as they can create a
beautiful ambience. Picking multi hue gradients that work is even more difficult
than just picking two solid colors, because of all the tones that get generated
in between. The test suite helps!



I picked a random color, Voilet-8 in this case. Next, the page generates
gradients from Violet-8 to every other of the 234 colors in the palette. You
can’t engineer a gradient, you have to see it. It reveals surprising and
stunning results that, I keep repeating this…I would never have come up with
myself. Another example, Cyan-6:



Isn’t that stunning? This is how I’ll pick gradients from now on. The best part
is that I created the script to output this in about 3 minutes. None of the
“Create your gradient here” tools can compete with simply seeing hundreds of
them at once.


GENERATED ATOMICS

Once you have a cohesive color palette for your needs, you could generate color
variations of your atomics (low level UI elements). Nothing really stops you
from doing this. For example, icons:



A more advanced test with color variations for strokes, including stroke width
variations:



Or…buttons:



The point to generate atomic variations is not to offer this many options, it’s
to discover the subset that performs best, rapidly.

Let’s wrap up coverage of the test suite. Needless to say, I’m very excited
about it:

 * It’s a drastic productivity boost for picking colors, combinations of colors,
   and gradients
 * It is an awesome discovery tool to find artful combinations that also meet
   contrast guidelines.

Both directly address the pain of the color-changed: art direction and
productivity. It’s the reason I’m writing this article.


CHAPTER V: CREATE YOUR OWN HUES

Here we arrive at the final chapter in our lengthy tour of color. If this color
palette still does not serve your needs, we’re going to discuss adding your own
hues.

At face value, it seems a difficult task, since Open Color is based on
hand-picked curves for each hue. Yet I found a way to do this relatively easily,
leading to output that is attractive and is also consistent (enough) with the
rest of the palette. It’s all made possible with this incredible tool:


CHROMA.JS COLOR SCALE HELPER


THIS CHROMA.JS-POWERED TOOL IS HERE TO HELP US MASTERING MULTI-HUED, MULTI-STOPS
COLOR SCALES.

gka.github.io

This amazing tool allows you to input a series of colors, after which the tool
calculates all tones in between, in a way where luminosity steps are equal. So
to create a brown, we’ll enter a very light tone of brown (#FAF4EB) and a very
dark one (#422412), the beginning and the end of the scale.

First things first. How do we find these begin and end colors? The quickest way
is to pick a color from the existing palette that is close. For brown, that
would be orange. Next, take the lightest and darkest tones of orange and use a
color picker to adjust the hue so that it becomes brown, whilst being at roughly
equal luminosity levels as the orange we started from.

This should be easy to do, and after finding these two extreme values and
entering them into the tool, setting the amount of steps to 13, we get this:



Not bad at all! If you’re happy, you can leave it at this. Personally though, I
find the set a bit tame, it lacks character as found in the other Open Color
colors. So let’s add character.

The tool generates hex values, and in its list of 13 values, we’ll copy the
middle one, which is #9c8475.



Pay close attention as to what happens next. When I entered #9c8475 in
Photoshop’s color picker, I checked the value of the Lab color system (to the
right in the dialog). It’s L value was at 57. Next, I shifted my cursor around
this color space to a more vibrant color in a way that L is still 57. A diagonal
move further to the top and right, in this case.

We now have our “character” middle color, and next we add 3 colors in the tool:
begin, middle, end. We let the tool do it’s job again:



A dramatic change in results. We have given color generation some artful
direction. You could now stop, or take even more control. Instead of 1, you
could create 2 control colors. If you do, make sure they are symetrical. With 2
control colors, the setup would be:

 * Begin
 * Control color 1 (at 1/3)
 * Control color 2 (at 2/3)
 * End

And you can do multi-hue too!



Check out this pink to purple hue, based on start and end colors already found
in the palette. It’s unlike any hue found in the palette, and I totally would
have added it had I not already prepped the palette for publication.

The final step is to place your new hue in the total color palette. In
particular, we’re going to compare luminosity values at each stop compared to
values in other hues. My rule of thumb is to not allow a luminosity deviation
that is larger than 0.1 from the typical average lumination value of other
colors at the same color step. If the deviation is larger, I may tune the color
using a color picker, but only in tiny ways.

So to sum up the process of creating your own unique, beautiful hues that are
attractive as well as consistent with the rest of the palette:

 * Pick a begin and end color of equal brightness. Take values from a
   neighboring color and change the hue (and sometimes slightly the saturation)
 * Enter the start and end color in the mentioned tool, set it to 13 steps,
   Bezier interpolation off, Correct Lightness gradient on.
 * If happy, enter into color palette and test luminosity consistency. Tweak
   where needed.
 * If not happy yet, add one “character” color to the middle. Find it by taking
   the generated middle color from the tool, add manipulate hue and saturation
   whilst keeping the L in Lab the same.
 * Enter 3 colors into tool. Likely, you’re happy now. If not, change the color
   or consider two control colors.
 * Once happy with the tool output, test and tweak luminosity values to
   integrate with the larger palette.

Seems like a lot, but with some practice, you’ll be creating new hues in a
minute or so!


WRAPPING UP

In this vast article, I focused on addressing the needs of the color-challenged.
Instead of inventing a new palette that can never outperform established
choices, we learned how to judge the quality of a palette, and come to a primary
choice: Open Color.

Extensions to this excellent palette hopefully make it even more widely usable.
With a “universal” basis for color in hand, we don’t have to start from scratch.

Advanced testing and discovery tools shared in the article show a way to scratch
another itch of the color-challenged: mass-generated combinations at a glance
instantly reveal beautiful and valid combinations, and the discovery of original
and unexpected combinations.

And finally, for the stubborn ones, we learn how it’s not that hard to produce
beautiful, unique hues yourself.

So yes, at this point, I think we the color-challenged, can fake it. Thanks for
reading:

Bonus: the below logo was created entirely of the palette discussed in the
article, using Affinity Designer:






SIGN UP TO DISCOVER HUMAN STORIES THAT DEEPEN YOUR UNDERSTANDING OF THE WORLD.


FREE



Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.


Sign up for free


MEMBERSHIP



Access the best member-only stories.

Support independent authors.

Listen to audio narrations.

Read offline.

Join the Partner Program and earn for your writing.


Try for $5/month
Design
Web Development


151

151

3


Follow



WRITTEN BY FERDY CHRISTANT

398 Followers
·Editor for

Ferdy Christant

Web developer, wildlife photographer, founder of www.jungledragon.com

Follow




MORE FROM FERDY CHRISTANT AND FERDY CHRISTANT

Ferdy Christant

in

Ferdy Christant


UNEXPECTED GOOGLE MAPS API CHARGES


HOW IT HAPPENED, HOW TO SOLVE IT, LESSONS LEARNED

11 min read·Jul 28

53





Ferdy Christant

in

Ferdy Christant


MY JOURNEY INTO EXTREME MACRO


THE BIG HOBBY OF THE TINY

75 min read·Jul 14

124

5




Ferdy Christant

in

Ferdy Christant


THE STATE OF WEB BROWSERS


2019 EDITION

19 min read·Dec 8, 2018

790

9




Ferdy Christant

in

Ferdy Christant


MASTERING COLOR PALETTES WITH SASS


INTRODUCTION

15 min read·Nov 27, 2015

53

3



See all from Ferdy Christant
See all from Ferdy Christant



RECOMMENDED FROM MEDIUM

Adham Dannaway



in

UX Planet


16 LITTLE UI DESIGN RULES THAT MAKE A BIG IMPACT


A UI DESIGN CASE STUDY TO REDESIGN AN EXAMPLE USER INTERFACE USING LOGICAL RULES
OR GUIDELINES

14 min read·Mar 14

18.5K

153




AL Anany




THE CHATGPT HYPE IS OVER — NOW WATCH HOW GOOGLE WILL KILL CHATGPT.


IT NEVER HAPPENS INSTANTLY. THE BUSINESS GAME IS LONGER THAN YOU KNOW.


·6 min read·Sep 1

11.4K

357





LISTS


STORIES TO HELP YOU GROW AS A DESIGNER

11 stories·308 saves


INTERESTING DESIGN TOPICS

203 stories·168 saves


FIGMA 101

7 stories·215 saves


ICON DESIGN

30 stories·107 saves


Mirijam Missbichler


WHY JAPANESE WEBSITES LOOK SO DIFFERENT


& HOW TO ANALYZE DESIGN CHOICES WITHOUT JUMPING TO CONCLUSIONS

8 min read·May 2

13.9K

201




Katie Cooper

in

UX Collective


HOW TO CREATE A COLOR RAMP USED IN DESIGN SYSTEMS


WHETHER YOU’RE A BRAND DESIGNER PUTTING THE FINISHING TOUCHES ON A COLOR PALETTE
OR A PRODUCT DESIGNER LAYING THE FOUNDATIONAL WORK FOR A…

6 min read·Sep 27

639

9




Unbecoming


10 SECONDS THAT ENDED MY 20 YEAR MARRIAGE


IT’S AUGUST IN NORTHERN VIRGINIA, HOT AND HUMID. I STILL HAVEN’T SHOWERED FROM
MY MORNING TRAIL RUN. I’M WEARING MY STAY-AT-HOME MOM…


·4 min read·Feb 16, 2022

65K

955




Digital Giraffes


7 AWESOME AND FREE AI TOOLS YOU SHOULD KNOW


WE COLLECTED 7 FREE ARTIFICIAL INTELLIGENCE(AI) TOOLS, MOST OF THEM EASY TO USE
AND SOME MORE SOPHISTICATED… LIKE BUILDING ML MODELS.

5 min read·Nov 17, 2022

8.8K

197



See more recommendations

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech

Teams

To make Medium work, we log user data. By using Medium, you agree to our Privacy
Policy, including cookie policy.