{ "id": 327996, "title": "🎨How to create a Color Scheme for your Notebook", "url": "/competitions/AI4Code/discussion/327996", "author_name": "Andrada", "post_date": "2022-05-30T12:22:00.323000", "votes": 79, "comment_count": 22, "views": 0, "content": "

Recently I've found this Youtube video on how to \"Make Hundreds of Color Palettes from 1 COLOR!\" by Greg Gunn (who is practically a color God, so if you're interested in this type of things I would highly suggest you to follow him).

\n

Of course these are tips for Design, but the same rules apply to Data Visualization and the aeshetics of making a notebook.

\n

So here are the basic steps on how to make a (not boring) color palette for your notebooks, graphs and schemas (for easy and detailed explanation do watch the linked video).

\n

1. Starting with 1 Color

\n

First step is to choose the MAIN color. I would suggest choosing something that correlates with the theme of the analysis/competition. E.g.:

\n
    \n
  1. Marine Life - blue
    2. \n
  2. Medicine - red
    3. \n
  3. Financial Stocks - green, yellow
    4. \n
\n

Greg suggests to choose a color that's neither too saturated nor too dark - somewhere in the middle. Because this competition doesn't have a speciffic theme, I just chose one of my favorite colors, which is violet:

\n

\n

2. Change the Gradient and Hue

\n

This step breaks down into 2 more steps:

\n
    \n
  1. we draw a line starting from the top left corner of the Color Picker (you can use HTML Color Codes), pass through the point that we have created and end at the bottom right corner;
    2. \n
  2. we then prepare to move along that line little by little while also changing the Hue.
    3. \n
\n

\n

So, in our case, we first move UP on the imaginary line and hue 3 times:

\n

\n

And then we move DOWN on the imaginary line and hue 3 times:

\n

\n

Hence, our primary color palette will be:

\n

\n

3. Spicing things up - Brightness & Saturation

\n

I will be using coolor for this part.

\n

Greg teaches us that now we need to split this customized palette into 2 other parts:

\n
    \n
  1. one part in which we will increase the Brightness and decrease the Saturation (making the colors more pastel). We can also move the Hue, but in a very tiny amount.
    2. \n
  2. the second part in which we will decrease the Brightness and increase the Saturation. We can also move the Hue but again, very little and in the opposite direction than what we did for the pastels.
    3. \n
\n

\n

4. Mix them up

\n

Now that we have 3 color palettes (an original, one lighter and one darker), we can choose to use all the colors (for example gradient barcharts work very well with lots of colors), but also combinations of the ones we already have (for pie charts, histograms, schemas or when highlighting words within a notebook).

\n

\n

The beauty of this technique is that … all colors match pleasantly between them. We also have lighter shades, but also darker ones. We have more saturated, accent colors, but we also have muted shades.

\n

And everything started from only one singular color! 😎

\n

That's it, hope this helped, happy coding!

\n

PS: Practice makes perfect - although this method is, in my opinion, foolproof, as one gets more confortable with the hue, brightness and saturation, the palettes will get more and more unique and interesting.

\n

", "messages": [ { "id": 1805666, "postDate": "2022-05-30T12:22:00.323Z", "content": "

Recently I've found this Youtube video on how to \"Make Hundreds of Color Palettes from 1 COLOR!\" by Greg Gunn (who is practically a color God, so if you're interested in this type of things I would highly suggest you to follow him).

\n

Of course these are tips for Design, but the same rules apply to Data Visualization and the aeshetics of making a notebook.

\n

So here are the basic steps on how to make a (not boring) color palette for your notebooks, graphs and schemas (for easy and detailed explanation do watch the linked video).

\n

1. Starting with 1 Color

\n

First step is to choose the MAIN color. I would suggest choosing something that correlates with the theme of the analysis/competition. E.g.:

\n
    \n
  1. Marine Life - blue
    2. \n
  2. Medicine - red
    3. \n
  3. Financial Stocks - green, yellow
    4. \n
\n

Greg suggests to choose a color that's neither too saturated nor too dark - somewhere in the middle. Because this competition doesn't have a speciffic theme, I just chose one of my favorite colors, which is violet:

\n

\n

2. Change the Gradient and Hue

\n

This step breaks down into 2 more steps:

