ColorBox by Lyft Design | Hacker News Reader

ColorBox by Lyft Design

colorbox.io

907 pointsBrajeshwar85 comments

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...

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

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...

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.

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...

I'm a novice in color theory yet I understand the importance of colour palettes for my projects. I've used a bunch of palette generators over the years. With my basic skill level I can typically create a decent 'original' palette in around ten minutes.

I just tried Colorbox and I managed to produce several good palettes and very few bad ones. Perhaps the UX and algorithm is nicely geared to users like me. But I'm sold.

This is super cool, what are good ways to distinguish between using a different color vs just changing opacity of a primary color?

Context: https://design.lyft.com/re-approaching-color-9e604ba22c88

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.

> As a non-designer, I am finding it easier and easier to get something professional looking up

The reason you find it getting easier is not to be found in any of these tools, but in your repeated effort to "put something up" and getting better at it.

You are learning how to design by doing design.

That's true, but guidance on how to get better at design is much more available than it used to be. I remember creating web sites 20 years ago and getting feedback that they looked dreadful. I had no idea why people didn't like them; I liked them! It turns out I like lots of things that most people don't and I needed guidance to find out what most people like.

20 years ago we were also much more limited in our options- 216-color web-safe palettes, minimal styling & layout, low-resolution displays, etc.

> That's true, but guidance on how to get better at design is much more available than it used to be.

Absolutely. It's a wonderful time to learn.

Maybe, maybe not.

My design sense remains abysmal. Being able to use something like Bootstrap to get a sensible look and feel is a big boon.

I'm in the same boat.

I struggle hard with the UX, but I'm amazed that with modern tools I can create a rudimentary, but clean design in Sketch, code it, and manage the infrastructure behind it.

Even 10 years ago, these were 3 to 5 completely distinct skillsets (designer, frontend, backend, infrastructure, DBA).

The divide between these roles you mentioned has gotten bigger over time in my opinion. It's maybe easier nowadays to put together an okay-looking proof-of-concept app, but when getting into large apps and high traffic, the stack has gotten more complicated to do right. You don't just roll out server-rendered MVC app, but need front-end with 3 layouts for different devices and state management more complex than on the back-end. Or maybe that's just my feeling.

UX is pretty much a logical process.

Can you explain how you get a solid looking template and what you do to customize it and where Material UI comes in?

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.

I'm an API guy who uses Python and Hy and I'm getting started with some front-end programming on my weekends to have some hobby projects with a public face. It annoys me that every website template now expects you to install via npm. Bulma is all-out with that.

If you dig down, it's apparently because the DSL Sass is used to generate CSS. But there are Sass compilers in C and Python and probably in Prolog at this juncture.

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

Any major reasons to use one or the other?

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

No solid reasons honestly, other than personal preference. Bulma just looks better out of the box to me.

Seconded. Bulma is the tool of choice for 99% of my projects. I have all the CSS classes almost memorized.

Same here, it is easy to impress your clients

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.

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... [2] http://davidjohnstone.net/pages/lch-lab-colour-gradient-pick...

As an artist and designer I somehow can't get over the complementary hues in the Lab color space, NCS complementaries fit much better visually.

The main advantage of mathematically derived and absolutete color models like Lab is that they can't be protected by copyright. There is an intiative that tries to be an alternative to Pantone in that market: https://www.freiefarbe.de/en/

There's an also an interesting lecture on YT: https://youtube.com/watch?v=JAR6zDkboJU

Here some more infor about color circles and systems: https://www.handprint.com/HP/WCL/vismixmap.html

Lab isn't the only perceptually uniform color space out there, have you tried any others?

Jab is a fairly new one, maybe it works better for you:

https://observablehq.com/@jrus/jzazbz

Thanks for such a terrific, well-informed and helpful comment!

It's a strong reminder how unbelievably complex "color" is.

It's just an infinite-dimensional vector space ;-)

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.

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-...

[2] https://www.quora.com/If-the-human-eye-has-three-cones-for-a...

Lab is not energy linear, and if you're doing rendering/illumination, you won't want to use Lab (unless you're deliberately trying to stylize). It is designed to be a good model of human color perception, not the physics of light.

Lab color space is good for mixing colors in a way that behaves intuitively. E.g. "what color is 'halfway between' these two other colors?", mixing "paint" digitally, producing pleasing gradients, picking colors or creating palettes.

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.

> 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.

Drag the start and end Hue sliders around a bit, you'll see different colors on the side.

> That being said, I have no idea how colors work.

This is me.

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

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

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.

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

and of course tested it only on Chrome...

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

How do I use this thing?

This was my first reaction, and I’ve used a slew of web color tools, going back before colorlovers

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?

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...

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.

Theres a lock color field on the very bottom.

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.

That was actually one of the goals with this system.

From 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."

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

It has this. For example, the default 0 value:

19.32b (on black)

1.09w (on white)

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...

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...

Cool ! https://www.colorbox.io/#steps=11#hue_start=186#hue_end=219#...

Awesome tool for setting up a Tailwind config.

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

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.

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.

Blue was taken

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.

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://coolors.co

Or just use a good default like 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.

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."

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.

I've tried a bunch of online solutions, including Adobe's, but this one seems to work better with the way my brain works. I'm not sure if it's my workflow, or the way its presented visually, but it seems more useful for me.

Disambiguation:

Colorbox is also a lightbox jQuery plugin: https://www.jacklmoore.com/colorbox/

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.

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

https://palettte.app

The motivation post for why they created it is a good read: https://www.gabrieladorf.com/palettteapp/

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!

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/

I like http://color.support/coloratlas.html

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

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

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.

I'll use this to generate additional colors for a demo that needs more colors than the 3 they provided to me :)

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

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

Thanks Lyft!

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

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

https://design.lyft.com/hello-from-lyft-design-ea8a0b958628

    "sharing our learnings"

must be a xoogler in there somewhere

nice. i've used this simple one in the past: https://meyerweb.com/eric/tools/color-blend/#FFFF00:0000FF:1...

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/ has a good example.

Reply on news.ycombinator.com