10 ms·

Happy Hues – Curated colors in context

606 points by m1guelpf 7y ago

baumgarn 7y ago
One note I find the heavy emphasis on the black lines in the design a bit distracting. The colors itself become a bit of a sidenote here. Also I get seasick from the animation when changing colors, would be nice if just the colors were fading and the layout stays constant.
jcmontx 7y ago
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.
hellofunk 7y ago
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.
- nathancahill 7y ago
  Was it this from 3 months ago? https://www.colorbox.io/ https://www.colorbox.io/
- severine 7y ago
  Did you try HN's own search? https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=false&query=show%20hn%20color%20palette&sort=byPopularity&type=story https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=fal...
  - jve 7y ago
    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.
skavi 7y ago
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.
- themarkn 7y ago
  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.
- aurbano 7y ago
  Agree! Awesome idea for a site, but should definitely tone down the animations + disable after the first time.
- OJFord 7y ago
  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.
- mackenziechild 7y ago
  Ahh, thanks for the feedback! I can definitely tone down the animations... Or maybe remove them for everything but the homepage. 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.
  - wopian 7y ago
    >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.
  - skavi 7y ago
    IMO the animate on page load was fine. It was the animations upon scrolling that got annoying after a while. Also, there are a few ways to change url without reloads, though, yeah, that might add some complexity.
fxtentacle 7y ago
Beautiful :) You might want to try hosting the JS minified on your own server. As is, it gets blocked by uMatrix and uBlock Origin.
tonetheman 7y ago
the colors are indeed wonderful
DarwinMailApp 7y ago
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. [1] https://www.darwinmail.app https://www.darwinmail.app
- elefantastisch 7y ago
  https://coolors.co/ https://coolors.co/ can suggest colors to go with user-entered colors. No affiliation, just a tool I've used.
  - DarwinMailApp 7y ago
    A fantastic tool! Thank you for sharing. 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.
- sombremesa 7y ago
  > I'd love to be able to enter some of my own colors - and have your tool suggest a color palette. Not sure whether that's possible with this site, since it was built without code.
  - DarwinMailApp 7y ago
    I don't think it is. Still an incredibly useful website with a gorgeous design!
  - 7y ago
major505 7y ago
I will bookmark this, because I dont have an esthetic sense, and never know wich color to use in my projects. End up doing everything in black and white.
- tsukurimashou 7y ago
  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.
  - major505 7y ago
    Thats nice. This days I work mostly for banks, so the stylesheet is always the same, but for personal projects I endup having to be more criative.
matsemann 7y ago
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. Other than that I like the palettes.
- sailfast 7y ago
  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.
adventskalender 7y ago
I love the approach, however, the palettes all seem to be in the same style. A bit more diversity would be cool. 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/ https://www.colourlovers.com/
- rriepe 7y ago
  I made one that gives 12 palettes for any base color: http://strapless.io/ http://strapless.io/
- _eric 7y ago
  Lately I have been using color.adobe[0] or palx[1] a lot. [0] https://color.adobe.com https://color.adobe.com [1] https://palx.jxnblk.com https://palx.jxnblk.com
  - airstrike 7y ago
    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
- apsanz 7y ago
  I like https://coolors.co/ https://coolors.co/ for quickly cycling though options and being able lock certain colors.
  - airstrike 7y ago
    That one has an egregious ad floating on top of the palette on mobile and the controls UI is all borked
- blago 7y ago
  https://flatuicolors.com/ https://flatuicolors.com/
afandian 7y ago
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.
- jstummbillig 7y ago
  > and isn't design about taste after all 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.
  - afandian 7y ago
    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.
    - deleted 7y ago
      [deleted]
sdan 7y ago
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/ https://sdan.io/ since I couldn't find good schemes at the time.
james_impliu 7y ago
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.
- mojo74 7y ago
  May I recommend http://paletton.com http://paletton.com You can start with your base color and introduce variations above the colour wheel.
- mackenziechild 7y ago
  I'm thinking about building a Figma or Sketch file that allows someone to do just that :)
imafish 7y ago
Really impressive that you can build something like this with Webflow.
- nestorherre 7y ago
  Thought exactly the same. The end result is pretty amazing.
- swah 7y ago
  Actually I wonder if our end is near. Or maybe we become specialists in helping our clients with the Nocode solution they've chosen?
  - mackenziechild 7y ago
    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.
pvg 7y ago
Show HN is supposed to be for showing your own work https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html so you might have miscategorized this, m1guelpf.
- nathancahill 7y ago
  Paging u/mackenziechild https://news.ycombinator.com/user?id=mackenziechild https://news.ycombinator.com/user?id=mackenziechild
  - otterpro 7y ago
    Mackenzie Child also did http://www.lolcolors.com/ http://www.lolcolors.com/ a while back.
    - mackenziechild 7y ago
      Yeah, ended up selling that one :/ But Happy Hues is a better version imho :)
