5 ms·

CoolHue – Coolest Gradient Hues and Swatches

157 points by nitishkmrk 9y ago

gallerdude 9y ago
I always wonder why, biologically, these are so satisfying to look at. Why was it advantageous for monkey-grandpa to like these?
- jrlocke 9y ago
  At the end of the day our monkey-derived brains still run legacy code wired to find ripe fruits.
- captainmuon 9y ago
  Looks like fruit, or water? Or the open sky?
- arvidkahl 9y ago
  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.
- torgoguys 9y ago
  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.
  - dfc 9y ago
    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.
    - torgoguys 9y ago
      > 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.
- amelius 9y ago
  Guess: because they look more natural, as if they interact with the surroundings.
- Jack000 9y ago
  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.
tomglynch 9y ago
Is the from colour code also meant to coloured?
claudiulodro 9y ago
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.
- pacaro 9y ago
  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%);
- delinka 9y ago
  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.
Animats 9y ago
#A0FE65 to #FA016D? Lime green to midtone red as a gradient? Ugh.
khazhoux 9y ago
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." http://www.cs.northwestern.edu/~ago820/SIG98/abstract.html http://www.cs.northwestern.edu/~ago820/SIG98/abstract.html http://www.cs.northwestern.edu/~ago820/SIG98/gooch98.pdf http://www.cs.northwestern.edu/~ago820/SIG98/gooch98.pdf
Retr0spectrum 9y ago
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?
- kvz 9y ago
  Without having checked, perhaps the result of (webpack) critical (plugin)?
iRobbery 9y ago
why does this site mess with my 'back' history?
kingkool68 9y ago
If you liked this you would also enjoy https://uigradients.com/ https://uigradients.com/

157 points by nitishkmrk 9y ago

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

jrlocke 9y ago
At the end of the day our monkey-derived brains still run legacy code wired to find ripe fruits.
captainmuon 9y ago
Looks like fruit, or water? Or the open sky?
arvidkahl 9y ago
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.
torgoguys 9y ago
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.
- dfc 9y ago
  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.
  - torgoguys 9y ago
    > 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.
amelius 9y ago
Guess: because they look more natural, as if they interact with the surroundings.
Jack000 9y ago
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.

tomglynch 9y ago

Is the from colour code also meant to coloured?

claudiulodro 9y ago

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.

pacaro 9y ago
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%);
delinka 9y ago
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.

Animats 9y ago

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

khazhoux 9y ago

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." http://www.cs.northwestern.edu/~ago820/SIG98/abstract.html http://www.cs.northwestern.edu/~ago820/SIG98/abstract.html http://www.cs.northwestern.edu/~ago820/SIG98/gooch98.pdf http://www.cs.northwestern.edu/~ago820/SIG98/gooch98.pdf

Retr0spectrum 9y ago

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?

kvz 9y ago
Without having checked, perhaps the result of (webpack) critical (plugin)?

iRobbery 9y ago

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

kingkool68 9y ago

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