\n
    \n
  1. we draw a line starting from the top left corner of the Color Picker (you can use HTML Color Codes), pass through the point that we have created and end at the bottom right corner;
    2. \n
  2. we then prepare to move along that line little by little while also changing the Hue.
    3. \n
\n

\n

So, in our case, we first move UP on the imaginary line and hue 3 times:

\n

\n

And then we move DOWN on the imaginary line and hue 3 times:

\n

\n

Hence, our primary color palette will be:

\n

\n

3. Spicing things up - Brightness & Saturation

\n

I will be using coolor for this part.

\n

Greg teaches us that now we need to split this customized palette into 2 other parts:

\n
    \n
  1. one part in which we will increase the Brightness and decrease the Saturation (making the colors more pastel). We can also move the Hue, but in a very tiny amount.
    2. \n
  2. the second part in which we will decrease the Brightness and increase the Saturation. We can also move the Hue but again, very little and in the opposite direction than what we did for the pastels.
    3. \n
\n

\n

4. Mix them up

\n

Now that we have 3 color palettes (an original, one lighter and one darker), we can choose to use all the colors (for example gradient barcharts work very well with lots of colors), but also combinations of the ones we already have (for pie charts, histograms, schemas or when highlighting words within a notebook).

\n

\n

The beauty of this technique is that … all colors match pleasantly between them. We also have lighter shades, but also darker ones. We have more saturated, accent colors, but we also have muted shades.

\n

And everything started from only one singular color! 😎

\n

That's it, hope this helped, happy coding!

\n

PS: Practice makes perfect - although this method is, in my opinion, foolproof, as one gets more confortable with the hue, brightness and saturation, the palettes will get more and more unique and interesting.

\n

", "rawMarkdown": "Recently I've found [this Youtube video on how to \"Make Hundreds of Color Palettes from 1 COLOR!\"](https://www.youtube.com/watch?v=u5AnzLg1HxY) by [Greg Gunn](https://twitter.com/grgnn) (who is practically a color God, so if you're interested in this type of things I would highly suggest you to follow him).\n\nOf course these are tips for Design, but the same rules apply to Data Visualization and the aeshetics of making a notebook.\n\nSo here are the basic steps on how to make a (not boring) color palette for your notebooks, graphs and schemas (for easy and detailed explanation do watch the linked video).\n\n### 1. Starting with 1 Color\n\nFirst step is to choose the **MAIN** color. I would suggest choosing something that correlates with the theme of the analysis/competition. E.g.:\n1. Marine Life - blue\n2. Medicine - red\n3. Financial Stocks - green, yellow\n\nGreg suggests to choose a color that's **neither too saturated nor too dark** - somewhere in the middle. Because this competition doesn't have a speciffic theme, I just chose one of my favorite colors, which is violet:\n\n\n\n### 2. Change the Gradient and Hue\n\nThis step breaks down into 2 more steps:\n1. we **draw a line** starting from the *top left corner* of the Color Picker (you can use [HTML Color Codes](https://htmlcolorcodes.com/)), *pass through the point* that we have created and end at the *bottom right corner*;\n2. we then prepare to move along that line little by little while also **changing the Hue**.\n\n\n\nSo, in our case, we first move **UP** on the imaginary line and hue 3 times:\n\n\n\nAnd then we move **DOWN** on the imaginary line and hue 3 times:\n\n\n\n**Hence, our primary color palette will be:**\n\n\n\n### 3. Spicing things up - Brightness & Saturation\n\nI will be using [coolor](https://coolors.co/) for this part.\n\nGreg teaches us that now we need to split this customized palette into 2 other parts:\n1. one part in which we will **increase the Brightness and decrease the Saturation** (making the colors more pastel). We can also *move the Hue, but in a very tiny amount*.\n2. the second part in which we will **decrease the Brightness and increase the Saturation**. We can also move the Hue but again, very little and in the opposite direction than what we did for the pastels.\n\n\n\n### 4. Mix them up\n\nNow that we have 3 color palettes (an original, one lighter and one darker), we can choose to use all the colors (for example gradient barcharts work very well with lots of colors), but also combinations of the ones we already have (for pie charts, histograms, schemas or when highlighting words within a notebook).\n\n\n\nThe beauty of this technique is that ... *all colors match pleasantly between them*. We also have lighter shades, but also darker ones. We have more saturated, accent colors, but we also have muted shades.\n\nAnd everything started from only one singular color! 😎\n\nThat's it, hope this helped, happy coding!\n\n*PS: Practice makes perfect - although this method is, in my opinion, foolproof, as one gets more confortable with the hue, brightness and saturation, the palettes will get more and more unique and interesting.*\n\n", "votes": 79 }, { "id": 1812492, "postDate": "2022-06-05T22:42:07.497Z", "content": "

