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...
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.
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.
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.
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.
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.
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.
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.
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
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.
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/
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.
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.
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
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.
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
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.
"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."
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.
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.
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.
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.
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 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.
Definitely going to bookmark this for future use.
[1] https://learnui.design/tools/data-color-picker.html#divergen...