- m1guelpf 7y ago
  I'm sorry for this, apparently I misread the HN rules. Is there any way I can edit it to remove the "Show HN" part?
  - pvg 7y ago
    Mods will do it for you when they wake from their slumbers.
  - dang 7y ago
    Fixed now.
friendly_fren 7y ago
Please don't mess with my back button
lunchladydoris 7y ago
Great site! I love playing with colour combinations, but I don't have the colour sense to be able to put together palettes myself. 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 http://colorbrewer2.org
bbx 7y ago
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.
harimau777 7y ago
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.
- rriepe 7y ago
  I made something like this in Less, and I don't think Sass can do it.
- afandian 7y ago
  You mean like https://www.w3.org/TR/REC-html40/types.html#h-6.5 https://www.w3.org/TR/REC-html40/types.html#h-6.5 ?
  - harimau777 7y ago
    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.
    - afandian 7y ago
      Yes, sorry, I was being flippant. 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.
thih9 7y ago
Offtopic: after copying a value, an unrelated emoji is added to a status message. E.g.: "copied ;-)", "copied ;-*" or "copied :unicorn:". 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.
jermaustin1 7y ago
These all remind me of Bugle Boy clothes from the late 80s and early 90s. I thought I was well gone of these color schemes!
shannonmaloney5 7y ago
Just spent far too long going through the color psychology charts. Well done!
- mackenziechild 7y ago
  Nice :)
b1akely 7y ago
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
tyingq 7y ago
Simple and nice. Some way to visualize what font color works best with the selected background would be a good add.
goodmachine 7y ago
The notorious Millennial Pink somewhat over-used here? https://www.theguardian.com/artanddesign/shortcuts/2017/mar/22/millennial-pink-is-the-colour-of-now-but-what-exactly-is-it https://www.theguardian.com/artanddesign/shortcuts/2017/mar/... https://www.shutterstock.com/blog/what-is-millennial-pink https://www.shutterstock.com/blog/what-is-millennial-pink
- claudiulodro 7y ago
  Interesting. That sort of pink was also Pantone's color of the year.[1] It's definitely a super popular color in contemporary design. [1] https://www.pantone.com/color-intelligence/color-of-the-year/color-of-the-year-2019 https://www.pantone.com/color-intelligence/color-of-the-year...
  - sybarita 7y ago
    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
toddsiegel 7y ago
These things are great for color/design-challenged folks like me, but I'd also love to see complimentary light-dark mode palettes.
BrandoElFollito 7y ago
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?
- feelingextra 7y ago
  > 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 https://graphicdesign.stackexchange.com/a/95100
bstanfield15 7y ago
Cool site - bothers me though that “This sections hues” is missing an apostrophe... Also, is this a clever ad for Webflow? If so, I’m not complaining... useful ads >
geoffchan23 7y ago
Love this idea! It's definitely something I would use more if I could create my own palettes or view popular palettes
asdkhadsj 7y ago
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.
spectramax 7y ago
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.
ken 7y ago
This is a joke site, right? > 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.
- SamBam 7y ago
  Do you think that any site with humorous copy has to be a "joke site?" Seems pretty belittling to the creator of this.
- mackenziechild 7y ago
  Fast food is what I was referring to You really don't see blue used in fast food branding, mostly red & yellow. https://logodix.com/logo/321649.png https://logodix.com/logo/321649.png
duxup 7y ago
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.
jungletime 7y ago
Hate to be a critic, but the transitions are distracting. Why can't I just read without things jumping out at me, from all sides. Its a little jarring.
soperj 7y ago
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.
- ChrisMarshallNY 7y ago
  It's a great idea, but soperj is correct. It's a good idea to make sure that things like contrast ratio and colorblind hues are taken into account. Possibly have notes on certain palettes, indicating their accessibility score. Thanks!
stevenicr 7y ago
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. Your black and white photo
robbrown451 7y ago
Cool site. 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-works/munsell-color-space-and-solid/ https://munsell.com/about-munsell-color/how-color-notation-w...
mkl 7y ago
Hi Mackenzie, interesting site. I spotted some typos: "This sections hues" -> "This section's hues", "adobe" -> "Adobe", "your designs colors" -> "your design's colors".
blhack 7y ago
I love this. There are obviously lots of color palette tools out there, but this one shows you the colors applied to a theme. Good job.
deleted 7y ago
[deleted]
jchook 7y ago
For AI generated color profiles see http://colormind.io/ http://colormind.io/
heleninboodler 7y ago
Neat. Possible bug: it took me a really long time to figure out what "Toggle section colors" does because the thing it's toggling is never visible when the toggle button is. :)
Mike_Andreuzza 7y ago
I have made this one https://www.colorsandfonts.com https://www.colorsandfonts.com