What does it have to do with this competition exactly?

", "rawMarkdown": "What does it have to do with this competition exactly?", "votes": 7 }, { "id": 1806055, "postDate": "2022-05-30T18:35:24.667Z", "content": "

As someone who comes up with color schemes mostly by trial and error, I have to thank you immensily for this post. +1

", "rawMarkdown": "As someone who comes up with color schemes mostly by trial and error, I have to thank you immensily for this post. +1", "votes": 1 }, { "id": 1805774, "postDate": "2022-05-30T13:35:53.960Z", "content": "

Wow great insights , design do matter a lot when it comes to visualization.

", "rawMarkdown": "Wow great insights , design do matter a lot when it comes to visualization.", "votes": 1 }, { "id": 2040612, "postDate": "2022-11-23T07:24:34.960Z", "content": "

Wait, so we can't just use fill = 'midnightblue' for everything? 😏

\n

Another great piece of insight.

", "rawMarkdown": "Wait, so we can't just use **fill = 'midnightblue'** for everything? 😏\n\nAnother great piece of insight." }, { "id": 1859841, "postDate": "2022-07-18T02:18:50Z", "content": "

didn't know this existed..Thanks! @andradaolteanu

", "rawMarkdown": "didn't know this existed..Thanks! @andradaolteanu " }, { "id": 1819582, "postDate": "2022-06-14T00:45:13.940Z", "content": "

Thanks a lot for sharing! Will be very useful in my future works.

", "rawMarkdown": "Thanks a lot for sharing! Will be very useful in my future works." }, { "id": 1819557, "postDate": "2022-06-13T22:45:15.780Z", "content": "

I'm glad that I found this. This is great insights to learn about how to choose colors. Thank you for sharing.

", "rawMarkdown": "I'm glad that I found this. This is great insights to learn about how to choose colors. Thank you for sharing." }, { "id": 1813413, "postDate": "2022-06-06T19:43:44.953Z", "content": "

@andradaolteanu Thanks for sharing a great resource. Usually developers do not have a good sense of colors (at least true for me).

\n

Greg has literally explained the color creation it in a way that make it easy and sensible for people like me. βœ¨πŸŽ‰

", "rawMarkdown": "@andradaolteanu Thanks for sharing a great resource. Usually developers do not have a good sense of colors (at least true for me).\n\nGreg has literally explained the color creation it in a way that make it easy and sensible for people like me. βœ¨πŸŽ‰ " }, { "id": 1809814, "postDate": "2022-06-03T04:37:38.700Z", "content": "

Great visual. Thanks for sharing with us.

", "rawMarkdown": "Great visual. Thanks for sharing with us. " }, { "id": 1809807, "postDate": "2022-06-03T04:30:45.657Z", "content": "

Wow! This would help a lot with creating professional looking visualizations. Really appreciate folks like you in Kaggle, generously sharing such knowledge!

", "rawMarkdown": "Wow! This would help a lot with creating professional looking visualizations. Really appreciate folks like you in Kaggle, generously sharing such knowledge!" }, { "id": 1809563, "postDate": "2022-06-02T19:39:53.920Z", "content": "

Very nice process! Something so simple, but also very glaring if not done very well. Thanks for the quick guide to improving our colour palettes.

", "rawMarkdown": "Very nice process! Something so simple, but also very glaring if not done very well. Thanks for the quick guide to improving our colour palettes." }, { "id": 1808292, "postDate": "2022-06-01T17:24:56.073Z", "content": "

I am a visual person, I like it when notebooks look nice πŸ¦„ this was insightful, thank you.

", "rawMarkdown": "I am a visual person, I like it when notebooks look nice πŸ¦„ this was insightful, thank you." }, { "id": 1807935, "postDate": "2022-06-01T12:52:19.377Z", "content": "

Beautiful colors! Awesome tips! Thank you for sharing @andradaolteanu :)

