Hacker News new | comments | ask | show | jobs | submit login
CoolHue – Coolest Gradient Hues and Swatches (webkul.github.io)
157 points by nitishkmrk on June 18, 2017 | hide | past | web | favorite | 19 comments

These schemes remind me of Amy Gooch's 1998 SIGGRAPH paper:

"Phong-shaded 3D imagery does not provide geometric information of the same richness as human-drawn technical illustrations. A non-photorealistic lighting model is presented that attempts to narrow this gap. The model is based on practice in traditional technical illustration, where the lighting model uses both luminance and changes in hue to indicate surface orientation, reserving extreme lights and darks for edge lines and highlights. The lighting model allows shading to occur only in mid-tones so that edge lines and highlights remain visually prominent. In addition, we show how this lighting model is modified when portraying models of metal objects. These illustration methods give a clearer picture of shape, structure, and material composition than traditional computer graphics methods."



These look great! I'm sure I'll use at least one of them in the future.

My one gripe is the copy button. It just says "CSS3 Code Copied". I have no idea if I copied some CSS lines or just the values for a background-color or a script that downloads malware.

To put your mind at rest, it appears to copy a CSS background-image gradient definition, like so:

   background-image: linear-gradient( 135deg, #FDEB71 0%, #F8D800 100%);

You have to paste it somewhere before you can put it to use. Paste it somewhere safe, like a bland text editor, to see what's in it.

I always wonder why, biologically, these are so satisfying to look at. Why was it advantageous for monkey-grandpa to like these?

FWIW, I don't find these gradients especially pleasing. (They're fine, but I find some of them a bit much). I don't know why I would be different, but there it is.

Just throwing a hypothesis out there--I'm not a Mac nor IOS guy, and if those that find them especially pleasing by-and-large are then maybe that's the link. Again, that's just wild speculation without any data to back it up.

Then again, some of these style gradients are used in Ubuntu graphics too (and I again find their presence there a bit much,) so maybe there is a bigger shift towards them.

In any event, I'm guessing it is cultural and not hardwired by monkey-grandpa genes.

My breath was not taken away either. The first couple were fine--in the sense that they were not offensive--but after scrolling down a little bit I started to find the pairings a bit repulsive. I am also not an mac/ios person but I don't know why that is relevant to aesthetic preferences.

> I am also not an mac/ios person but I don't know why that is relevant to aesthetic preferences.

You get used to what you're exposed to. What looks hip and cool in graphic design from the 70s doesn't so pleasing today.

I don't know if MacOS or IOS uses such gradients, but I believe Apple Music at least does (do a Google image search for Apple Music), so it is mostly a hunch on my part.

At the end of the day our monkey-derived brains still run legacy code wired to find ripe fruits.

I'd guess any gradient is a soothing thing to look at contrasted with sharp edges, which would signify danger or at least potential of physical damage. And they're very natural colors, as are found in sunsets, plants, vistas of the forest - all non-threatening and putting the mind at ease.

Looks like fruit, or water? Or the open sky?

Guess: because they look more natural, as if they interact with the surroundings.

difficult to extract visual features from a flat plane. Gradients give the visual cortex something to process, aiding localization.

Probably the same reason that visual contrast is so important in design.

I just took a look at how this demo was implemented. The first swatch has a hardcoded inline CSS style for the gradient, and all the rest are filled in by some JavaScript on page load, based on the HTML tags that annotate each swatch.

I'm curious for a couple of reasons. Why hardcode the first CSS style, and generate the rest? If you're going to the effort of dynamically generating the CSS styles, why not have the actual dataset stored in JSON or another easily ingestible format, rather than in cumbersome HTML tags?

Without having checked, perhaps the result of (webpack) critical (plugin)?

#A0FE65 to #FA016D? Lime green to midtone red as a gradient? Ugh.

If you liked this you would also enjoy https://uigradients.com/

Is the from colour code also meant to coloured?

why does this site mess with my 'back' history?

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact