Any other sites HN could recommend for picking colors? I suck at that.
Colourlovers is a classic I know about, but iirc it is complicated with copyright. https://www.colourlovers.com/
There's also this great article: https://refactoringui.com/previews/building-your-color-palet...
I use RGB 16,40,64 as the background.
I used Webflow CMS to build it, so I was a little bit limited in the amount of colors I could use unless I wanted to upgrade to the business plan lol.
- [ColorBrewer: Color Advice for Maps](http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3)
the second link has way too many colors to really be useful
Not the easiest feature to add, but would be exceptionally useful. Either way, I love what you do, mackenziechild and have followed your work for years.
You have inspired me over and over to improve DarwinMail . Some of your small design tips have vastly improved the UI of DarwinMail. Thank you so much for all your tutorials, tweets and general design inspiration.
PS: I also love that you were a designer first, and decided to learn how to code too. It's so useful to learn in that order. No wonder your projects are always so brilliant.
No affiliation, just a tool I've used.
The only drawback is that I cannot see the colors on the UI (on a sample website) like I can with Happy Hues. Granted, I can copy them into my website to test out.
I just love how easy it is to use Happy Hues.
Not sure whether that's possible with this site, since it was built without code.
A simpler solution I thought about what recreating the layout in Figma or Sketch, then someone could create their own palette simply by tweaking color swatches (and have it auto update on the mockup).
Still an incredibly useful website with a gorgeous design!
Possibly have notes on certain palettes, indicating their accessibility score.
If I'm in a dark room, using dark mode and expecting lower light levels, a sudden white backdrop is blinding.
Perhaps these dark themes are intended purely for design, not how best to design a dark mode.. but I'd really appreciate more design around the dark mode.
Honestly, large color changes bother me quite a bit in our software these days. I remember I always hated Slack's light mode because it was a right pane full of white - very bright, and the left pane was a dark mode contact/channel list, very dark. Why? It has always been very distracting to me, and I don't get why people think dark and light modes are so easily mixed.
Perhaps I'm an odd egg. I dunno. I definitely know nothing about style. All I know is I view the brightness of applications to be the foundation and competing brightness bothers me greatly.
Other than that I like the palettes.
Great effort on the site though - was fun to look through to look at some options.
I did the reload / separate pages because 1) to make my life easier building it lol and 2) so you could send links to specific palettes.
Check out the pushState/replaceState/popstate API to update the URI without reloading the page, while still sending users with the link directly to that colour scheme.
Also, there are a few ways to change url without reloads, though, yeah, that might add some complexity.
Great resource though, I'm bad at this, will certainly use in future I'm sure.
I'd love to be able to pick my own colours and to see how they look, instead of being bound by the pre-set ones... better yet being able to pick a 'starter' colour then having it create a complementary palette and seeing how that appears.
I've seen a lot of color generators but I start to apply them and quickly realized having a grab bag of colors that look good together does not mean I have any clue where to use each one... and the result looks just as bad as one with the wrong colors.
I've decided on some websites to entirely ditch this color scheme palette and just go with a full-on gradient: https://sdan.io/ since I couldn't find good schemes at the time.
using firedox here, the bottom 5 palettes on the left side are blank, but when you click them, they do work to change the colors..
Your photo, the black and white profile, shows you with a great expression, but I wonder about the clothing too much. I immediately start wondering what the material of the coat(?) is.. thoughts run through, it almost seems like a fur coat and that you have nothing on under it. As I look closer I notice there is a Tshirt under that just blends with the black and white, so the nude effect is likely unintentional.
Then I go back to the coat and keep wondering what this outfit is. Maybe it's more common in SV / Portland etc, but where I'm at it looks very unusual. Perhaps the whole picture looks more common, it's just the shoulders of the item that are perplexing.
Not saying this is bad, just offering a glimpse into what some other peeps may be wondering.
Your black and white photo
You could probably do the same thing with text styles by defining variables for things like headline font, body font, monospaced font, etc.
Giving names to colours in a universal spec like HTML5 would be asking for trouble. You'd be on a never-ending treadmill of new colours. Constants (however that's done, e.g. SASS variables) is clearly the way to go.
I notice it says that "A tint is created when you add white to a hue. .... you can create a tint by lowering the saturation value of your hue."
This is true in most paint programs, but shouldn't be. Moving a pure color like red to white is also an increase in value (i.e. brightness). So if you reduce saturation to zero while leaving the value the same, you should get a shade of gray (and it should be a darker shade if starting with purple/blue, as compared to say yellow)
I guess the way it tends to be done is so any combination of hue, saturation and value result in a valid color, but according to traditional color models such as Munsell, that shouldn't be true. (which is why the Munsell color solid is like a distorted sphere, rather than a cube) https://munsell.com/about-munsell-color/how-color-notation-w...
One of the major struggles I have is with the dark mode - is there a methodology to assign "dark" colors based on the existing "light" ones? Or should I do the design twice, one for the light and one for the dark mode version?
You can try inverting the colors used for the light theme to obtain a decent starting point for the dark theme design.
If you use SASS you can use `invert` for that, or `invert` from the CSS-in-JS library "polished"
For anyone curious how the inverse of a color is calculated, read this answer on StackExchange: https://graphicdesign.stackexchange.com/a/95100
so you might have miscategorized this, m1guelpf.
But Happy Hues is a better version imho :)
To me, colors have to be justified to be used anywhere in graphic design. But, I am pretty sure this would be an unpopular opinion amongst designers since color is such an integral part of "the look" today - anywhere and everywhere.
I take a hard lined approach towards design: Follow Swiss/International style for layout, minimal typography, use borders to seperate content, show hierarchy through type size first, and if colors are needed for additional context - use them sparingly.
I think the experience could be vastly improved by using CSS Variables (Custom Properties): you can update all the colors with JS in a single click (even the colors embedded in SVGs). That way, the color swap would be instant (no page reload) but you could still provide a direct sharing URL by replacing the state of the URL in the address bar.
It seems confusing to me and I don't like it. But I see how it could boost engagement.
I wonder how many more emojis we need to see until a "emoji-block" browser plugin becomes mainstream.
On the data side, I have often (mis)used colorbrewer  to play with colours and see what might work well in visualizations.
Also I get seasick from the animation when changing colors, would be nice if just the colors were fading and the layout stays constant.
I definitely don't think it's the end of developers though. Some of these no-code projects will grow to a point where they need more custom solutions where a developer will be needed.
End up doing everything in black and white.
Also, is this a clever ad for Webflow? If so, I’m not complaining...
useful ads >
But it seems very monocultural. I personally find them really distatesful (and isn't design about taste after all). Give me a nice saturated green any day.
As much as software design is about taste. So, depending on what your objective is, a lot or not at all but mostly somewhere in between.
Best practices, industry standards, the-right-tool-for-the-right-job-thinking, psychology, math, trends and, of course, personal feelings will all take part in the design decision making process.
To quote the site:
> ... by understanding the psychology of color, you can choose a color that will resonate with your target audience and give off the vibe & emotion you want.
Within this selection of palates there is no variance in this particular dimension of «pastel-ness». They all seem to lie on the same place on that axis. And that dimension is one thing that seems to unite a lot of contemporary deisgn.
Hence this feeling like another item of conformity with the monoculture.
It's not all that serious — just some colours. But interesting nonetheless. You don't often have the opportunity to talk about contemporary colour palates.
You might want to try hosting the JS minified on your own server. As is, it gets blocked by uMatrix and uBlock Origin.
> Blue is a very calming color and can actually slow your metabolism (notice how there's little to no food brands that use blue in their branding).
Best Foods / Hellman's, Kraft, Barilla, Spam, Nestle, Pilsbury, Ocean Spray, Oreo, Quaker ... if this is for real, they've evidently never been to a grocery store.
> Purple thinks it's better than all the other peasant colors.
I guess so.
You really don't see blue used in fast food branding, mostly red & yellow.