", "rawMarkdown": "Beautiful colors! Awesome tips! Thank you for sharing @andradaolteanu :)" }, { "id": 1807117, "postDate": "2022-05-31T18:18:54.180Z", "content": "

I really liked your post. Thanks for sharing πŸ‘

", "rawMarkdown": "I really liked your post. Thanks for sharing πŸ‘" }, { "id": 1806382, "postDate": "2022-05-31T05:22:12.023Z", "content": "

Such a beautiful post…! Love your dedication, congrats! :)

", "rawMarkdown": "Such a beautiful post...! Love your dedication, congrats! :)" }, { "id": 1806370, "postDate": "2022-05-31T05:13:19.880Z", "content": "

Hey, @andradaolteanu thank you for sharing this informative topic. TOP WORK!

", "rawMarkdown": "Hey, @andradaolteanu thank you for sharing this informative topic. TOP WORK!" }, { "id": 1806269, "postDate": "2022-05-31T01:50:52.610Z", "content": "

Great work and great topic to discover, @andradaolteanu ! Thanks for sharing

", "rawMarkdown": "Great work and great topic to discover, @andradaolteanu ! Thanks for sharing " }, { "id": 1806233, "postDate": "2022-05-30T23:58:40.620Z", "content": "

Great to see such an insightful model of color schemes.

", "rawMarkdown": "Great to see such an insightful model of color schemes." }, { "id": 1810197, "postDate": "2022-06-03T10:41:30.347Z", "rawMarkdown": "", "isDeleted": true }, { "id": 1813867, "postDate": "2022-06-07T09:59:45.327Z", "content": "

Thank you for sharing this with us

", "rawMarkdown": "Thank you for sharing this with us\n " }, { "id": 1813395, "postDate": "2022-06-06T19:16:55.957Z", "content": "

It's nice, thanks for sharing. πŸ‘Œ

", "rawMarkdown": "It's nice, thanks for sharing. πŸ‘Œ" }, { "id": 1806496, "postDate": "2022-05-31T08:41:21.350Z", "content": "

Great, thank you

", "rawMarkdown": "Great, thank you" } ], "comments": [ { "id": 1812492, "author_name": "PaweΕ‚ Jankiewicz", "author_url": "", "post_date": "2022-06-05T22:42:07.497000", "content": "

What does it have to do with this competition exactly?

", "votes": 7, "replies": [] }, { "id": 1806055, "author_name": "Luc_pimentel", "author_url": "", "post_date": "2022-05-30T18:35:24.667000", "content": "

As someone who comes up with color schemes mostly by trial and error, I have to thank you immensily for this post. +1

", "votes": 1, "replies": [] }, { "id": 1805774, "author_name": "Abhishek Kukreja", "author_url": "", "post_date": "2022-05-30T13:35:53.960000", "content": "

Wow great insights , design do matter a lot when it comes to visualization.

", "votes": 1, "replies": [] }, { "id": 2040612, "author_name": "WC", "author_url": "", "post_date": "2022-11-23T07:24:34.960000", "content": "

Wait, so we can't just use fill = 'midnightblue' for everything? 😏

\n

Another great piece of insight.

", "votes": 0, "replies": [] }, { "id": 1859841, "author_name": "Apurba Pandey", "author_url": "", "post_date": "2022-07-18T02:18:50", "content": "

didn't know this existed..Thanks! @andradaolteanu

", "votes": 0, "replies": [] }, { "id": 1819582, "author_name": "Luiza Lober", "author_url": "", "post_date": "2022-06-14T00:45:13.940000", "content": "

Thanks a lot for sharing! Will be very useful in my future works.

", "votes": 0, "replies": [] }, { "id": 1819557, "author_name": "Rajkumar Sengottuvel", "author_url": "", "post_date": "2022-06-13T22:45:15.780000", "content": "

I'm glad that I found this. This is great insights to learn about how to choose colors. Thank you for sharing.

", "votes": 0, "replies": [] }, { "id": 1813413, "author_name": "Muhammad Irfan Azam", "author_url": "", "post_date": "2022-06-06T19:43:44.953000", "content": "

@andradaolteanu Thanks for sharing a great resource. Usually developers do not have a good sense of colors (at least true for me).

\n

