16 ms·

Building Your Color Palette

1019 points by clessg 6y ago

an_opabinia 6y ago
So, the answer is, blue.
orzig 6y ago
There were some studies about how colors had systematic effects on user mood. But they were before the replication crisis and I could easily imagine them falling through - does anyone know the current state?
petepete 6y ago
This used to be so much more of a pain before Sass (and friends) came along. Having a red error box with a separate border colour used to be a pain to maintain but it's so simple with darken/lighten and a few commonly used context-specific variables.
- kowlo 6y ago
  Do you have any resources or examples you recommend for this? My front-end knowledge is over a decade old. I would still be assigning all these colours individually in CSS!
  - 1f60c 6y ago
    Sass Basics seems like a good place to start: https://sass-lang.com/guide https://sass-lang.com/guide
  - petepete 6y ago
    I don't have anything to hand and I only use a tiny number of Sass's built-in features, but here's a super-quick demo of styling with variables and darken (https://sass-lang.com/documentation/modules/color#darken https://sass-lang.com/documentation/modules/color#darken). https://jsfiddle.net/peteryates/uqdnj4sa/10/ https://jsfiddle.net/peteryates/uqdnj4sa/10/ Note, darken and lighten aren't always favoured these days, it's good advice to learn scale (https://sass-lang.com/documentation/modules/color#scale https://sass-lang.com/documentation/modules/color#scale), but darken or lighten makes for an easier demo.
  - Andrex 6y ago
    You could start with native CSS variables. :) https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c...
    - dairylee 6y ago
      Not very easy to darken/lighten colours easily using CSS variables at the moment. Support will be coming in the future.
      - schpaencoder 6y ago
        I find it quite easy. Just use the hsl() function.
kowlo 6y ago
Interesting post! I had a look at the Refactoring UI packages, $99 ($79 on sale) seems a little steep for a PDF and three videos.
- dinkleberg 6y ago
  I got it a while back and have to say it was worth it. Sure it’s more expensive than a normal book, but if $100 can get me the condensed reference of an expert then I see it as a win.
- nathancahill 6y ago
  The book is absolutely worth it.
- markdown 6y ago
  Worth it if you're not from the web design world. For those already in that sphere, there's nothing new here; no lesson that hasn't already been taught in web design blogs over the years.
- weaksauce 6y ago
  it's a quite good book and worth it if you are doing it professionally. condensed, well written, good advice.
reificator 6y ago
My biggest issue when I'm trying to put together a palette is that dark mode comes first in my eyes, with a light mode as an option later should people request it. So much of the existing advice seems easy to follow in light mode but doesn't click for me the other way around.
enriquto 6y ago
All these examples use way too many colors. The ideal (and minimum) number of colors for a sober site is two: one color for the background and a very different color for the text, each of them an extreme and opposite shade of gray. If you are really fancy, add a third color on a couple of very small places, almost inconspicuously. More than three colors results in an ugly pastiche. The worst offence is having several slightly different shades of the same base color. This is what this article seems to propose and it is unbearably horrendous.
- Jolter 6y ago
  Can you show a pretty example of the approach you’re advocating? I’m skeptical, you see. I’ve never seen an attractive web site designed that way.
  - enriquto 6y ago
    Wikipedia is the perfect example: black text on white background with blue hyperlinks. It does not get more attractive than that in my opinion.
    - seanwilson 6y ago
      Example: https://en.wikipedia.org/wiki/Hacker https://en.wikipedia.org/wiki/Hacker There's yellow, orange, blue borders, grey borders, different shades of blue for different links, grey background etc. so you're oversimplifying. The linked article even makes the point you end up needing several greys, reds etc. for things like borders and warning pop-ups. Nobody is arguing you should have 10 brand colours.
      - enriquto 6y ago
        OK, so there are more colors. The example that you show uses colors to signal things that are wrong with the current page. This is somewhat logical: if things look wrong (because there are more than three colors) then they are wrong. Regular wikipedia entries do not have yellow nor orange: https://en.wikipedia.org/wiki/Riemannian_manifold https://en.wikipedia.org/wiki/Riemannian_manifold You are right that there's still more colors: very light shades of gray, and a thin light blue line for separator. They are almost imperceptible on my screen, but I would say that the page would look even better if the thin separator was black, and there were no different background shades.
corytheboyd 6y ago
This seems like great succinct advice in an area the I have definitely struggled before, thanks for sharing! Wow this book sounds extremely promising as well, I think I’ll end up purchasing it in the future
- taffer 6y ago
  It was also co-authored by Adam Wathan, the creator of the tailwind css framework.
  - corytheboyd 6y ago
    Ah, I too love his work. I have yet to use tailwind but I plan on it for my current project. Read his rationale behind utility classes vs semantic/classic/whatever-you-call-it CSS and... it just makes so much sense. It reads like he thought of every “well, but what about X” and it shows
