{ "id": 335085, "title": "🎨 Color Theory: Difference between a Beautiful and Ew Gradient", "url": "/competitions/AI4Code/discussion/335085", "author_name": "", "post_date": "2022-07-04T16:20:36.444727100Z", "votes": 14, "comment_count": 8, "views": 0, "content": "

Recently I've been obsessing about color and in particular how to use it in order to showcase information (in data visualisations, notebooks and presentations in particular).

\n

After 🎨How to create a Color Scheme for your Notebook, I am expanding a bit on a cool find I had on Twitter today from this article entitled Make Beautiful Gradients.

\n

The difference between Ugly and Beautiful

\n

So the idea of the article IS to understand why the following 2 graphs are different (and further how to avoid some particularities in CSS, which I won't focus on). To the naked eye the first one is kinda meh, while the second one looks appealing. However, why does that happen?

\n

\n

The answer is in a grey area.

\n

No, literary, it's in a grey area. The difference between the 2 gradients is that the first one has a portion in the middle that becomes colorless (greysh tones), while the second one remains vibrant and mantains the saturation throughout. I would add that it's important that the second one also follows the natural color order of the rainbow (yellow -> green -> blue), so this adds even more pleasure to the eye.

\n

How we represent color

\n

For me this part was always confusing, as every website can have different ways to present color. I though that it's just \"a standard I don't get\", but actually, there are multiple ways to evaluate the 🌈 rainbow.

\n

1. RGB Way 🤨

\n

\n

In the RGB methodology we combine the primary colors: red, green and blue. These form 3 channels, that each has a range between 0 and 255.

\n\n

\n

So, for example, a pure yellow with full saturation has a value of:

\n\n

\"Mixing\" colors using the RGB method mixes these 3 channels and creates in the middle this greysh muddish color that has a weird aspect to the eye.

\n

2. HSL Way 😍

\n

Hence, we can use HSL methodology so we can have a better control on how we manipulate color.

\n\n

\n

SO, we can mix only the Hue (so the color wheel), while leaving the Saturation and Lightness intact, and we get a portion of the rainbow.

\n

Some tools I use to create gradients to play with in my graphs (these look great especially in barcharts):

\n\n

\n

🌈 Here is a great tool by joshwcomeau to generate gradients

", "messages": [ { "id": "1843217", "postDate": "07/04/2022 16:20:36", "content": "

Recently I've been obsessing about color and in particular how to use it in order to showcase information (in data visualisations, notebooks and presentations in particular).

\n

After 🎨How to create a Color Scheme for your Notebook, I am expanding a bit on a cool find I had on Twitter today from this article entitled Make Beautiful Gradients.

\n

The difference between Ugly and Beautiful

\n

So the idea of the article IS to understand why the following 2 graphs are different (and further how to avoid some particularities in CSS, which I won't focus on). To the naked eye the first one is kinda meh, while the second one looks appealing. However, why does that happen?

\n

\n

The answer is in a grey area.

\n

No, literary, it's in a grey area. The difference between the 2 gradients is that the first one has a portion in the middle that becomes colorless (greysh tones), while the second one remains vibrant and mantains the saturation throughout. I would add that it's important that the second one also follows the natural color order of the rainbow (yellow -> green -> blue), so this adds even more pleasure to the eye.

\n

How we represent color

\n

For me this part was always confusing, as every website can have different ways to present color. I though that it's just \"a standard I don't get\", but actually, there are multiple ways to evaluate the 🌈 rainbow.

\n

1. RGB Way 🤨

\n

\n

In the RGB methodology we combine the primary colors: red, green and blue. These form 3 channels, that each has a range between 0 and 255.

\n\n

\n

So, for example, a pure yellow with full saturation has a value of:

\n\n

\"Mixing\" colors using the RGB method mixes these 3 channels and creates in the middle this greysh muddish color that has a weird aspect to the eye.

\n

2. HSL Way 😍

\n

Hence, we can use HSL methodology so we can have a better control on how we manipulate color.

\n\n

\n

SO, we can mix only the Hue (so the color wheel), while leaving the Saturation and Lightness intact, and we get a portion of the rainbow.

\n

Some tools I use to create gradients to play with in my graphs (these look great especially in barcharts):

\n\n

\n

🌈 Here is a great tool by joshwcomeau to generate gradients

", "rawMarkdown": "Recently I've been obsessing about color and in particular how to use it in order to showcase information (in data visualisations, notebooks and presentations in particular).\n\nAfter [🎨How to create a Color Scheme for your Notebook](https://www.kaggle.com/competitions/AI4Code/discussion/327996), I am expanding a bit on a cool find I had on Twitter today from [this article entitled Make Beautiful Gradients](https://www.joshwcomeau.com/css/make-beautiful-gradients/).\n\n# The difference between Ugly and Beautiful\n\nSo the idea of [the article](https://www.joshwcomeau.com/css/make-beautiful-gradients/) IS to understand why the following 2 graphs are different (and further how to avoid some particularities in CSS, which I won't focus on). To the naked eye the first one is kinda meh, while the second one looks appealing. However, why does that happen?\n\n\n\nThe answer is in a grey area.\n\nNo, literary, it's in a grey area. The difference between the 2 gradients is that the first one has **a portion in the middle that becomes colorless** (greysh tones), while the second one remains vibrant and mantains the *saturation* throughout. I would add that it's important that the second one also follows the natural color order of the rainbow (yellow -> green -> blue), so this adds even more pleasure to the eye.\n\n# How we represent color\n\nFor me this part was always confusing, as every website can have different ways to present color. I though that it's just \"a standard I don't get\", but actually, there are multiple ways to evaluate the 🌈 rainbow.\n\n### 1. RGB Way 🤨\n\n\n\nIn the RGB methodology we combine the primary colors: red, green and blue. These form 3 channels, that each has a range between 0 and 255.\n* 0: a full on 0 means the absence of color (black)\n* 255: means full white\n\n\n\nSo, for example, a *pure yellow with full saturation* has a value of:\n* R: maxed out at 255\n* G: maxed out at 255\n* B: maxed out at 0\n\n\"Mixing\" colors using the RGB method mixes these 3 channels and creates in the middle this greysh muddish color that has a weird aspect to the eye.\n\n### 2. HSL Way 😍\n\nHence, we can use HSL methodology so we can have a **better control** on how we manipulate color.\n* H - Hue -> For the actual color of the rainbow, the pigment\n* S - Saturation -> How vibrant/moody we want the color to be\n* L - Lightness -> How dark/pastel we want the color to be\n\n\n\nSO, we can mix only the Hue (so the color wheel), while leaving the Saturation and Lightness intact, and we get a portion of the rainbow.\n\nSome tools I use to create gradients to play with in my graphs (these look great especially in barcharts):\n* https://learnui.design/tools/gradient-generator.html\n* https://colordesigner.io/gradient-generator\n\n\n\n#### 🌈 [Here is a great tool by joshwcomeau](https://www.joshwcomeau.com/gradient-generator/) to generate gradients", "votes": null }, { "id": "1843715", "postDate": "07/05/2022 05:19:24", "content": "

Thanks for sharing!!

", "rawMarkdown": "Thanks for sharing!!", "votes": null }, { "id": "1844258", "postDate": "07/05/2022 12:45:35", "content": "

@andradaolteanu Thanks for sharing. Informative. Bookmarked😄

", "rawMarkdown": "andradaolteanu Thanks for sharing. Informative. Bookmarked😄", "votes": null }, { "id": "1844938", "postDate": "07/05/2022 23:42:57", "content": "

Thank you for this amazing post!

", "rawMarkdown": "Thank you for this amazing post!", "votes": null }, { "id": "1845009", "postDate": "07/06/2022 01:47:59", "content": "

Basically, both approaches have two different perspectives from an artist's point of view.

\n
    \n

  1. RBG is a natural way of coloring, where we create new colors from already existing colors. These may be not basic colors like Red, Blue, and Green. But the color driver from nature, and then mixed to get a new color. Now, these days, several different pigments are directly created directly with help of chemical changes in the structure of molecules etc. However, the basic principle in RBG is to get a driver color from natural color, which is why sometimes we can't get what we actually want. This technique is more vibrate in natural coloring in the physical world.

    2. \n

  2. HSL is a more artificial way of getting color, and an improved humanized version of coloring, especially in the context of computers, and technology where we have more control over preciseness. Normally, in the physical world, we put transparent fluid to make a color more or less saturated, and white fluid to make it more or less dark. But, in most cases, it is nearly impossible (even with chemical formula change) to get every color, so, in we have to mix different colors to get some new colors (like we do in printers). This technique is more useful for computers, and screens where we can produce every color and can change saturation and darkness in a precise way to get a new color.

    3. \n
\n

Please correct me, if I am wrong,

\n

@andradaolteanu for sharing useful information.

", "rawMarkdown": "Basically, both approaches have two different perspectives from an artist's point of view.\n1. **RBG** is a natural way of coloring, where we create new colors from already existing colors. These may be not basic colors like Red, Blue, and Green. But the color driver from nature, and then mixed to get a new color. Now, these days, several different pigments are directly created directly with help of chemical changes in the structure of molecules etc. However, the basic principle in RBG is to get a driver color from natural color, which is why sometimes we can't get what we actually want. **This technique is more vibrate in natural coloring in the physical world.**\n\n2. **HSL** is a more artificial way of getting color, and an improved humanized version of coloring, especially in the context of computers, and technology where we have more control over preciseness. Normally, in the physical world, we put transparent fluid to make a color more or less saturated, and white fluid to make it more or less dark. But, in most cases, it is nearly impossible (even with chemical formula change) to get every color, so, in we have to mix different colors to get some new colors (like we do in printers). **This technique is more useful for computers, and screens where we can produce every color and can change saturation and darkness in a precise way to get a new color.**\n\n*Please correct me, if I am wrong,*\n\n@andradaolteanu for sharing useful information.", "votes": null }, { "id": "1845514", "postDate": "07/06/2022 11:46:15", "content": "

@andradaolteanu Thanks for sharing useful information.

", "rawMarkdown": "andradaolteanu Thanks for sharing useful information.", "votes": null }, { "id": "1846023", "postDate": "07/06/2022 18:51:30", "content": "

Very cool, thanks for sharing!

", "rawMarkdown": "Very cool, thanks for sharing!", "votes": null }, { "id": "1851453", "postDate": "07/11/2022 08:47:08", "content": "

Thanks for sharing!

", "rawMarkdown": "Thanks for sharing!", "votes": null }, { "id": "1853857", "postDate": "07/13/2022 08:06:55", "content": "

Interesting view to show this, such beneficial. Thanks a lot.

", "rawMarkdown": "Interesting view to show this, such beneficial. Thanks a lot.", "votes": null } ], "comments": [ { "id": 1843715, "author_name": "karthikbhandary2", "author_url": "", "post_date": "07/05/2022 05:19:24", "content": "

Thanks for sharing!!

", "votes": null, "replies": [] }, { "id": 1844258, "author_name": "omkargowda", "author_url": "", "post_date": "07/05/2022 12:45:35", "content": "

@andradaolteanu Thanks for sharing. Informative. Bookmarked😄

", "votes": null, "replies": [] }, { "id": 1844938, "author_name": "thedevastator", "author_url": "", "post_date": "07/05/2022 23:42:57", "content": "

Thank you for this amazing post!

", "votes": null, "replies": [] }, { "id": 1845009, "author_name": "muhammedtausif", "author_url": "", "post_date": "07/06/2022 01:47:59", "content": "

Basically, both approaches have two different perspectives from an artist's point of view.

\n
    \n

  1. RBG is a natural way of coloring, where we create new colors from already existing colors. These may be not basic colors like Red, Blue, and Green. But the color driver from nature, and then mixed to get a new color. Now, these days, several different pigments are directly created directly with help of chemical changes in the structure of molecules etc. However, the basic principle in RBG is to get a driver color from natural color, which is why sometimes we can't get what we actually want. This technique is more vibrate in natural coloring in the physical world.

    2. \n

  2. HSL is a more artificial way of getting color, and an improved humanized version of coloring, especially in the context of computers, and technology where we have more control over preciseness. Normally, in the physical world, we put transparent fluid to make a color more or less saturated, and white fluid to make it more or less dark. But, in most cases, it is nearly impossible (even with chemical formula change) to get every color, so, in we have to mix different colors to get some new colors (like we do in printers). This technique is more useful for computers, and screens where we can produce every color and can change saturation and darkness in a precise way to get a new color.

    3. \n
\n

Please correct me, if I am wrong,

\n

@andradaolteanu for sharing useful information.

", "votes": null, "replies": [] }, { "id": 1845514, "author_name": "mumeryasin", "author_url": "", "post_date": "07/06/2022 11:46:15", "content": "

@andradaolteanu Thanks for sharing useful information.

", "votes": null, "replies": [] }, { "id": 1846023, "author_name": "linearsort", "author_url": "", "post_date": "07/06/2022 18:51:30", "content": "

Very cool, thanks for sharing!

", "votes": null, "replies": [] }, { "id": 1851453, "author_name": "nisamuniya", "author_url": "", "post_date": "07/11/2022 08:47:08", "content": "

Thanks for sharing!

", "votes": null, "replies": [] }, { "id": 1853857, "author_name": "gooooooood", "author_url": "", "post_date": "07/13/2022 08:06:55", "content": "

Interesting view to show this, such beneficial. Thanks a lot.

", "votes": null, "replies": [] } ], "raw_markdown_by_id": { "1843217": "Recently I've been obsessing about color and in particular how to use it in order to showcase information (in data visualisations, notebooks and presentations in particular).\n\nAfter [🎨How to create a Color Scheme for your Notebook](https://www.kaggle.com/competitions/AI4Code/discussion/327996), I am expanding a bit on a cool find I had on Twitter today from [this article entitled Make Beautiful Gradients](https://www.joshwcomeau.com/css/make-beautiful-gradients/).\n\n# The difference between Ugly and Beautiful\n\nSo the idea of [the article](https://www.joshwcomeau.com/css/make-beautiful-gradients/) IS to understand why the following 2 graphs are different (and further how to avoid some particularities in CSS, which I won't focus on). To the naked eye the first one is kinda meh, while the second one looks appealing. However, why does that happen?\n\n\n\nThe answer is in a grey area.\n\nNo, literary, it's in a grey area. The difference between the 2 gradients is that the first one has **a portion in the middle that becomes colorless** (greysh tones), while the second one remains vibrant and mantains the *saturation* throughout. I would add that it's important that the second one also follows the natural color order of the rainbow (yellow -> green -> blue), so this adds even more pleasure to the eye.\n\n# How we represent color\n\nFor me this part was always confusing, as every website can have different ways to present color. I though that it's just \"a standard I don't get\", but actually, there are multiple ways to evaluate the 🌈 rainbow.\n\n### 1. RGB Way 🤨\n\n\n\nIn the RGB methodology we combine the primary colors: red, green and blue. These form 3 channels, that each has a range between 0 and 255.\n* 0: a full on 0 means the absence of color (black)\n* 255: means full white\n\n\n\nSo, for example, a *pure yellow with full saturation* has a value of:\n* R: maxed out at 255\n* G: maxed out at 255\n* B: maxed out at 0\n\n\"Mixing\" colors using the RGB method mixes these 3 channels and creates in the middle this greysh muddish color that has a weird aspect to the eye.\n\n### 2. HSL Way 😍\n\nHence, we can use HSL methodology so we can have a **better control** on how we manipulate color.\n* H - Hue -> For the actual color of the rainbow, the pigment\n* S - Saturation -> How vibrant/moody we want the color to be\n* L - Lightness -> How dark/pastel we want the color to be\n\n\n\nSO, we can mix only the Hue (so the color wheel), while leaving the Saturation and Lightness intact, and we get a portion of the rainbow.\n\nSome tools I use to create gradients to play with in my graphs (these look great especially in barcharts):\n* https://learnui.design/tools/gradient-generator.html\n* https://colordesigner.io/gradient-generator\n\n\n\n#### 🌈 [Here is a great tool by joshwcomeau](https://www.joshwcomeau.com/gradient-generator/) to generate gradients", "1843715": "Thanks for sharing!!", "1844258": "andradaolteanu Thanks for sharing. Informative. Bookmarked😄", "1844938": "Thank you for this amazing post!", "1845009": "Basically, both approaches have two different perspectives from an artist's point of view.\n1. **RBG** is a natural way of coloring, where we create new colors from already existing colors. These may be not basic colors like Red, Blue, and Green. But the color driver from nature, and then mixed to get a new color. Now, these days, several different pigments are directly created directly with help of chemical changes in the structure of molecules etc. However, the basic principle in RBG is to get a driver color from natural color, which is why sometimes we can't get what we actually want. **This technique is more vibrate in natural coloring in the physical world.**\n\n2. **HSL** is a more artificial way of getting color, and an improved humanized version of coloring, especially in the context of computers, and technology where we have more control over preciseness. Normally, in the physical world, we put transparent fluid to make a color more or less saturated, and white fluid to make it more or less dark. But, in most cases, it is nearly impossible (even with chemical formula change) to get every color, so, in we have to mix different colors to get some new colors (like we do in printers). **This technique is more useful for computers, and screens where we can produce every color and can change saturation and darkness in a precise way to get a new color.**\n\n*Please correct me, if I am wrong,*\n\n@andradaolteanu for sharing useful information.", "1845514": "andradaolteanu Thanks for sharing useful information.", "1846023": "Very cool, thanks for sharing!", "1851453": "Thanks for sharing!", "1853857": "Interesting view to show this, such beneficial. Thanks a lot." }, "source": "meta" }