606 points by m1guelpf 7y ago

One note I find the heavy emphasis on the black lines in the design a bit distracting. The colors itself become a bit of a sidenote here. Also I get seasick from the animation when changing colors, would be nice if just the colors were fading and the layout stays constant.

jcmontx 7y ago

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.

hellofunk 7y ago

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.

nathancahill 7y ago
Was it this from 3 months ago? https://www.colorbox.io/ https://www.colorbox.io/
severine 7y ago
Did you try HN's own search? https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=false&query=show%20hn%20color%20palette&sort=byPopularity&type=story https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=fal...
- jve 7y ago
  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.

skavi 7y ago

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.

themarkn 7y ago
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.
aurbano 7y ago
Agree! Awesome idea for a site, but should definitely tone down the animations + disable after the first time.
OJFord 7y ago
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.
mackenziechild 7y ago
Ahh, thanks for the feedback! I can definitely tone down the animations... Or maybe remove them for everything but the homepage. 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.
- wopian 7y ago
  >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.
- skavi 7y ago
  IMO the animate on page load was fine. It was the animations upon scrolling that got annoying after a while. Also, there are a few ways to change url without reloads, though, yeah, that might add some complexity.

fxtentacle 7y ago

Beautiful :) You might want to try hosting the JS minified on your own server. As is, it gets blocked by uMatrix and uBlock Origin.

tonetheman 7y ago

the colors are indeed wonderful

DarwinMailApp 7y ago

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. [1] https://www.darwinmail.app https://www.darwinmail.app

elefantastisch 7y ago
https://coolors.co/ https://coolors.co/ can suggest colors to go with user-entered colors. No affiliation, just a tool I've used.
- DarwinMailApp 7y ago
  A fantastic tool! Thank you for sharing. 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.
sombremesa 7y ago
> I'd love to be able to enter some of my own colors - and have your tool suggest a color palette. Not sure whether that's possible with this site, since it was built without code.
- DarwinMailApp 7y ago
  I don't think it is. Still an incredibly useful website with a gorgeous design!
- 7y ago

major505 7y ago

I will bookmark this, because I dont have an esthetic sense, and never know wich color to use in my projects. End up doing everything in black and white.

tsukurimashou 7y ago
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.
- major505 7y ago
  Thats nice. This days I work mostly for banks, so the stylesheet is always the same, but for personal projects I endup having to be more criative.

matsemann 7y ago

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. Other than that I like the palettes.

sailfast 7y ago
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.

adventskalender 7y ago

I love the approach, however, the palettes all seem to be in the same style. A bit more diversity would be cool. 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/ https://www.colourlovers.com/

rriepe 7y ago
I made one that gives 12 palettes for any base color: http://strapless.io/ http://strapless.io/
_eric 7y ago
Lately I have been using color.adobe[0] or palx[1] a lot. [0] https://color.adobe.com https://color.adobe.com [1] https://palx.jxnblk.com https://palx.jxnblk.com
- airstrike 7y ago
  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
apsanz 7y ago
I like https://coolors.co/ https://coolors.co/ for quickly cycling though options and being able lock certain colors.
- airstrike 7y ago
  That one has an egregious ad floating on top of the palette on mobile and the controls UI is all borked
blago 7y ago
https://flatuicolors.com/ https://flatuicolors.com/

afandian 7y ago

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.

jstummbillig 7y ago
> and isn't design about taste after all 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.
- afandian 7y ago
  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.
  - deleted 7y ago
    [deleted]

sdan 7y ago

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/ https://sdan.io/ since I couldn't find good schemes at the time.

james_impliu 7y ago

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.

mojo74 7y ago
May I recommend http://paletton.com http://paletton.com You can start with your base color and introduce variations above the colour wheel.
mackenziechild 7y ago
I'm thinking about building a Figma or Sketch file that allows someone to do just that :)

imafish 7y ago

Really impressive that you can build something like this with Webflow.

nestorherre 7y ago
Thought exactly the same. The end result is pretty amazing.
swah 7y ago
Actually I wonder if our end is near. Or maybe we become specialists in helping our clients with the Nocode solution they've chosen?
- mackenziechild 7y ago
  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.

pvg 7y ago

Show HN is supposed to be for showing your own work https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html so you might have miscategorized this, m1guelpf.

nathancahill 7y ago
Paging u/mackenziechild https://news.ycombinator.com/user?id=mackenziechild https://news.ycombinator.com/user?id=mackenziechild
- otterpro 7y ago
  Mackenzie Child also did http://www.lolcolors.com/ http://www.lolcolors.com/ a while back.
  - mackenziechild 7y ago
    Yeah, ended up selling that one :/ But Happy Hues is a better version imho :)