Greg has literally explained the color creation it in a way that make it easy and sensible for people like me. βœ¨πŸŽ‰

", "votes": 0, "replies": [] }, { "id": 1809814, "author_name": "Lucas da Silva Procopio", "author_url": "", "post_date": "2022-06-03T04:37:38.700000", "content": "

Great visual. Thanks for sharing with us.

", "votes": 0, "replies": [] }, { "id": 1809807, "author_name": "Ankit Pal", "author_url": "", "post_date": "2022-06-03T04:30:45.657000", "content": "

Wow! This would help a lot with creating professional looking visualizations. Really appreciate folks like you in Kaggle, generously sharing such knowledge!

", "votes": 0, "replies": [] }, { "id": 1809563, "author_name": "Kevin Kwan", "author_url": "", "post_date": "2022-06-02T19:39:53.920000", "content": "

Very nice process! Something so simple, but also very glaring if not done very well. Thanks for the quick guide to improving our colour palettes.

", "votes": 0, "replies": [] }, { "id": 1808292, "author_name": "Nina Almaamary", "author_url": "", "post_date": "2022-06-01T17:24:56.073000", "content": "

I am a visual person, I like it when notebooks look nice πŸ¦„ this was insightful, thank you.

", "votes": 0, "replies": [] }, { "id": 1807935, "author_name": "Making TARS", "author_url": "", "post_date": "2022-06-01T12:52:19.377000", "content": "

Beautiful colors! Awesome tips! Thank you for sharing @andradaolteanu :)

", "votes": 0, "replies": [] }, { "id": 1807117, "author_name": "Marco Cappellini", "author_url": "", "post_date": "2022-05-31T18:18:54.180000", "content": "

I really liked your post. Thanks for sharing πŸ‘

", "votes": 0, "replies": [] }, { "id": 1806382, "author_name": "Erich Henrique", "author_url": "", "post_date": "2022-05-31T05:22:12.023000", "content": "

Such a beautiful post…! Love your dedication, congrats! :)

", "votes": 0, "replies": [] }, { "id": 1806370, "author_name": "Hassan Shehzad", "author_url": "", "post_date": "2022-05-31T05:13:19.880000", "content": "

Hey, @andradaolteanu thank you for sharing this informative topic. TOP WORK!

", "votes": 0, "replies": [] }, { "id": 1806269, "author_name": "Sardor Abdirayimov", "author_url": "", "post_date": "2022-05-31T01:50:52.610000", "content": "

Great work and great topic to discover, @andradaolteanu ! Thanks for sharing

", "votes": 0, "replies": [] }, { "id": 1806233, "author_name": "Sambit Barik", "author_url": "", "post_date": "2022-05-30T23:58:40.620000", "content": "

Great to see such an insightful model of color schemes.

", "votes": 0, "replies": [] }, { "id": 1810197, "author_name": "", "author_url": "", "post_date": "2022-06-03T10:41:30.347000", "content": "", "votes": 0, "replies": [] }, { "id": 1813867, "author_name": "Prathamesh Prabhu", "author_url": "", "post_date": "2022-06-07T09:59:45.327000", "content": "

Thank you for sharing this with us

", "votes": 0, "replies": [] }, { "id": 1813395, "author_name": "aCode", "author_url": "", "post_date": "2022-06-06T19:16:55.957000", "content": "

It's nice, thanks for sharing. πŸ‘Œ

", "votes": 0, "replies": [] }, { "id": 1806496, "author_name": "Abderrahmen Melliti", "author_url": "", "post_date": "2022-05-31T08:41:21.350000", "content": "

Great, thank you

