Live data from Hacker News

ColorBox by Lyft Design

colorbox.io

71–80 of 88 posts

Re: ColorBox by Lyft Design

#71
post #9

Earlier quoted context omitted.

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 buildin…

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.

Re: ColorBox by Lyft Design

#72

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.

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

UX is pretty much a logical process.

Re: ColorBox by Lyft Design

#74

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

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

Re: ColorBox by Lyft Design

#75

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

Re: ColorBox by Lyft Design

#77

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

Re: ColorBox by Lyft Design

#78

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

Re: ColorBox by Lyft Design

#79
post #67
post #49

Earlier quoted context omitted.

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…

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

Re: ColorBox by Lyft Design

#80
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.
Post reply on HN