m1guelpf 7y ago
I'm sorry for this, apparently I misread the HN rules. Is there any way I can edit it to remove the "Show HN" part?
- pvg 7y ago
  Mods will do it for you when they wake from their slumbers.
- dang 7y ago
  Fixed now.

friendly_fren 7y ago

Please don't mess with my back button

lunchladydoris 7y ago

Great site! I love playing with colour combinations, but I don't have the colour sense to be able to put together palettes myself. 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 http://colorbrewer2.org

bbx 7y ago

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.

harimau777 7y ago

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.

rriepe 7y ago
I made something like this in Less, and I don't think Sass can do it.
afandian 7y ago
You mean like https://www.w3.org/TR/REC-html40/types.html#h-6.5 https://www.w3.org/TR/REC-html40/types.html#h-6.5 ?
- harimau777 7y ago
  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.
  - afandian 7y ago
    Yes, sorry, I was being flippant. 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.

thih9 7y ago

Offtopic: after copying a value, an unrelated emoji is added to a status message. E.g.: "copied ;-)", "copied ;-*" or "copied :unicorn:". 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.

jermaustin1 7y ago

These all remind me of Bugle Boy clothes from the late 80s and early 90s. I thought I was well gone of these color schemes!

shannonmaloney5 7y ago

Just spent far too long going through the color psychology charts. Well done!

mackenziechild 7y ago
Nice :)

b1akely 7y ago

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

tyingq 7y ago

Simple and nice. Some way to visualize what font color works best with the selected background would be a good add.

goodmachine 7y ago

The notorious Millennial Pink somewhat over-used here? https://www.theguardian.com/artanddesign/shortcuts/2017/mar/22/millennial-pink-is-the-colour-of-now-but-what-exactly-is-it https://www.theguardian.com/artanddesign/shortcuts/2017/mar/... https://www.shutterstock.com/blog/what-is-millennial-pink https://www.shutterstock.com/blog/what-is-millennial-pink

claudiulodro 7y ago
Interesting. That sort of pink was also Pantone's color of the year.[1] It's definitely a super popular color in contemporary design. [1] https://www.pantone.com/color-intelligence/color-of-the-year/color-of-the-year-2019 https://www.pantone.com/color-intelligence/color-of-the-year...
- sybarita 7y ago
  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

toddsiegel 7y ago

These things are great for color/design-challenged folks like me, but I'd also love to see complimentary light-dark mode palettes.

BrandoElFollito 7y ago

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?

feelingextra 7y ago
> 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 https://graphicdesign.stackexchange.com/a/95100

bstanfield15 7y ago

Cool site - bothers me though that “This sections hues” is missing an apostrophe... Also, is this a clever ad for Webflow? If so, I’m not complaining... useful ads >

geoffchan23 7y ago

Love this idea! It's definitely something I would use more if I could create my own palettes or view popular palettes

asdkhadsj 7y ago

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.

spectramax 7y ago

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.

ken 7y ago

This is a joke site, right? > 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.

SamBam 7y ago
Do you think that any site with humorous copy has to be a "joke site?" Seems pretty belittling to the creator of this.
mackenziechild 7y ago
Fast food is what I was referring to You really don't see blue used in fast food branding, mostly red & yellow. https://logodix.com/logo/321649.png https://logodix.com/logo/321649.png

duxup 7y ago

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.

jungletime 7y ago

Hate to be a critic, but the transitions are distracting. Why can't I just read without things jumping out at me, from all sides. Its a little jarring.

soperj 7y ago

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.

ChrisMarshallNY 7y ago
It's a great idea, but soperj is correct. It's a good idea to make sure that things like contrast ratio and colorblind hues are taken into account. Possibly have notes on certain palettes, indicating their accessibility score. Thanks!

stevenicr 7y ago

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. Your black and white photo

robbrown451 7y ago

Cool site. 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-works/munsell-color-space-and-solid/ https://munsell.com/about-munsell-color/how-color-notation-w...

mkl 7y ago

Hi Mackenzie, interesting site. I spotted some typos: "This sections hues" -> "This section's hues", "adobe" -> "Adobe", "your designs colors" -> "your design's colors".

blhack 7y ago

I love this. There are obviously lots of color palette tools out there, but this one shows you the colors applied to a theme. Good job.

deleted 7y ago

[deleted]

jchook 7y ago

For AI generated color profiles see http://colormind.io/ http://colormind.io/

heleninboodler 7y ago

Neat. Possible bug: it took me a really long time to figure out what "Toggle section colors" does because the thing it's toggling is never visible when the toggle button is. :)

Mike_Andreuzza 7y ago

I have made this one https://www.colorsandfonts.com https://www.colorsandfonts.com