arendtio 6y ago
When I saw that palette it felt so familiar, then I started reading: > Adapted from our book and video series, Refactoring UI. Well yeah, this explains it, as I have bought (and read!) the book a while ago. The book isn't too extensive, but I don't regret any penny spent on it. Actually, I revisit it from time to time to internalize the lessons.
- nmfisher 6y ago
  I actually toyed with asking for a refund on this book (though in the end I decided not to). Except the palette chapter, it doesn't help you build an aesthetically pleasing design from the ground up. All the examples are about making "meh" design better - but many of us back-end developers would be over the moon if we were able to make "meh" design in the first place. It's also really only helpful for designing 'webform'-style applications (where the main purpose is structuring a lot of information). There are no general principles of design that that would be applicable to something like an interactive mobile application. I'm not bagging the book, I still think it's quite good for what it is and I did find it modestly useful (which is why I didn't request a refund). But rightly or wrongly, I thought it would be a good introduction to the fundamentals of visual design, which it mostly isn't.
  - svat 6y ago
    > many of us back-end developers would be over the moon if we were able to make "meh" design in the first place > I thought it would be a good introduction to the fundamentals of visual design I can relate, so a recommendation from me may be a case of the blind leading the blind, but the best such book I've seen is The Non-Designer's Design Book by Robin Williams (the writer, not the actor). (It's up to four editions now but get any one; mostly only the examples change.) The second half of the book is about type, and the first half is organized around four principles: Contrast–Repetition–Alignment–Proximity, leading to a memorable acronym that you may have found elsewhere but whose origin is this book. She starts with examples of designing things like brochures and flyers, but IMO if you remember to apply those 4 principles as illustrated in the book, you go from “ugh, I don't know why this looks ugly” design to pretty effective design.
TazeTSchnitzel 6y ago
Hmm, but 90's UI design got by with far fewer shades. Windows 95 has at most seven colours[0] used in the UI aside from the desktop background and icons, and yet it had a very clear visual hierarchy compared to today's designs. [0] light gray, dark gray, white, black, navy blue, the other gray (scrollbars), the light yellow used for help text backgrounds
- zer0tonin 6y ago
  Honestly I don't think this opinion is shared by a majority of users.
  - TazeTSchnitzel 6y ago
    I don't know what the “majority of users” think. What I can say is that not knowing if something was a button was not a problem Windows 9x had.
    - allenu 6y ago
      You can make a usable product using a Windows 95 palette, but I think it may look outdated to users. Depending on your target market, the color scheme you use can have an effect on how your product is perceived by your potential customers. User tastes and expectations have become more sophisticated since the 90s and users expect a higher level of polish now than back then. That can include color choice as a part of overall branding.
      - TazeTSchnitzel 6y ago
        It must be possible to achieve a happy medium: something with the legibility of an older design that doesn't look dated or unpolished. (Though I reject the notion that 90's designs weren't sophisticated or polished.) It doesn't need to limit itself to six colours, but I'm not convinced that an endless series of shades with low contrast to one another is good design from a functional perspective.
    - Veen 6y ago
rubyn00bie 6y ago
Gonna say I really appreciate this article, and I feel a bit dense in hindsight. I've had a helluva time trying to understand a lot of design articles talking about 3-5 colors... "Why does everything I make using these same colors look like shit tho?" and that's because they ain't using only 3-5! Those two screenshots could not have been more helpful for me or true to life. I now only wish all these online "color palette" tools were actually useful instead of just starting points.
anomaloustho 6y ago
I think there is a lot of validity to this article. But extrapolated as “general advice” would seem to replicate Bootstrap aesthetics every time. Saying, “Well, you need a color for the errors, and the successes, and the warnings” will almost invariably provoke the answers “Red, Green, Yellow” in some varying shade. The net effect is we can all tell when a website is using bootstrap or lacks branding. If you are taking out the time to steer away from appearing generic and are trying to differentiate your app design and branding, I think this advice might be a subtle disservice. You can change the presentation of the message by changing the position, the font, the size, the shape, the weight. You can add icons and other visuals. (E.g. your company’s mascot making a sad face). Looking at errors and warnings handled in Google’s websites (not the generic Material UI Kit), Apple products, Slack, etcetera can be used as an example to see that “You need a color for errors, and a color for successes, and a color for warnings.” is not necessarily the only way to design errors, warnings, and successes.
- jjcm 6y ago
  > “You need a color for errors, and a color for successes, and a color for warnings.” is not necessarily the only way to design errors, warnings, and successes. It's not the only way, but it is the best way. Straying too far from semantic meanings of colors can create confusion for users that expect a certain thing. Can you imagine if your bank had a two buttons - "delete account" and "cancel", where the delete button was green and inviting and the cancel was red? Danger should be semantic if your app has any sort of high risk actions involved in it. It's fine if a game or a rss reader uses their own funky palette that shows off their brand, but any time you start handling money you should really stray away from that.
- stevenhuang 6y ago
  Yeah no. If a design calls for something like green colored errors then that is simply bad design. Please be unique in other ways.
  - anomaloustho 6y ago
    I think it’s fair to say that “swapping” the symbolic colors with each other would be an antipattern in most cases. But here’s one scenario. Let’s assume the app in question is used for therapy or meditation[0] and its primary color is a sage green to emphasize calmness and a connection with nature. (BetterHelp is an example) In this case, red over navy green is one direction you could go in. But another direction might be a notice with a darker green background and a large white error graphic (bold exclamation marker with a circle or triangle). The header could read “Error” in bold and the error message could appear in white. To me the dark-green/white mixture would just as clear and usable as the red-over-green method. [0] Theoretical Branding - https://dribbble.com/search/Therapy https://dribbble.com/search/Therapy
imposter 6y ago
Annnd this is exactly why I now exclusively use tailwind, wherever I can.
- jdamon96 6y ago
  haven't used tailwind before - why is it particularly helpful for UI color palettes?
deleted 6y ago
[deleted]
amelius 6y ago
Looks pretty, yet ... why do I get the feeling that I've seen those designs a million times before?
- xkyscore 6y ago
  So many designers just rip off the design team at Stripe, even the author of this article frequently raves about Stripe.
jjcm 6y ago
I work on design systems as my day-to-day job. This is the first post I've seen on HN that actually captures how to properly set up your color palette. The author's early call out on how palette generators are not a one-stop-shop for your color palette rings true. Color meaning and harmony cannot be broken down into a mathematical formula. It's too heavily influenced by a.) biology, b.) trends, and c.) culture. RGB simply does not map 1:1 with our biology. We can't say, "ok here's a simple formula that will create two color that have harmony with humans universally". We can approximate it, but there's no perfect system out there for it. Other color modes (such as HSL or LAB) help, but come with their own drawbacks as well. Trends is another matter that is rarely considered or talked about. We as society gravitate towards certain colors within each geographical market. As a UX designer, it's important to stay within the bounds of these. There are certain things in life that should follow trends, many of which are items that convey important meaning. Can you imagine if every city in America used a different stop sign? It would be disastrous. Having one universal shape/symbol reduces the mental load required to recognize the meaning of the object. Likewise if a market gravitates towards a certain shade of red as dangerous, then you should stay close to that color when choosing your design palette. Over time these colors will shift as the trends slowly evolve - this is not something that can be approximated by a formula. The last bit is culture. Color in each culture is widely different. Red in China conveys prosperity, which is why if you look at designs for stock portfolio apps in China, graphs are red when going up in price. In India it represents purity. In the Western world it's danger. None of this can be captured in a formula. The author breaks down what the correct approach is when choosing color - breaking down meaning and extrapolating shades in your ramp to create a useful, well supported palette.
- amelius 6y ago
  > This is the first post I've seen on HN that actually captures how to properly set up your color palette. This is just a Boostrap color palette that I see here and it would be nice if they'd been a bit more creative. Imagine if Rembrandt used Boostrap colors in all his paintings and all his peers copied him ... that would be a boring world, but alas, that's what the internet is currently like, and articles like these certainly don't help.
awinter-py 6y ago
oh man have gone through the pallete generator exercise and ended up with the lame yellow-background example they show I feel seen grey message text is annoying though -- always go for contrast
allenu 6y ago
I thought I had a good sense of aesthetics, but I struggled with coming up with a color scheme for my own app. Once you pick colors that look nice, when you put them together, something always seems off! There isn't a unity and it's hard as an analytical thinker to explain why. You just can feel it. Articles like this helped me out a bit, as well as just trying different things. This includes taking an app or website you like and analyzing the colors they use. It helps to look at their use of saturation and lightness in specific elements (i.e. CTAs are typically more saturated and backgrounds and other elements you wish to mute are less saturated). In the end, if you can come up with a cohesive color palette, your product definitely looks more polished and professional. You have an overall feeling of confidence in it, even if the code has not changed one bit. It's like suspension of disbelief in a movie. When you hit something that shatters the illusion, you're taken out of the story and just look at the film as a series of filmed events played out in sequence and less like a narrative.
- helmholtz 6y ago
  I checked out your website and the app listed on your profile and they definitely looks professional and polished! Would you care to share the resources you used to learn this stuff? Even better if you could write more about your own journey. It's exactly the not-a-designer-by-trade-but-enthusiastic-about-it types whose backgrounds I can relate to the most.
  - allenu 6y ago
    Thanks for the compliment! Honestly, it would be challenging to distill it down into a post. I don't think I could convey it well enough. A lot of the journey is just training your eye to see things you like and ask what makes it the way it is. You just kind of have to develop an eye for white space, colors, visual hierarchy, and more. It's a heavy topic. Like writing, it takes practice, and when you do create something, it takes a lot of heavy editing and refining to simplify it more and more.
    - snoshy 6y ago
      I haven't seen your work, but this to me is generally excellent advice. I wish more people would provide and hear it. There is a level of effort required to get good at effectively conveying information to others, and it is best learned by critically observing the situations that have done so in your personal experience.
hedora 6y ago
Has someone written a web browser plugin to clamp all the off white grays to white, and the off black grays to black? I paid for a high contrast screen with uniform black and whites. I don’t want to clamp the palette to stuff that looks good on a worn out tft.
- likeclockwork 6y ago
  The funny thing is that it doesn't. That worn out monitor has worse contrast so everything just looks ever muddier.
crazygringo 6y ago
> True black tends to look pretty unnatural, so start with a really dark grey I wish this myth would die. #000 is already dark gray on any normal real-life screen anyone uses because of ambient light, halos, etc. It's nowhere near "true black". There is a good reason to avoid pure black or pure white in an interface, but it's nothing to do with "naturalness" or even legibility. It's simply so that images or content which do include the full brightness gamut from #000 to #FFF "pop" in comparison. You want the darkest shadows and brightest highlights to catch your attention, and not have them compete with browser or interface chrome. An interface is generally intended to "recede" next to actual content. But if your interface is star of the show? Use pure black and pure white. Go crazy. It's been used to great effect before.
- coldtea 6y ago
  >I wish this myth would die. #000 is already dark gray on any normal real-life screen anyone uses because of ambient light, halos, etc. No, it's not. And with OLED, mini-LED etc, it will be even less so.
  - manmal 6y ago
    OLED ghosting is another thing to consider - using a very dark gray instead of 000 prevents pixels from switching off, and prevents ghosting.
    - ddingus 6y ago
      Technical performance is an entirely different matter. The "unnatural" black argument is not valid, as others are making clear. Avoiding display artifacts is something different. And it is not "unnatural" black. It is better to discuss black, as in 0, in those terms that have a basis in reality. "Unnatural" black is not reality.
      - manmal 6y ago
        I agree. In my case, my art teacher told us, almost 20y ago now, that we shouldn’t use pure black in digital design because it‘s unnatural. He failed to explain why though, and I never found an argument that didn’t sound dogmatic, so I‘ve filed it under cargo cult.
theartfuldodger 6y ago
I audit sites frequently, the most common flaw is designers treating text as an afterthought. This article had one point that probably assists in the poor contrast choices that are so common. As I type in black on white in this text box I have trouble understanding why design professionals would call "black" on white unnatural. It is not. Unnatural isn't even an appropriate word to use for images and text displayed on a screen unless you are describing the entire experience. Do yourself ( and us) a favor and throw that whole idea out the window and start at #333 to pure black on white as your minimum contrast unless something particularly important in the overall aesthetic changes that priority. In at least 100 examples where one of the audit fixes was "change font to #000" was the follow up feedback by a client or user tester saying that the gray was better or that "its unnatural" or "way too legible" nor a single case of analytics showing less dwell or read time ( or conversions) from users. Complete design myth and it should die
- wmeredith 6y ago
  Black on white is considered unnatural because it doesn't really ever occur in nature. I agree on the text is not an afterthought thing. It should be the first thought. Content is and always will be king.
  - nerdponx 6y ago
    But it occurs in print, which humans have become very accustomed to over the last 500 years. It's like the "paleo food" argument that somehow we aren't properly evolved to digest grains.
    - blisse 6y ago
      Books don't have white backgrounds, it's usually a lighter gray, which doesn't introduce the contrast problem. This is also a problem for text on printer paper, where most people would benefit from a larger font and slightly less than 100% black.
    - Aeolun 6y ago
      Maybe we’re not perfect for grains, but I’d say we’re doing pretty damn well :P
ChrisMarshallNY 6y ago
This is nice. I'll bookmark it. For a lot of things, I've learned to step back, and let trained designers come up with a lot of this kind of thing. They don't always do things the way that I would, and I sometimes need to bite my tongue, but I think it's important to let them dictate things like graphic design and UI. Most of my interaction is designing the software with as many "hooks" as possible, and also acting as an agent of the platform UI standards (in my case, Apple).
mdoms 6y ago
This way of thinking is why every commercial software package looks the same. Why must every background and panel be grey? Why must we have only one primary colour? Why must every colour field have edges?
- lytedev 6y ago
  Ignoring these guidelines can easily and quickly devolve into something that is tacky or even garish.
- williamdclt 6y ago
  Probably because these guidelines have been "proven to work" to produce a usable UI. The priority of commercial software isn't usually to produce a work of art, it's to produce a usable tool, there's little incentive to take creative risks.
pm90 6y ago
I hope we see more articles like this on HN. I am not a designer, but when I build a site, just some basic guidance around design would make it much nicer.
nbzso 6y ago
I am shocked sometimes on how "designers" are in mass without a solid design foundation. In context of usability and interface there is a simple rule: contrast and white space is mandatory. For colours and palettes there are a ton of solid research and historically validated materials. If you are designer do your self a favour and invest time and money not on "quick and dirty" approach on this subject but in building serious knowledge about colour. Colour is deep topic with functional and emotional impact on the user. I am with impression that tools and product implementation are leading real design process. And this is bad. Tech knowledge is a tool for implementation. Design knowledge is not new. This article is good selling pitch but knowledge-wise is scratching the surface of the topic.
- mushbino 6y ago
  Unfortunately, compared to engineering there's a low barrier to entry for design. Many, especially small companies make their design hires without knowing what they're looking for. There are many nebulous concepts involved so it's easy to underestimate the challenges involved. For example, I took two semesters of color theory in college and we barely scratched the surface.
  - nbzso 6y ago
    You are obviously right. For those that are curious enough this books have a great value: https://www.amazon.com/Theory-Application-Springer-Optical-Sciences/dp/354009654X/ref=sr_1_2?dchild=1&keywords=Color+Theory+and+Its+Application+in+Art+and+Design&qid=1606086553&sr=8-2 https://www.amazon.com/Theory-Application-Springer-Optical-S... https://www.amazon.com/Contemporary-Color-Theory-Steven-Bleicher-ebook/dp/B00B6G3HE8/ref=sr_1_1?crid=2KQT82SQHL79F&dchild=1&keywords=contemporary+color+theory+and+use&qid=1606086505&sprefix=Contemporary+Color+Theory+%26+Use%2Caps%2C274&sr=8-1 https://www.amazon.com/Contemporary-Color-Theory-Steven-Blei...
1970-01-01 6y ago
The first example reminded me of the great Win 3.1 Hotdog Stand: https://blog.codinghorror.com/a-tribute-to-the-windows-31-hot-dog-stand-color-scheme/ https://blog.codinghorror.com/a-tribute-to-the-windows-31-ho...
leonmoonen 6y ago
I’m totally stunned you would not even consider for a minute the ~10% of people who are colorblind (not part of that group, but always aware while creating visualizations as a scientific writer)
- jaxn 6y ago
  Thank you! Colorblind friendly red/yellow/green for status for danger/warning/success goes a long way. And it's not that hard.
- dilawar 6y ago
  I am part of colorblind groups. People loves mixing green and red in scientific plots in papers I read. It's effing irritating. 10% is not such a small number, we are many more than IE users.
- themacguffinman 6y ago
  That seems pretty out of the scope of this article. An article about accessibility can be covered separately and most accessibility articles already recommend that color isn't the only indicator, so a warning/error is still distinguishable with icons & shapes & text. It's kind of discouraging to see insinuations that the author doesn't consider certain people because an article doesn't explore and include caveats for everything.
- xgad 6y ago
  To be fair, the full book, "Refactoring UI" — from which this article sourced — has a section on color accessibility. To quote from there: > "Always use color to support something that your design is already saying; never use it as the only means of communication."
edem 6y ago
I'm at a loss here. Which value should I change when I try to create different shades of color X? The hue? Brightness? What kind of color encoding should I use?
- alexmingoia 6y ago
  The hue is the color, so generally you should change the lightness and saturation to get a different shade. You should use HSL (hue-saturation-lightness) because that’s what CSS3 uses, and HSL/HSV are colorwheels designed for representing RGB (what screens use). HSL/HSV attempt to mimic paint mixing. Hue is the color. It’s a degree because imagine all colors of the rainbow arranged in a circle, that’s the color wheel and each degree corresponds to a different color. Saturation is how much color (0% saturation at 50% lightness is grey), and lightness is how light or dark the color is (0% is black, 100% is a very bright color or white depending on the saturation). Here’s a good article on HSL/HSV with diagrams: https://psychology.wikia.org/wiki/HSL_and_HSV https://psychology.wikia.org/wiki/HSL_and_HSV
thom 6y ago
I’d genuinely find the blue and yellow design at the start delightful to use. Warm, bold, readable, tons of personality. My brain almost hurt looking at the drab follow-up.
PaulHoule 6y ago
Any design should make sense in black and white and color should be the cherry on top. Handicapped accessibility guidelines mandate specific contrast ratios but even normally sighted people see better resolution for changes in values than changes in hue and saturation. That is built into many video standards. So if you want to make the best of your eyes and the reproduction chain, do it! Ansel Adams popularized a "zone system" to get the most out of photography but some of the best illustration pays close attention to value. I've made a bunch of receipt printer prints of Pokémon characters and they look great printed on a bad printer because they were designed that way.
- jan6 6y ago
  I think you mean grayscale, not black and white? VERY different things, black and white is strictly 2 colors, grayscale is any gray shade
compscistd 6y ago
I'm building a color palette now for a hobby site. The MaterialUI color guide matches this writeup pretty well. An additional guide that I would love to see: how to make a complementary dark mode (or light mode) palette that still holds on to your app's existing color brand.
- CPUstring 6y ago
  So many times, dark mode just seems like somebody pressed the "invert color" option
paulsmith 6y ago
It would be cool to see a follow-up post that incorporates patterns (different marks likes dots and hatches, different densities, etc.) as an additional distinguishing characteristic for areas fills that aids accessibility.
stickfigure 6y ago
Maybe I'm a weirdo but I rather like his first example of "unless you want your site to look like this". The red is a bit much but it is an error message, after all. Overall it looks like the iconic Santa Fe Railroad "bluebonnet" color scheme: https://www.google.com/search?q=santa+fe+bluebonnet&source=lnms&tbm=isch&sa=X&ved=2ahUKEwj93Mrt1ZftAhW7GTQIHZ7tC4MQ_AUoAXoECA8QAw&biw=1280&bih=900&dpr=2 https://www.google.com/search?q=santa+fe+bluebonnet&source=l... It would certainly stand out on my desktop. Depending on the application, could be a plus. Probably not natural for a mail client or text-centric app, but you never know.
- xori 6y ago
  I agree, I thought the same thing when I hit that section. "What's wrong with that?"
- justusthane 6y ago
  I am not a designer, but I thought that that example is both awful and reflected my own experience with color scheme generators (“How do I make a design look good with these five colors?!”). The sidebar is okay I think, but the yellow for the pane pane would be incredibly overwhelming scaled up to a full page. Also the blue text on yellow does weird things to my eyes.
  - Aeolun 6y ago
    Problem is that most generators just give you your two or three primaries. You’d need to turn those into the 50 to 900 range of shades that the author talks about.
- sundarurfriend 6y ago
  The yellow background to the text is the only major problem for me. Otherwise, it seems like a perfectly cromulent UI.
nstart 6y ago
> It's important to note that there are no real rules here like "start at 50% lightness" or anything — every color behaves a bit differently, so you'll have to rely on your eyes for this one. My hunch is that this is dependent on contrast. I've also seen several comments talking about designing in black and white first and then adding colour. A lot of this feels similar to painting. When learning to paint you first learn to paint in black and white to understand values (lightness/darkness) and contrast. This is not directly related but there's a great video on painting that shows how the colour picker's values can be deceiving in showing the true brightness/contrast of colours. If anyone's interested in how colours truly relate to brightness this video is definitely worth a watch -> https://youtu.be/gJ2HOj22gDo https://youtu.be/gJ2HOj22gDo
mlacks 6y ago
I was able to do this using the “brand” function in Adobe Spark. All online
kuharich 6y ago
Past comments: https://news.ycombinator.com/item?id=18421755 https://news.ycombinator.com/item?id=18421755
visarga 6y ago
Does anyone know a good categorical color palette with equal perceptual intensity? I mean, all colors should be maximally distinct in any ordering they come. I can get up to 10 colors by hand but then they all start looking too similar. I am using it to display spans in a text labeling interface.
- PI_ZA 6y ago
  Sounds like a great idea for a long term poll. Task varied persons through several generations across the world with categorizing colors. If somethings similar has been done I'd love to know.
manceraio 6y ago
I created an AI palette generator using two neural networks trained with the Tailwind CSS shades. It works better than I ever expected, but it has of course its corner cases. It's open sourced: tailwind.ink
- dawnerd 6y ago
  That looks nice but setting the base to something like #332F4B makes all the colors look the same.
  - manceraio 6y ago
    yep, that's a corner case...
- polk 6y ago
  Thank you, this looks super useful! In case you're considering taking this further: a Figma plugin for this would make it 10x better. Changing the seed color could automatically update the color styles in the file, and would so propagate to every component and element. That would make an incredibly useful tool for experimenting with color schemes.
  - manceraio 6y ago
    I coded a beta plugin for Figma. I don't know how to contact you, but if you read this comment, please DM on Tweeter at @manceraio so I can share it with you!
- dannyeei 6y ago
  This is awesome! Thanks for sharing! I'll definitely be using this soon
danybittel 6y ago
It's pretty good advice. I'd like to add that colors aren't defined in vacuum. You probably want to start with a mockup design, add some colors. Then grab those colors and start to nail them down. Then put the updated colors back into more designs. Do this back and forth a couple of times. Do not spend too much time staring at color palettes.
tdons 6y ago
Stripe has (what looks like) a great tool to help with this: https://stripe.com/blog/accessible-color-systems https://stripe.com/blog/accessible-color-systems It'd be fantastic if they could open source it, are there any Stripers here that could nudge the right people? :-)
flohofwoe 6y ago
This might sound strange to today's UI design crowd, by why is there so much emphasis on applications picking their own color palette when this should be the job of the operating system? As a user I want a "coherent experience" when using my computing device, also when several apps are on screen at the same time. Your fancy app is not the center of the universe and doesn't "deserve" its own color palette. If I'm in a "green mood" today, I want to pick a green color palette for all apps, the same way I can switch to a different background image.
- mqus 6y ago
  I disagree. I think that the OS should provide a set of UI elements so that all applications have a similar navigation and learnability. Colors however are a great way to set a Brand and distinguish apps from another. A benefit is that I can instantly see if I'm in Powerpoint(red) or Excel(green), even if the view I have is just some pixels wide (e.g. previews). But i can definitely see the appeal of a system wide color scheme. Dark mode is a nudge in this direction.
codewithstein 6y ago
Nice post. Really interesting to read!
krsdcbl 6y ago
I feel like the article intentionally misses a huge point about those color palette generators. They aren't and weren't ever meant to be used as-is. They intend to give you a base of color harmonies from wich to derive all those shades for primaries, accents etc.
gideon_b 6y ago
This article is great. The one thing I would add is that once you pick your base color, the lighter shades are probably going to be low saturation and the darker shades are going to be high saturation.
laroccaf 6y ago
I made a tool a little while ago that helps generate color shades and blends: https://colorkit.io https://colorkit.io It's nice that Bootstrap, Tailwind, and other libraries come with default shades of gray and colors, but I think these should typically be customized to match the brand, so I made this tool to speed up that process!

1019 points by clessg 6y ago

So, the answer is, blue.

There were some studies about how colors had systematic effects on user mood. But they were before the replication crisis and I could easily imagine them falling through - does anyone know the current state?

petepete 6y ago

This used to be so much more of a pain before Sass (and friends) came along. Having a red error box with a separate border colour used to be a pain to maintain but it's so simple with darken/lighten and a few commonly used context-specific variables.

kowlo 6y ago
Do you have any resources or examples you recommend for this? My front-end knowledge is over a decade old. I would still be assigning all these colours individually in CSS!
- 1f60c 6y ago
  Sass Basics seems like a good place to start: https://sass-lang.com/guide https://sass-lang.com/guide
- petepete 6y ago
  I don't have anything to hand and I only use a tiny number of Sass's built-in features, but here's a super-quick demo of styling with variables and darken (https://sass-lang.com/documentation/modules/color#darken https://sass-lang.com/documentation/modules/color#darken). https://jsfiddle.net/peteryates/uqdnj4sa/10/ https://jsfiddle.net/peteryates/uqdnj4sa/10/ Note, darken and lighten aren't always favoured these days, it's good advice to learn scale (https://sass-lang.com/documentation/modules/color#scale https://sass-lang.com/documentation/modules/color#scale), but darken or lighten makes for an easier demo.
- Andrex 6y ago
  You could start with native CSS variables. :) https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c...
  - dairylee 6y ago
    Not very easy to darken/lighten colours easily using CSS variables at the moment. Support will be coming in the future.
    - schpaencoder 6y ago
      I find it quite easy. Just use the hsl() function.

kowlo 6y ago

Interesting post! I had a look at the Refactoring UI packages, $99 ($79 on sale) seems a little steep for a PDF and three videos.

dinkleberg 6y ago
I got it a while back and have to say it was worth it. Sure it’s more expensive than a normal book, but if $100 can get me the condensed reference of an expert then I see it as a win.
nathancahill 6y ago
The book is absolutely worth it.
markdown 6y ago
Worth it if you're not from the web design world. For those already in that sphere, there's nothing new here; no lesson that hasn't already been taught in web design blogs over the years.
weaksauce 6y ago
it's a quite good book and worth it if you are doing it professionally. condensed, well written, good advice.

reificator 6y ago

My biggest issue when I'm trying to put together a palette is that dark mode comes first in my eyes, with a light mode as an option later should people request it. So much of the existing advice seems easy to follow in light mode but doesn't click for me the other way around.

enriquto 6y ago

All these examples use way too many colors. The ideal (and minimum) number of colors for a sober site is two: one color for the background and a very different color for the text, each of them an extreme and opposite shade of gray. If you are really fancy, add a third color on a couple of very small places, almost inconspicuously. More than three colors results in an ugly pastiche. The worst offence is having several slightly different shades of the same base color. This is what this article seems to propose and it is unbearably horrendous.

Jolter 6y ago
Can you show a pretty example of the approach you’re advocating? I’m skeptical, you see. I’ve never seen an attractive web site designed that way.
- enriquto 6y ago
  Wikipedia is the perfect example: black text on white background with blue hyperlinks. It does not get more attractive than that in my opinion.
  - seanwilson 6y ago
    Example: https://en.wikipedia.org/wiki/Hacker https://en.wikipedia.org/wiki/Hacker There's yellow, orange, blue borders, grey borders, different shades of blue for different links, grey background etc. so you're oversimplifying. The linked article even makes the point you end up needing several greys, reds etc. for things like borders and warning pop-ups. Nobody is arguing you should have 10 brand colours.
    - enriquto 6y ago
      OK, so there are more colors. The example that you show uses colors to signal things that are wrong with the current page. This is somewhat logical: if things look wrong (because there are more than three colors) then they are wrong. Regular wikipedia entries do not have yellow nor orange: https://en.wikipedia.org/wiki/Riemannian_manifold https://en.wikipedia.org/wiki/Riemannian_manifold You are right that there's still more colors: very light shades of gray, and a thin light blue line for separator. They are almost imperceptible on my screen, but I would say that the page would look even better if the thin separator was black, and there were no different background shades.

corytheboyd 6y ago

This seems like great succinct advice in an area the I have definitely struggled before, thanks for sharing! Wow this book sounds extremely promising as well, I think I’ll end up purchasing it in the future

taffer 6y ago
It was also co-authored by Adam Wathan, the creator of the tailwind css framework.
- corytheboyd 6y ago
  Ah, I too love his work. I have yet to use tailwind but I plan on it for my current project. Read his rationale behind utility classes vs semantic/classic/whatever-you-call-it CSS and... it just makes so much sense. It reads like he thought of every “well, but what about X” and it shows

arendtio 6y ago

When I saw that palette it felt so familiar, then I started reading: > Adapted from our book and video series, Refactoring UI. Well yeah, this explains it, as I have bought (and read!) the book a while ago. The book isn't too extensive, but I don't regret any penny spent on it. Actually, I revisit it from time to time to internalize the lessons.

nmfisher 6y ago
I actually toyed with asking for a refund on this book (though in the end I decided not to). Except the palette chapter, it doesn't help you build an aesthetically pleasing design from the ground up. All the examples are about making "meh" design better - but many of us back-end developers would be over the moon if we were able to make "meh" design in the first place. It's also really only helpful for designing 'webform'-style applications (where the main purpose is structuring a lot of information). There are no general principles of design that that would be applicable to something like an interactive mobile application. I'm not bagging the book, I still think it's quite good for what it is and I did find it modestly useful (which is why I didn't request a refund). But rightly or wrongly, I thought it would be a good introduction to the fundamentals of visual design, which it mostly isn't.
- svat 6y ago
  > many of us back-end developers would be over the moon if we were able to make "meh" design in the first place > I thought it would be a good introduction to the fundamentals of visual design I can relate, so a recommendation from me may be a case of the blind leading the blind, but the best such book I've seen is The Non-Designer's Design Book by Robin Williams (the writer, not the actor). (It's up to four editions now but get any one; mostly only the examples change.) The second half of the book is about type, and the first half is organized around four principles: Contrast–Repetition–Alignment–Proximity, leading to a memorable acronym that you may have found elsewhere but whose origin is this book. She starts with examples of designing things like brochures and flyers, but IMO if you remember to apply those 4 principles as illustrated in the book, you go from “ugh, I don't know why this looks ugly” design to pretty effective design.

TazeTSchnitzel 6y ago

Hmm, but 90's UI design got by with far fewer shades. Windows 95 has at most seven colours[0] used in the UI aside from the desktop background and icons, and yet it had a very clear visual hierarchy compared to today's designs. [0] light gray, dark gray, white, black, navy blue, the other gray (scrollbars), the light yellow used for help text backgrounds

zer0tonin 6y ago
Honestly I don't think this opinion is shared by a majority of users.
- TazeTSchnitzel 6y ago
  I don't know what the “majority of users” think. What I can say is that not knowing if something was a button was not a problem Windows 9x had.
  - allenu 6y ago
    You can make a usable product using a Windows 95 palette, but I think it may look outdated to users. Depending on your target market, the color scheme you use can have an effect on how your product is perceived by your potential customers. User tastes and expectations have become more sophisticated since the 90s and users expect a higher level of polish now than back then. That can include color choice as a part of overall branding.
    - TazeTSchnitzel 6y ago
      It must be possible to achieve a happy medium: something with the legibility of an older design that doesn't look dated or unpolished. (Though I reject the notion that 90's designs weren't sophisticated or polished.) It doesn't need to limit itself to six colours, but I'm not convinced that an endless series of shades with low contrast to one another is good design from a functional perspective.
  - Veen 6y ago

rubyn00bie 6y ago

Gonna say I really appreciate this article, and I feel a bit dense in hindsight. I've had a helluva time trying to understand a lot of design articles talking about 3-5 colors... "Why does everything I make using these same colors look like shit tho?" and that's because they ain't using only 3-5! Those two screenshots could not have been more helpful for me or true to life. I now only wish all these online "color palette" tools were actually useful instead of just starting points.

anomaloustho 6y ago

I think there is a lot of validity to this article. But extrapolated as “general advice” would seem to replicate Bootstrap aesthetics every time. Saying, “Well, you need a color for the errors, and the successes, and the warnings” will almost invariably provoke the answers “Red, Green, Yellow” in some varying shade. The net effect is we can all tell when a website is using bootstrap or lacks branding. If you are taking out the time to steer away from appearing generic and are trying to differentiate your app design and branding, I think this advice might be a subtle disservice. You can change the presentation of the message by changing the position, the font, the size, the shape, the weight. You can add icons and other visuals. (E.g. your company’s mascot making a sad face). Looking at errors and warnings handled in Google’s websites (not the generic Material UI Kit), Apple products, Slack, etcetera can be used as an example to see that “You need a color for errors, and a color for successes, and a color for warnings.” is not necessarily the only way to design errors, warnings, and successes.

jjcm 6y ago
> “You need a color for errors, and a color for successes, and a color for warnings.” is not necessarily the only way to design errors, warnings, and successes. It's not the only way, but it is the best way. Straying too far from semantic meanings of colors can create confusion for users that expect a certain thing. Can you imagine if your bank had a two buttons - "delete account" and "cancel", where the delete button was green and inviting and the cancel was red? Danger should be semantic if your app has any sort of high risk actions involved in it. It's fine if a game or a rss reader uses their own funky palette that shows off their brand, but any time you start handling money you should really stray away from that.
stevenhuang 6y ago
Yeah no. If a design calls for something like green colored errors then that is simply bad design. Please be unique in other ways.
- anomaloustho 6y ago
  I think it’s fair to say that “swapping” the symbolic colors with each other would be an antipattern in most cases. But here’s one scenario. Let’s assume the app in question is used for therapy or meditation[0] and its primary color is a sage green to emphasize calmness and a connection with nature. (BetterHelp is an example) In this case, red over navy green is one direction you could go in. But another direction might be a notice with a darker green background and a large white error graphic (bold exclamation marker with a circle or triangle). The header could read “Error” in bold and the error message could appear in white. To me the dark-green/white mixture would just as clear and usable as the red-over-green method. [0] Theoretical Branding - https://dribbble.com/search/Therapy https://dribbble.com/search/Therapy

imposter 6y ago

Annnd this is exactly why I now exclusively use tailwind, wherever I can.

jdamon96 6y ago
haven't used tailwind before - why is it particularly helpful for UI color palettes?

deleted 6y ago

[deleted]

amelius 6y ago

Looks pretty, yet ... why do I get the feeling that I've seen those designs a million times before?

xkyscore 6y ago
So many designers just rip off the design team at Stripe, even the author of this article frequently raves about Stripe.

jjcm 6y ago

I work on design systems as my day-to-day job. This is the first post I've seen on HN that actually captures how to properly set up your color palette. The author's early call out on how palette generators are not a one-stop-shop for your color palette rings true. Color meaning and harmony cannot be broken down into a mathematical formula. It's too heavily influenced by a.) biology, b.) trends, and c.) culture. RGB simply does not map 1:1 with our biology. We can't say, "ok here's a simple formula that will create two color that have harmony with humans universally". We can approximate it, but there's no perfect system out there for it. Other color modes (such as HSL or LAB) help, but come with their own drawbacks as well. Trends is another matter that is rarely considered or talked about. We as society gravitate towards certain colors within each geographical market. As a UX designer, it's important to stay within the bounds of these. There are certain things in life that should follow trends, many of which are items that convey important meaning. Can you imagine if every city in America used a different stop sign? It would be disastrous. Having one universal shape/symbol reduces the mental load required to recognize the meaning of the object. Likewise if a market gravitates towards a certain shade of red as dangerous, then you should stay close to that color when choosing your design palette. Over time these colors will shift as the trends slowly evolve - this is not something that can be approximated by a formula. The last bit is culture. Color in each culture is widely different. Red in China conveys prosperity, which is why if you look at designs for stock portfolio apps in China, graphs are red when going up in price. In India it represents purity. In the Western world it's danger. None of this can be captured in a formula. The author breaks down what the correct approach is when choosing color - breaking down meaning and extrapolating shades in your ramp to create a useful, well supported palette.

amelius 6y ago
> This is the first post I've seen on HN that actually captures how to properly set up your color palette. This is just a Boostrap color palette that I see here and it would be nice if they'd been a bit more creative. Imagine if Rembrandt used Boostrap colors in all his paintings and all his peers copied him ... that would be a boring world, but alas, that's what the internet is currently like, and articles like these certainly don't help.

awinter-py 6y ago

oh man have gone through the pallete generator exercise and ended up with the lame yellow-background example they show I feel seen grey message text is annoying though -- always go for contrast

allenu 6y ago

I thought I had a good sense of aesthetics, but I struggled with coming up with a color scheme for my own app. Once you pick colors that look nice, when you put them together, something always seems off! There isn't a unity and it's hard as an analytical thinker to explain why. You just can feel it. Articles like this helped me out a bit, as well as just trying different things. This includes taking an app or website you like and analyzing the colors they use. It helps to look at their use of saturation and lightness in specific elements (i.e. CTAs are typically more saturated and backgrounds and other elements you wish to mute are less saturated). In the end, if you can come up with a cohesive color palette, your product definitely looks more polished and professional. You have an overall feeling of confidence in it, even if the code has not changed one bit. It's like suspension of disbelief in a movie. When you hit something that shatters the illusion, you're taken out of the story and just look at the film as a series of filmed events played out in sequence and less like a narrative.

helmholtz 6y ago
I checked out your website and the app listed on your profile and they definitely looks professional and polished! Would you care to share the resources you used to learn this stuff? Even better if you could write more about your own journey. It's exactly the not-a-designer-by-trade-but-enthusiastic-about-it types whose backgrounds I can relate to the most.
- allenu 6y ago
  Thanks for the compliment! Honestly, it would be challenging to distill it down into a post. I don't think I could convey it well enough. A lot of the journey is just training your eye to see things you like and ask what makes it the way it is. You just kind of have to develop an eye for white space, colors, visual hierarchy, and more. It's a heavy topic. Like writing, it takes practice, and when you do create something, it takes a lot of heavy editing and refining to simplify it more and more.
  - snoshy 6y ago
    I haven't seen your work, but this to me is generally excellent advice. I wish more people would provide and hear it. There is a level of effort required to get good at effectively conveying information to others, and it is best learned by critically observing the situations that have done so in your personal experience.

hedora 6y ago

Has someone written a web browser plugin to clamp all the off white grays to white, and the off black grays to black? I paid for a high contrast screen with uniform black and whites. I don’t want to clamp the palette to stuff that looks good on a worn out tft.

likeclockwork 6y ago
The funny thing is that it doesn't. That worn out monitor has worse contrast so everything just looks ever muddier.

crazygringo 6y ago

> True black tends to look pretty unnatural, so start with a really dark grey I wish this myth would die. #000 is already dark gray on any normal real-life screen anyone uses because of ambient light, halos, etc. It's nowhere near "true black". There is a good reason to avoid pure black or pure white in an interface, but it's nothing to do with "naturalness" or even legibility. It's simply so that images or content which do include the full brightness gamut from #000 to #FFF "pop" in comparison. You want the darkest shadows and brightest highlights to catch your attention, and not have them compete with browser or interface chrome. An interface is generally intended to "recede" next to actual content. But if your interface is star of the show? Use pure black and pure white. Go crazy. It's been used to great effect before.

coldtea 6y ago
>I wish this myth would die. #000 is already dark gray on any normal real-life screen anyone uses because of ambient light, halos, etc. No, it's not. And with OLED, mini-LED etc, it will be even less so.
- manmal 6y ago
  OLED ghosting is another thing to consider - using a very dark gray instead of 000 prevents pixels from switching off, and prevents ghosting.
  - ddingus 6y ago
    Technical performance is an entirely different matter. The "unnatural" black argument is not valid, as others are making clear. Avoiding display artifacts is something different. And it is not "unnatural" black. It is better to discuss black, as in 0, in those terms that have a basis in reality. "Unnatural" black is not reality.
    - manmal 6y ago
      I agree. In my case, my art teacher told us, almost 20y ago now, that we shouldn’t use pure black in digital design because it‘s unnatural. He failed to explain why though, and I never found an argument that didn’t sound dogmatic, so I‘ve filed it under cargo cult.

theartfuldodger 6y ago

I audit sites frequently, the most common flaw is designers treating text as an afterthought. This article had one point that probably assists in the poor contrast choices that are so common. As I type in black on white in this text box I have trouble understanding why design professionals would call "black" on white unnatural. It is not. Unnatural isn't even an appropriate word to use for images and text displayed on a screen unless you are describing the entire experience. Do yourself ( and us) a favor and throw that whole idea out the window and start at #333 to pure black on white as your minimum contrast unless something particularly important in the overall aesthetic changes that priority. In at least 100 examples where one of the audit fixes was "change font to #000" was the follow up feedback by a client or user tester saying that the gray was better or that "its unnatural" or "way too legible" nor a single case of analytics showing less dwell or read time ( or conversions) from users. Complete design myth and it should die

wmeredith 6y ago
Black on white is considered unnatural because it doesn't really ever occur in nature. I agree on the text is not an afterthought thing. It should be the first thought. Content is and always will be king.
- nerdponx 6y ago
  But it occurs in print, which humans have become very accustomed to over the last 500 years. It's like the "paleo food" argument that somehow we aren't properly evolved to digest grains.
  - blisse 6y ago
    Books don't have white backgrounds, it's usually a lighter gray, which doesn't introduce the contrast problem. This is also a problem for text on printer paper, where most people would benefit from a larger font and slightly less than 100% black.
  - Aeolun 6y ago
    Maybe we’re not perfect for grains, but I’d say we’re doing pretty damn well :P

ChrisMarshallNY 6y ago

This is nice. I'll bookmark it. For a lot of things, I've learned to step back, and let trained designers come up with a lot of this kind of thing. They don't always do things the way that I would, and I sometimes need to bite my tongue, but I think it's important to let them dictate things like graphic design and UI. Most of my interaction is designing the software with as many "hooks" as possible, and also acting as an agent of the platform UI standards (in my case, Apple).

mdoms 6y ago

This way of thinking is why every commercial software package looks the same. Why must every background and panel be grey? Why must we have only one primary colour? Why must every colour field have edges?

lytedev 6y ago
Ignoring these guidelines can easily and quickly devolve into something that is tacky or even garish.
williamdclt 6y ago
Probably because these guidelines have been "proven to work" to produce a usable UI. The priority of commercial software isn't usually to produce a work of art, it's to produce a usable tool, there's little incentive to take creative risks.

pm90 6y ago

I hope we see more articles like this on HN. I am not a designer, but when I build a site, just some basic guidance around design would make it much nicer.

nbzso 6y ago

I am shocked sometimes on how "designers" are in mass without a solid design foundation. In context of usability and interface there is a simple rule: contrast and white space is mandatory. For colours and palettes there are a ton of solid research and historically validated materials. If you are designer do your self a favour and invest time and money not on "quick and dirty" approach on this subject but in building serious knowledge about colour. Colour is deep topic with functional and emotional impact on the user. I am with impression that tools and product implementation are leading real design process. And this is bad. Tech knowledge is a tool for implementation. Design knowledge is not new. This article is good selling pitch but knowledge-wise is scratching the surface of the topic.

mushbino 6y ago
Unfortunately, compared to engineering there's a low barrier to entry for design. Many, especially small companies make their design hires without knowing what they're looking for. There are many nebulous concepts involved so it's easy to underestimate the challenges involved. For example, I took two semesters of color theory in college and we barely scratched the surface.
- nbzso 6y ago
  You are obviously right. For those that are curious enough this books have a great value: https://www.amazon.com/Theory-Application-Springer-Optical-Sciences/dp/354009654X/ref=sr_1_2?dchild=1&keywords=Color+Theory+and+Its+Application+in+Art+and+Design&qid=1606086553&sr=8-2 https://www.amazon.com/Theory-Application-Springer-Optical-S... https://www.amazon.com/Contemporary-Color-Theory-Steven-Bleicher-ebook/dp/B00B6G3HE8/ref=sr_1_1?crid=2KQT82SQHL79F&dchild=1&keywords=contemporary+color+theory+and+use&qid=1606086505&sprefix=Contemporary+Color+Theory+%26+Use%2Caps%2C274&sr=8-1 https://www.amazon.com/Contemporary-Color-Theory-Steven-Blei...

1970-01-01 6y ago

The first example reminded me of the great Win 3.1 Hotdog Stand: https://blog.codinghorror.com/a-tribute-to-the-windows-31-hot-dog-stand-color-scheme/ https://blog.codinghorror.com/a-tribute-to-the-windows-31-ho...

leonmoonen 6y ago

I’m totally stunned you would not even consider for a minute the ~10% of people who are colorblind (not part of that group, but always aware while creating visualizations as a scientific writer)

jaxn 6y ago
Thank you! Colorblind friendly red/yellow/green for status for danger/warning/success goes a long way. And it's not that hard.
dilawar 6y ago
I am part of colorblind groups. People loves mixing green and red in scientific plots in papers I read. It's effing irritating. 10% is not such a small number, we are many more than IE users.
themacguffinman 6y ago
That seems pretty out of the scope of this article. An article about accessibility can be covered separately and most accessibility articles already recommend that color isn't the only indicator, so a warning/error is still distinguishable with icons & shapes & text. It's kind of discouraging to see insinuations that the author doesn't consider certain people because an article doesn't explore and include caveats for everything.
xgad 6y ago
To be fair, the full book, "Refactoring UI" — from which this article sourced — has a section on color accessibility. To quote from there: > "Always use color to support something that your design is already saying; never use it as the only means of communication."

edem 6y ago

I'm at a loss here. Which value should I change when I try to create different shades of color X? The hue? Brightness? What kind of color encoding should I use?

alexmingoia 6y ago
The hue is the color, so generally you should change the lightness and saturation to get a different shade. You should use HSL (hue-saturation-lightness) because that’s what CSS3 uses, and HSL/HSV are colorwheels designed for representing RGB (what screens use). HSL/HSV attempt to mimic paint mixing. Hue is the color. It’s a degree because imagine all colors of the rainbow arranged in a circle, that’s the color wheel and each degree corresponds to a different color. Saturation is how much color (0% saturation at 50% lightness is grey), and lightness is how light or dark the color is (0% is black, 100% is a very bright color or white depending on the saturation). Here’s a good article on HSL/HSV with diagrams: https://psychology.wikia.org/wiki/HSL_and_HSV https://psychology.wikia.org/wiki/HSL_and_HSV

thom 6y ago

I’d genuinely find the blue and yellow design at the start delightful to use. Warm, bold, readable, tons of personality. My brain almost hurt looking at the drab follow-up.

PaulHoule 6y ago

Any design should make sense in black and white and color should be the cherry on top. Handicapped accessibility guidelines mandate specific contrast ratios but even normally sighted people see better resolution for changes in values than changes in hue and saturation. That is built into many video standards. So if you want to make the best of your eyes and the reproduction chain, do it! Ansel Adams popularized a "zone system" to get the most out of photography but some of the best illustration pays close attention to value. I've made a bunch of receipt printer prints of Pokémon characters and they look great printed on a bad printer because they were designed that way.

jan6 6y ago
I think you mean grayscale, not black and white? VERY different things, black and white is strictly 2 colors, grayscale is any gray shade

compscistd 6y ago

I'm building a color palette now for a hobby site. The MaterialUI color guide matches this writeup pretty well. An additional guide that I would love to see: how to make a complementary dark mode (or light mode) palette that still holds on to your app's existing color brand.

CPUstring 6y ago
So many times, dark mode just seems like somebody pressed the "invert color" option

paulsmith 6y ago

It would be cool to see a follow-up post that incorporates patterns (different marks likes dots and hatches, different densities, etc.) as an additional distinguishing characteristic for areas fills that aids accessibility.

stickfigure 6y ago

Maybe I'm a weirdo but I rather like his first example of "unless you want your site to look like this". The red is a bit much but it is an error message, after all. Overall it looks like the iconic Santa Fe Railroad "bluebonnet" color scheme: https://www.google.com/search?q=santa+fe+bluebonnet&source=lnms&tbm=isch&sa=X&ved=2ahUKEwj93Mrt1ZftAhW7GTQIHZ7tC4MQ_AUoAXoECA8QAw&biw=1280&bih=900&dpr=2 https://www.google.com/search?q=santa+fe+bluebonnet&source=l... It would certainly stand out on my desktop. Depending on the application, could be a plus. Probably not natural for a mail client or text-centric app, but you never know.

xori 6y ago
I agree, I thought the same thing when I hit that section. "What's wrong with that?"
justusthane 6y ago
I am not a designer, but I thought that that example is both awful and reflected my own experience with color scheme generators (“How do I make a design look good with these five colors?!”). The sidebar is okay I think, but the yellow for the pane pane would be incredibly overwhelming scaled up to a full page. Also the blue text on yellow does weird things to my eyes.
- Aeolun 6y ago
  Problem is that most generators just give you your two or three primaries. You’d need to turn those into the 50 to 900 range of shades that the author talks about.
sundarurfriend 6y ago
The yellow background to the text is the only major problem for me. Otherwise, it seems like a perfectly cromulent UI.

nstart 6y ago

> It's important to note that there are no real rules here like "start at 50% lightness" or anything — every color behaves a bit differently, so you'll have to rely on your eyes for this one. My hunch is that this is dependent on contrast. I've also seen several comments talking about designing in black and white first and then adding colour. A lot of this feels similar to painting. When learning to paint you first learn to paint in black and white to understand values (lightness/darkness) and contrast. This is not directly related but there's a great video on painting that shows how the colour picker's values can be deceiving in showing the true brightness/contrast of colours. If anyone's interested in how colours truly relate to brightness this video is definitely worth a watch -> https://youtu.be/gJ2HOj22gDo https://youtu.be/gJ2HOj22gDo

mlacks 6y ago

I was able to do this using the “brand” function in Adobe Spark. All online

kuharich 6y ago

Past comments: https://news.ycombinator.com/item?id=18421755 https://news.ycombinator.com/item?id=18421755

visarga 6y ago

Does anyone know a good categorical color palette with equal perceptual intensity? I mean, all colors should be maximally distinct in any ordering they come. I can get up to 10 colors by hand but then they all start looking too similar. I am using it to display spans in a text labeling interface.

PI_ZA 6y ago
Sounds like a great idea for a long term poll. Task varied persons through several generations across the world with categorizing colors. If somethings similar has been done I'd love to know.

manceraio 6y ago

I created an AI palette generator using two neural networks trained with the Tailwind CSS shades. It works better than I ever expected, but it has of course its corner cases. It's open sourced: tailwind.ink

dawnerd 6y ago
That looks nice but setting the base to something like #332F4B makes all the colors look the same.
- manceraio 6y ago
  yep, that's a corner case...
polk 6y ago
Thank you, this looks super useful! In case you're considering taking this further: a Figma plugin for this would make it 10x better. Changing the seed color could automatically update the color styles in the file, and would so propagate to every component and element. That would make an incredibly useful tool for experimenting with color schemes.
- manceraio 6y ago
  I coded a beta plugin for Figma. I don't know how to contact you, but if you read this comment, please DM on Tweeter at @manceraio so I can share it with you!
dannyeei 6y ago
This is awesome! Thanks for sharing! I'll definitely be using this soon

danybittel 6y ago

It's pretty good advice. I'd like to add that colors aren't defined in vacuum. You probably want to start with a mockup design, add some colors. Then grab those colors and start to nail them down. Then put the updated colors back into more designs. Do this back and forth a couple of times. Do not spend too much time staring at color palettes.

tdons 6y ago

Stripe has (what looks like) a great tool to help with this: https://stripe.com/blog/accessible-color-systems https://stripe.com/blog/accessible-color-systems It'd be fantastic if they could open source it, are there any Stripers here that could nudge the right people? :-)

flohofwoe 6y ago

This might sound strange to today's UI design crowd, by why is there so much emphasis on applications picking their own color palette when this should be the job of the operating system? As a user I want a "coherent experience" when using my computing device, also when several apps are on screen at the same time. Your fancy app is not the center of the universe and doesn't "deserve" its own color palette. If I'm in a "green mood" today, I want to pick a green color palette for all apps, the same way I can switch to a different background image.

mqus 6y ago
I disagree. I think that the OS should provide a set of UI elements so that all applications have a similar navigation and learnability. Colors however are a great way to set a Brand and distinguish apps from another. A benefit is that I can instantly see if I'm in Powerpoint(red) or Excel(green), even if the view I have is just some pixels wide (e.g. previews). But i can definitely see the appeal of a system wide color scheme. Dark mode is a nudge in this direction.

codewithstein 6y ago

Nice post. Really interesting to read!

krsdcbl 6y ago

I feel like the article intentionally misses a huge point about those color palette generators. They aren't and weren't ever meant to be used as-is. They intend to give you a base of color harmonies from wich to derive all those shades for primaries, accents etc.

gideon_b 6y ago

This article is great. The one thing I would add is that once you pick your base color, the lighter shades are probably going to be low saturation and the darker shades are going to be high saturation.

laroccaf 6y ago

I made a tool a little while ago that helps generate color shades and blends: https://colorkit.io https://colorkit.io It's nice that Bootstrap, Tailwind, and other libraries come with default shades of gray and colors, but I think these should typically be customized to match the brand, so I made this tool to speed up that process!