
Happy Hues – Curated colors in context - m1guelpf
https://www.happyhues.co/
======
adventskalender
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/)

~~~
mackenziechild
What do you mean by same style? Like alternating backgrounds and such?

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.

~~~
adventskalender
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.

~~~
mackenziechild
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 :)

------
DarwinMailApp
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)

~~~
sombremesa
> 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.

~~~
mackenziechild
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).

~~~
sombremesa
It might be easier to get someone to build you a bookmarklet that uses JS and
puts an input on the page.

Do the tools you're using (webflow) not let you put any custom JavaScript on
the page?

------
soperj
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
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!

------
asdkhadsj
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.

------
matsemann
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
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.

------
skavi
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.

~~~
mackenziechild
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
>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.

------
james_impliu
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
May I recommend [http://paletton.com](http://paletton.com) You can start with
your base color and introduce variations above the colour wheel.

------
duxup
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.

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

------
sdan
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.

------
stevenicr
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

------
harimau777
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.

~~~
afandian
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
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
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.

------
robbrown451
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-w...](https://munsell.com/about-munsell-
color/how-color-notation-works/munsell-color-space-and-solid/)

------
BrandoElFollito
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
> 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)

------
pvg
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.

~~~
m1guelpf
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
Mods will do it for you when they wake from their slumbers.

------
spectramax
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.

------
goodmachine
The notorious Millennial Pink somewhat over-used here?

[https://www.theguardian.com/artanddesign/shortcuts/2017/mar/...](https://www.theguardian.com/artanddesign/shortcuts/2017/mar/22/millennial-
pink-is-the-colour-of-now-but-what-exactly-is-it)

[https://www.shutterstock.com/blog/what-is-millennial-
pink](https://www.shutterstock.com/blog/what-is-millennial-pink)

~~~
claudiulodro
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...](https://www.pantone.com/color-intelligence/color-of-the-year/color-
of-the-year-2019)

~~~
sybarita
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

------
bbx
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.

------
jcmontx
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.

------
thih9
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
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!

------
lunchladydoris
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)

------
baumgarn
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.

------
hellofunk
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.

~~~
severine
Did you try HN's own search?

[https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=fal...](https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=false&query=show%20hn%20color%20palette&sort=byPopularity&type=story)

~~~
jve
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.

------
heleninboodler
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. :)

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

~~~
swah
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
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.

------
jungletime
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.

------
Mike_Andreuzza
I have made this one
[https://www.colorsandfonts.com](https://www.colorsandfonts.com)

------
jchook
For AI generated color profiles see
[http://colormind.io/](http://colormind.io/)

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

------
major505
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
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
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.

------
bstanfield15
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
Love this idea! It's definitely something I would use more if I could create
my own palettes or view popular palettes

------
blhack
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.

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

------
afandian
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
> 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
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.

------
fxtentacle
Beautiful :)

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

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

~~~
mackenziechild
Nice :)

------
friendly_fren
Please don't mess with my back button

------
tonetheman
the colors are indeed wonderful

------
ken
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.

~~~
mackenziechild
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)