", "votes": 0, "replies": [] } ], "raw_markdown_by_id": { "1805666": "Recently I've found [this Youtube video on how to \"Make Hundreds of Color Palettes from 1 COLOR!\"](https://www.youtube.com/watch?v=u5AnzLg1HxY) by [Greg Gunn](https://twitter.com/grgnn) (who is practically a color God, so if you're interested in this type of things I would highly suggest you to follow him).\n\nOf course these are tips for Design, but the same rules apply to Data Visualization and the aeshetics of making a notebook.\n\nSo here are the basic steps on how to make a (not boring) color palette for your notebooks, graphs and schemas (for easy and detailed explanation do watch the linked video).\n\n### 1. Starting with 1 Color\n\nFirst step is to choose the **MAIN** color. I would suggest choosing something that correlates with the theme of the analysis/competition. E.g.:\n1. Marine Life - blue\n2. Medicine - red\n3. Financial Stocks - green, yellow\n\nGreg suggests to choose a color that's **neither too saturated nor too dark** - somewhere in the middle. Because this competition doesn't have a speciffic theme, I just chose one of my favorite colors, which is violet:\n\n\n\n### 2. Change the Gradient and Hue\n\nThis step breaks down into 2 more steps:\n1. we **draw a line** starting from the *top left corner* of the Color Picker (you can use [HTML Color Codes](https://htmlcolorcodes.com/)), *pass through the point* that we have created and end at the *bottom right corner*;\n2. we then prepare to move along that line little by little while also **changing the Hue**.\n\n\n\nSo, in our case, we first move **UP** on the imaginary line and hue 3 times:\n\n\n\nAnd then we move **DOWN** on the imaginary line and hue 3 times:\n\n\n\n**Hence, our primary color palette will be:**\n\n\n\n### 3. Spicing things up - Brightness & Saturation\n\nI will be using [coolor](https://coolors.co/) for this part.\n\nGreg teaches us that now we need to split this customized palette into 2 other parts:\n1. one part in which we will **increase the Brightness and decrease the Saturation** (making the colors more pastel). We can also *move the Hue, but in a very tiny amount*.\n2. the second part in which we will **decrease the Brightness and increase the Saturation**. We can also move the Hue but again, very little and in the opposite direction than what we did for the pastels.\n\n\n\n### 4. Mix them up\n\nNow that we have 3 color palettes (an original, one lighter and one darker), we can choose to use all the colors (for example gradient barcharts work very well with lots of colors), but also combinations of the ones we already have (for pie charts, histograms, schemas or when highlighting words within a notebook).\n\n\n\nThe beauty of this technique is that ... *all colors match pleasantly between them*. We also have lighter shades, but also darker ones. We have more saturated, accent colors, but we also have muted shades.\n\nAnd everything started from only one singular color! 😎\n\nThat's it, hope this helped, happy coding!\n\n*PS: Practice makes perfect - although this method is, in my opinion, foolproof, as one gets more confortable with the hue, brightness and saturation, the palettes will get more and more unique and interesting.*\n\n", "1812492": "What does it have to do with this competition exactly?", "1806055": "As someone who comes up with color schemes mostly by trial and error, I have to thank you immensily for this post. +1", "1805774": "Wow great insights , design do matter a lot when it comes to visualization.", "2040612": "Wait, so we can't just use **fill = 'midnightblue'** for everything? 😏\n\nAnother great piece of insight.", "1859841": "didn't know this existed..Thanks! @andradaolteanu ", "1819582": "Thanks a lot for sharing! Will be very useful in my future works.", "1819557": "I'm glad that I found this. This is great insights to learn about how to choose colors. Thank you for sharing.", "1813413": "@andradaolteanu Thanks for sharing a great resource. Usually developers do not have a good sense of colors (at least true for me).\n\nGreg has literally explained the color creation it in a way that make it easy and sensible for people like me. βœ¨πŸŽ‰ ", "1809814": "Great visual. Thanks for sharing with us. ", "1809807": "Wow! This would help a lot with creating professional looking visualizations. Really appreciate folks like you in Kaggle, generously sharing such knowledge!", "1809563": "Very nice process! Something so simple, but also very glaring if not done very well. Thanks for the quick guide to improving our colour palettes.", "1808292": "I am a visual person, I like it when notebooks look nice πŸ¦„ this was insightful, thank you.", "1807935": "Beautiful colors! Awesome tips! Thank you for sharing @andradaolteanu :)", "1807117": "I really liked your post. Thanks for sharing πŸ‘", "1806382": "Such a beautiful post...! Love your dedication, congrats! :)", "1806370": "Hey, @andradaolteanu thank you for sharing this informative topic. TOP WORK!", "1806269": "Great work and great topic to discover, @andradaolteanu ! Thanks for sharing ", "1806233": "Great to see such an insightful model of color schemes.", "1810197": "", "1813867": "Thank you for sharing this with us\n ", "1813395": "It's nice, thanks for sharing. πŸ‘Œ", "1806496": "Great, thank you" } }