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.
I really like the idea.
If you are promoting stuff like this though, please please please check to see whether your color schemes meets WCAG contrast guidelines. I took a look at one randomly in the firefox developer edition accessibility tab and there were a large number of contracts flags.
While I really love the colors and instructive nature of this product, I really dislike the dark oriented color sections. That is to say, I dislike how in a dark mode, it still has large sections of white backgrounds.
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.
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.
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.
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.
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.
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 like this idea. Especially as a dev who does a lot of front end work but has little sense of design.
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.
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.
Good idea and well executed, it shows you have some skills and deeper knowledge with colors than most people, and informs, so people are likely to read and learn.
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.
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.
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...
The timing is great - I am redecorating my home dashboard with new colors.
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?
> 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"
How about black and white, and use color sparingly to get attention?
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.
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 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.
[+] [-] adventskalender|6 years ago|reply
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/
[+] [-] ollerac|6 years ago|reply
There's also this great article: https://refactoringui.com/previews/building-your-color-palet...
[+] [-] swyx|6 years ago|reply
[+] [-] apsanz|6 years ago|reply
[+] [-] blago|6 years ago|reply
[+] [-] mackenziechild|6 years ago|reply
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.
[+] [-] rriepe|6 years ago|reply
[+] [-] anaxag0ras|6 years ago|reply
[+] [-] aeorgnoieang|6 years ago|reply
- [ColorBrewer: Color Advice for Maps](http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3)
[+] [-] mutatio|6 years ago|reply
[+] [-] xemoka|6 years ago|reply
[+] [-] gagahpangeran|6 years ago|reply
[+] [-] _eric|6 years ago|reply
[0] https://color.adobe.com
[1] https://palx.jxnblk.com
[+] [-] taco_emoji|6 years ago|reply
[+] [-] samcampbell|6 years ago|reply
[+] [-] Kiro|6 years ago|reply
[+] [-] DarwinMailApp|6 years ago|reply
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
[+] [-] mackenziechild|6 years ago|reply
[+] [-] elefantastisch|6 years ago|reply
No affiliation, just a tool I've used.
[+] [-] sombremesa|6 years ago|reply
Not sure whether that's possible with this site, since it was built without code.
[+] [-] soperj|6 years ago|reply
[+] [-] ChrisMarshallNY|6 years ago|reply
Possibly have notes on certain palettes, indicating their accessibility score.
Thanks!
[+] [-] asdkhadsj|6 years ago|reply
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.
[+] [-] matsemann|6 years ago|reply
Other than that I like the palettes.
[+] [-] skavi|6 years ago|reply
[+] [-] mackenziechild|6 years ago|reply
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.
[+] [-] OJFord|6 years ago|reply
Great resource though, I'm bad at this, will certainly use in future I'm sure.
[+] [-] themarkn|6 years ago|reply
[+] [-] aurbano|6 years ago|reply
[+] [-] james_impliu|6 years ago|reply
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.
[+] [-] mojo74|6 years ago|reply
[+] [-] mackenziechild|6 years ago|reply
[+] [-] duxup|6 years ago|reply
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.
[+] [-] mkl|6 years ago|reply
[+] [-] sdan|6 years ago|reply
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.
[+] [-] stevenicr|6 years ago|reply
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
[+] [-] harimau777|6 years ago|reply
You could probably do the same thing with text styles by defining variables for things like headline font, body font, monospaced font, etc.
[+] [-] afandian|6 years ago|reply
[+] [-] rriepe|6 years ago|reply
[+] [-] robbrown451|6 years ago|reply
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...
[+] [-] BrandoElFollito|6 years ago|reply
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?
[+] [-] feelingextra|6 years ago|reply
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
[+] [-] pvg|6 years ago|reply
https://news.ycombinator.com/showhn.html
so you might have miscategorized this, m1guelpf.
[+] [-] nathancahill|6 years ago|reply
https://news.ycombinator.com/user?id=mackenziechild
[+] [-] spectramax|6 years ago|reply
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.
[+] [-] goodmachine|6 years ago|reply
https://www.theguardian.com/artanddesign/shortcuts/2017/mar/...
https://www.shutterstock.com/blog/what-is-millennial-pink
[+] [-] claudiulodro|6 years ago|reply
[1] https://www.pantone.com/color-intelligence/color-of-the-year...
[+] [-] bbx|6 years ago|reply
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.
[+] [-] jcmontx|6 years ago|reply
[+] [-] thih9|6 years ago|reply
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.