There was another example many months ago of something like this which I really liked and I curse myself for not bookmarking it. My search attempts have failed. I love sites that give ideas in color relationships.
I think its a 3rd party search. Just that the company was funded by HN. Anyways, it could be nice if there was a link in the UI that leads to this search.
The design of this website is beautiful. I just wish it didn't reload after each palette change. Also, a toggle for the animations would be nice. They get a bit annoying after a bit.
I find the animations made me dizzy- a little movement is fine but every single thing moving and fading and sliding is pointless and distracting. I was reading the different stuff about the aspects of a color but I had to just stop.
Yes the reload is a shame - especially given that it needs a whole bunch of third-party JS to render anyway, it's annoying to have history fill up of different colour palletes.
Great resource though, I'm bad at this, will certainly use in future I'm sure.
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.
This is incredibly useful for anyone designing a new site from scratch. I think it's quite useful for reimagining the colors of your existing site, too, with one caveat. I'd love to be able to enter some of my own colors - and have your tool suggest a color palette.
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 [1]. 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.
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.
It probably _could_ be, but I'd probably have to build (or hire someone to build) some sort of external app / database to manage all that.
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).
I spent some time finding good colors for my terminal, I usually reuse that when I design some website / webapp. 99% of the time I use monospaced fonts and my interface ends up looking a lot like a CLI application, but since most of my work is oriented towards technical people, end users often tell me they dig the design.
I forgot my glasses in the hurry to work today, so I might be more susceptible to this than usual, but some of the contrasts are very low. For instance palette 14 the yellow links on white, or palette 10 the yellow links on green, are both impossible to read. Update: Contrast 1.02 according to devtools in firefox.
Concur - some of the contrasts would need to be improved for the palettes to be accessible. I found this particularly true with dark backgrounds and light hyperlink text.
Great effort on the site though - was fun to look through to look at some options.
kuler.adobe.com is only similar if you mean the parent should be browsing the community themes, otherwise it's more like a color picker with optional constraints based on color theory (which are great starting points but won't really guide you to the finish line)
the second link has way too many colors to really be useful
This seems closer to a set of colors for the terminal which is great when you're looking for swatches that go together for every color but doesn't help you decide which colors to use in your design
I don't know how to describe it, sorry. Like as if they are all printed on recycling paper, perhaps? They have a touch of grayness? Or perhaps it is "all pastels", as the other comment said? Sorry I am not artist enough to be able to describe it.
Ah gotcha. Yeah there is definitely a lot of pastel palettes on there. I guess that's what I lean towards. I'll try to add more, non pastel palettes soon :)
All of these palates look very trendy 'contemporary big tech'. Something about the pastel colours. They go with the visual design.
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.
It's true. What I'm getting at is there when you take that all into account, there are no absolute universals. There are many axes. So it can pay to accept some diversity.
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.
Great! Love a new set of colors and was just looking for some the other day. There are some other similar websites, but glad there's more! More colors the better.
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.
It is awesome seeing colours in context. I've so frequently rejigged the palette whilst building the website, so this would stop doing that.
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 think No-Code is great because it allows anyone to test out and launch their ideas.
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.
Very neat idea! I like the different color palettes available. You can see how a slight change in a shade can have a lot of impact.
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.
I'd love to see it become standard practice to use a system like this to define a set of SASS variables that could then be composed in other rules rather than either hard coding the colors in each rule or using utility classes (e.g. ".blue").
You could probably do the same thing with text styles by defining variables for things like headline font, body font, monospaced font, etc.
The difference that I would see is that most designers probably don't want to be restricted to just the colors that are defined in the spec and it would be useful to have the colors associated with their purpose (e.g. text color, background color) so that they could be changed without having to change them throughout the various rules.
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 really like this. As a developer who sometimes has to design, I struggle choosing colors. I will definitely use this in my day to day. Thank you very much.
The difference with this app compared to some of the alternatives, is this shows you what color specific elements should be. This solves one of my pain points and I'll try this out in my project
Coral != 'millennial pink', the Pantone color of the year in 2016 was basically millennial pink though (it was actually two colors that year, the pink and a matching blue) I'm a big fan of soft pinks like that actually, but they are def overused
113 comments
[ 3.0 ms ] story [ 190 ms ] threadhttps://hn.algolia.com/?dateRange=pastYear&page=0&prefix=fal...
Great resource though, I'm bad at this, will certainly use in future I'm sure.
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.
You might want to try hosting the JS minified on your own server. As is, it gets blocked by uMatrix and uBlock Origin.
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 [1]. 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.
[1] https://www.darwinmail.app
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.
Still an incredibly useful website with a gorgeous design!
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).
Do the tools you're using (webflow) not let you put any custom JavaScript on the page?
End up doing everything in black and white.
Other than that I like the palettes.
Great effort on the site though - was fun to look through to look at some options.
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/
[0] https://color.adobe.com
[1] https://palx.jxnblk.com
the second link has way too many colors to really be useful
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.
There's also this great article: https://refactoringui.com/previews/building-your-color-palet...
- [ColorBrewer: Color Advice for Maps](http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3)
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.
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.
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 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.
https://news.ycombinator.com/showhn.html
so you might have miscategorized this, m1guelpf.
https://news.ycombinator.com/user?id=mackenziechild
But Happy Hues is a better version imho :)
On the data side, I have often (mis)used colorbrewer [0] to play with colours and see what might work well in visualizations.
[0] http://colorbrewer2.org
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.
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.
Also I get seasick from the animation when changing colors, would be nice if just the colors were fading and the layout stays constant.
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.
https://www.theguardian.com/artanddesign/shortcuts/2017/mar/...
https://www.shutterstock.com/blog/what-is-millennial-pink
[1] https://www.pantone.com/color-intelligence/color-of-the-year...