
ColorBox by Lyft Design - Brajeshwar
https://www.colorbox.io
======
beowulfey
This is a great tool! I have also recently started using a divergent color
palette[1] when designing figures for publication, it's amazing how much nicer
it looks than, for example, default color schemes in most graphing software...

Definitely going to bookmark this for future use.

[1] [https://learnui.design/tools/data-color-
picker.html#divergen...](https://learnui.design/tools/data-color-
picker.html#divergent)

~~~
michaelmior
I've used ColorBrewer[0] in the past for this purpose. It's got some great
options for ensuring the colors are distinguishable by people with varying
forms of colour blindness as well as in black and white. That last one is a
big one because it's a pet peeve of mine when figures are unreadable in a
printed paper.

[http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3](http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3)

~~~
jessaustin
I've used the method described here [0] of simply incrementing _hue_ by the
golden ratio. You can generate dozens of colors that go well together yet are
quite distinguishable.

[0] [https://martin.ankerl.com/2009/12/09/how-to-create-random-
co...](https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-
programmatically/)

~~~
michaelmior
I haven't tried this, but it seems like just incrementing the hue would mean
colours would be difficult to distinguish when printed in black and white.

~~~
jessaustin
D'oh! I think you're right. In B&W these would be identical. I think one could
use the same trick with _lightness_ in this case, rather than _hue_. Still,
colors generated that way are going to look like ass on a screen. It seems
like you're already doing media queries, though, so doing two variations of
this technique wouldn't be too bad...

------
perchard
Context: [https://design.lyft.com/re-approaching-
color-9e604ba22c88](https://design.lyft.com/re-approaching-color-9e604ba22c88)

------
shanecoin
As a non-designer, I am finding it easier and easier to get something
professional looking up. Couple this with Material-UI and a solid looking
template and you could have a beautiful, custom landing page up a day.

There are obviously UX and other issues that I struggle to excel at, but from
a simple, consumer-facing perspective, I see UI getting more and more
manageable.

~~~
jpxw
Bulma is a gamechanger for me in this regard. I can get something professional
looking up and running with literally no design experience.

There are obviously limitations to it, but for my use cases it's great.

~~~
quasse
Bulma looks fairly similar to Bootstrap v4 as far as visual output goes.

Any major reasons to use one or the other?

~~~
williamdclt
We looked into both when writing an open-source admin interface for NestJS. We
went for bootstrap because:

\- Nobody likes bootstrap, but everybody knows bootstrap (good for an open-
source lib) \- Better browser compatibility \- Better accessibility \- Plenty
of UI widgets built on top of bootstrap (we don't use them, but people using
the lib could) \- About as big as each other

------
daxterspeed
An interesting issue is that it's currently impossible to pick the direction
of the hue rotation, so if your start and end colors are one opposite sides of
the hue circle this tool will go "the long way around". Great for rainbows,
not so great if you want to go from orange to purple over red.

~~~
tbabb
This is why I much prefer the Lab color space over HSV or HSL— it's much
better suited to interpolation and mixing.

The critical properties are:

* It's a vector space, so mixing colors means mathematically mixing the components. There is no polar angle that can "go around the wrong way", or suddenly cause the interpolation to change when one color coordinate crosses zero degrees.

* It's perceptually uniform, so that taking mathematically even steps in color space means the result will be perceptually even as well (compare to color spaces which don't account for gamma, and small change on a dark color make a huge difference, but the same step in a light area is invisible).

* Because of the perceptual uniformity, there are no luminance dips or peaks in interpolated colors. In RGB, for example, interpolating two saturated colors which are far away from each other on the color wheel will result in dark grey or black in the middle of the gradient— not so with Lab. Also, consider an HSV rainbow: If you desaturate it, it isn't a uniform grey– some parts of the wheel are randomly brighter than others, because the human eye is more sensitive to yellow and green light, and very insensitive to blue. A rainbow with constant L coordinate in Lab space will have constant luminance.

* Because chromaticity is a 2D vector space in Lab color (rather than a single coordinate), interpolating between two distant hues won't put crazy unrelated hues in between them, but HSL and HSV will. Saturated, complementary colors will appropriately interpolate through a neutral grey in Lab, instead of through a "random" saturated hue.

Here's [1] an image of some constant-luminance (i.e., constant "L" coordinate)
slices of Lab space, to give a sense of what it looks like.

Here's [2] a little color picker (found with a Google search) which shows you
the results of interpolating in different spaces— you can see that RGB is
pretty bad, but in HSV or HSL it's not hard to make something look extremely
broken. Those two spaces are _definitely_ the wrong choice for interpolation.

[1]
[https://en.wikipedia.org/wiki/CIELAB_color_space#/media/File...](https://en.wikipedia.org/wiki/CIELAB_color_space#/media/File:Lab_color_space.png)
[2] [http://davidjohnstone.net/pages/lch-lab-colour-gradient-
pick...](http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker)

~~~
amelius
But is a perceptual colorspace "natural"? A physics-based vectorspace is the
most natural thing. Adding vectors in a perception based vectorspace seems
unnatural to me.

~~~
mkl
Our human colour perception is very much not based on the physics or
mathematics of light [1] [2]. It evolved to keep us alive and breeding, not to
be accurate or precise about what light and colour actually are, so what is
"natural" really means how we in particular see. For anything intended to be
viewed by people, perception is all that matters.

Our computers, phones, TVs, etc. are designed specifically for human eyes, and
other animals looking at them won't necessarily see the things portrayed with
the same colours they see in reality.

[1]
[https://worldbuilding.stackexchange.com/questions/29665/how-...](https://worldbuilding.stackexchange.com/questions/29665/how-
to-modify-the-human-eye-to-see-into-the-ultraviolet-and-infrared-bands)

[2] [https://www.quora.com/If-the-human-eye-has-three-cones-
for-a...](https://www.quora.com/If-the-human-eye-has-three-cones-for-a-
specific-color-then-how-does-it-differentiate-more-than-three-colors)

------
marmada
I'm no designer, but I assume this is not a color palette generator, right?
It's more of a "shade generator" that creates all the various shades of a
single color?

Update: After playing some more, it does in fact seem like you can generate
pallets by adjusting the start and end hue. That being said, I have no idea
how colors work. For example, I assume I can't just take 3 arbitrary colors
from this tool and stick them together and expect them to look good.

~~~
jstummbillig
> That being said, I have no idea how colors work. For example, I assume I
> can't just take 3 arbitrary colors from this tool and stick them together
> and expect them to look good.

Well, you kind of, sort of can. That is what this and similar tools are
designed to help you with.

Think about this as a programming language library. It's kind of sort of there
to help you accomplish that thing you have in mind, but you might still use it
wrong it or it might just not be the right tool for the thing you have in mind
or the thing you have in mind simply isn't really a thing.

The point being, you need to be able to reason about what you are doing and
your status towards your goal in either case. Not in a "I can explain this"
way, but in a "I think this is better than that other thing and it's getting
closer to where I want it to be" way.

------
airstrike
This is really cool, but I found myself battling with the UI more than
actually enjoying the results... There's no way to type in exact HSL values
(have to use the sliders), no RGB / HEX colors (except for the one "lock
color" option, which only supports HEX but not HSL or RGB...). CMYK is an
obvious suggestion following those

Could also probably use additional "locks" for keeping the same starting and
ending H/S/L/R/G/B

~~~
rhizome
The key is to have worked at the place that developed it for a couple of
years.

------
kccqzy
It's disappointing that they decide to work with the Euclidean model (HSL)
when many years of study in human reception have yielded things like CIELAB,
or a variant that's easier to work with like CIELCH.

------
esher
A friend of mine created a similar tool while ago:
[https://hypejunction.github.io/color-
wizard/](https://hypejunction.github.io/color-wizard/)

~~~
dwdz
and of course tested it only on Chrome...

------
TSiege
Here's a ts/js library, called coloring-palette, I developed for Bustle. It
was inspired by this project, but meant to produce palettes in a format
similar to Google's Material UI. [https://github.com/bustle/coloring-
palette](https://github.com/bustle/coloring-palette)

------
Dowwie
How do I use this thing?

~~~
ng-user
I concur... I'm a developer not a designer, what am I looking at besides a
nice gradient of colours... how do I use this tool?

~~~
fma
Yeah I'm a dev with bad color taste (i.e. backend engineer...)

It would be nice if it said..use this color for acknowledge font, warning
font, background, menu...etc...

------
nakodari
Great tool, a small suggestion: Let the user add a HEX color and then show
hues before/after based on that. It would make this tool more useful.

~~~
jaredwiener
Theres a lock color field on the very bottom.

------
stephencoyner
Accessibility of text over the generated colors would be a great addition to
this. It can be cool to have colors generated, but with UI, more than likely
you will have to place text over the top and you need to ensure that everyone
can read without troubles.

~~~
somewhato
That was actually one of the goals with this system.

From [https://design.lyft.com/re-approaching-
color-9e604ba22c88](https://design.lyft.com/re-approaching-color-9e604ba22c88)

"Using our algorithm, we made our color lightness-to-darkness consistent
across color hues, so that every color 0–50 is accessible (4.5:1) on black,
and every color 60–100 is accessible (4.5:1) on white."

~~~
stephencoyner
Very cool! I didn't see this at first, but glad to see it's there. Awesome
work

------
bradleybuda
Playing around, this is the closest I could get to the typical green = good,
yellow = medium, red = bad "monitoring" color scheme:
[https://www.colorbox.io/#steps=10#hue_start=119#hue_end=0#hu...](https://www.colorbox.io/#steps=10#hue_start=119#hue_end=0#hue_curve=easeInOutQuad#sat_start=50#sat_end=50#sat_curve=easeInSine#sat_rate=200#lum_start=70#lum_end=29#lum_curve=easeOutQuad#lock_hex=FFFF00#minor_steps_map=0)

~~~
johnday
Did a minor variation on it which I think gives nicer colors on most screens:

[https://www.colorbox.io/#steps=10#hue_start=119#hue_end=0#hu...](https://www.colorbox.io/#steps=10#hue_start=119#hue_end=0#hue_curve=easeInOutQuad#sat_start=28#sat_end=75#sat_curve=linear#sat_rate=200#lum_start=66#lum_end=49#lum_curve=easeOutQuad#lock_hex=FFFF00#minor_steps_map=0)

------
danschumann
Cool !
[https://www.colorbox.io/#steps=11#hue_start=186#hue_end=219#...](https://www.colorbox.io/#steps=11#hue_start=186#hue_end=219#hue_curve=easeInQuad#sat_start=0#sat_end=100#sat_curve=easeInOutQuad#sat_rate=100#lum_start=100#lum_end=35#lum_curve=easeOutQuad#minor_steps_map=none)

------
nathancahill
Awesome tool for setting up a Tailwind config.

------
seanmcdirmid
When manipulating a slider with touch, is there a way to filter out Y
movements that cause accidental scrolling?

------
spectramax
Side topic: There is an abundance of Magenta/Purple colors in today's design
from Stripe to GraphQL to Lyft... what gives? Why are designers obsessed with
trends? I could give many many more examples if needed. Everywhere I see
magenta/purple gradients.

~~~
matthewsmith_io
At peak saturation, blue has the lowest luminosity, which gives it the
greatest contrast against white. Purple, magenta, and red are next.

That's why we use blue and purple for links and not yellow.

It's really about achieving contrast and saturated/vibrant colors at the same
time.

------
reaperducer
I could have used this about six months ago when I was starting a new web site
for a company with only a main brand color and no notion of accent or
complimentary colors.

Definitely putting this in the resources folder for my next project.

~~~
dmix
There's been quite a few options around if you Google color palettes. Adobe's
color and coolors are some popular ones:

[https://color.adobe.com](https://color.adobe.com)

[https://coolors.co](https://coolors.co)

Or just use a good default like [https://clrs.cc](https://clrs.cc) for base
colors.

Color palette are always one of the first things to set up with CSS variables
when starting a new project so you don't have to think about specific colors
(or use the color picker) when building UI elements. ColorBox looks nice for
adding the 1-10 shade variations (light->dark) for each color, which some of
the palette sites downplay.

~~~
thanatropism
I had a data visualization class as an "easy optional" in grad school. The
professor told us "y'all are mathematicians and don't understand color. Pick
some artwork you like and put it through Adobe Color instead of trying to make
your own messes."

~~~
dmix
That's good advice. Just like in software where you shouldn't roll everything
yourself, in design there's plenty of space to defer to other experts who've
thought through this stuff.

There's already enough problems to solve building an app. You should be
obsessing over the hex value of colours.

------
juliend2
Disambiguation:

 _Colorbox_ is also a lightbox jQuery plugin:
[https://www.jacklmoore.com/colorbox/](https://www.jacklmoore.com/colorbox/)

------
dorkandstormy
What's interesting here is that this applies Penner easing equations to color
values. Would make for some very nice gradients if you interpolate between the
values.

------
simplify
Nice! I use Palettte[0] (yes three t's) but ColorBox looks like it supports
curves.

[https://palettte.app](https://palettte.app)

~~~
simplify
The motivation post for why they created it is a good read:
[https://www.gabrieladorf.com/palettteapp/](https://www.gabrieladorf.com/palettteapp/)

------
ohnope
So glad this exists. I'm always looking for nice looking gradient sets that
are more than 4-5 colors you get from Adobe Color. Great job!

~~~
cutety
Then you’ll probably also be interested in IWantHue[1], one of my favorite
tools when I need to generate a color palette.

[1]
[https://medialab.github.io/iwanthue/](https://medialab.github.io/iwanthue/)

------
dwdz
I like
[http://color.support/coloratlas.html](http://color.support/coloratlas.html)

------
shay_ker
Is this mostly to find complementary colors for a brand? Just curious what the
use case is (I'm not a designer)

~~~
exogen
There's an accompanying blog post here, surprised it's not higher:
[https://design.lyft.com/re-approaching-
color-9e604ba22c88](https://design.lyft.com/re-approaching-color-9e604ba22c88)

~~~
rhizome
Guessing "Pink 50" is both the Lyft logo color and the anchor for all of the
other shades. Nothing nefarious necessarily, but it _does_ mean this color
scheme will make your site look _kinda_ like Lyft's.

------
davidajackson
So how do you know which curve to use when? Is there anything beyond, "I like
the look of that one"?

------
MartianSquirrel
I am in no way a designer, but I found myself playing with this for a good 10
minutes.

Thanks Lyft!

------
t0astbread
Looks useful but am I the only one who experiences this UI as slow and janky?

------
Impossible
This is a pretty fun tool. An animated color cycle might be a nice addition.

------
sabujp
[https://design.lyft.com/hello-from-lyft-design-
ea8a0b958628](https://design.lyft.com/hello-from-lyft-design-ea8a0b958628)

    
    
        "sharing our learnings"
    

must be a xoogler in there somewhere

------
leeoniya
nice. i've used this simple one in the past:
[https://meyerweb.com/eric/tools/color-
blend/#FFFF00:0000FF:1...](https://meyerweb.com/eric/tools/color-
blend/#FFFF00:0000FF:10:hex)

------
patientplatypus
I just want to say that another great tool is hsluv.org. It shows you what
colors go together based on what our eyes see as the same level of
hue/saturation/lightness, which is different than what it is in actuality
(based on light).
[http://www.hsluv.org/comparison/](http://www.hsluv.org/comparison/) has a
good example.

