From 666f10057332e6a4963483136b17379c30a9599d Mon Sep 17 00:00:00 2001 From: Romain Lafourcade Date: Sun, 29 Sep 2019 22:37:53 +0200 Subject: [PATCH 1/4] flesshed out part 1 --- .../romainl-the-making-of-a-colorscheme-i.md | 114 ++++++++++++++++++ .../romainl-the-making-of-a-colorscheme-ii.md | 16 +++ 2 files changed, 130 insertions(+) create mode 100755 content/2019/romainl-the-making-of-a-colorscheme-i.md create mode 100755 content/2019/romainl-the-making-of-a-colorscheme-ii.md diff --git a/content/2019/romainl-the-making-of-a-colorscheme-i.md b/content/2019/romainl-the-making-of-a-colorscheme-i.md new file mode 100755 index 0000000..ee467da --- /dev/null +++ b/content/2019/romainl-the-making-of-a-colorscheme-i.md @@ -0,0 +1,114 @@ +--- +title: "The Making of a Colorscheme — Part 1: Design" +publishDate: 2019-12-24 +draft: true +description: "foo bar baz" +slug: "the-making-of-a-colorscheme-part-1-design" +author: + name: "Romain Lafourcade" + github: "romainl" + sourcehut: "~romainl" + gitlab: "romainl" + bitbucket: "romainl" +--- + +* Theory + * colorschemes in general + * color theory + * harmonies + * colorschemes for text + * light background or dark background? + * color blindness +* Practice + +The purpose of this two-parts article is to demystify the process of creating what Vim calls a "colorscheme", a script used to assign specific visual properties to specific parts of your favorite text editor. + +This part will focus on the theory, physical constraints, techniques, and thought processes typically involved in putting together an organized list of colors. This is the first step of designing a "colorscheme". + +The second part will focus on how to implement and distribute colorschemes, turning the palette we built in part 1 into a proper Vim colorscheme. + +## The purpose of syntax highlighting + +In text editors, the whole point of syntax highlighting is to make it easier for the user to *see* important things in the text they are working with. The basic idea is to highlight every token belonging to a class with the same color, and do so for every class potentially present in our text, so that our eyes can scan the document efficiently and our brain can understand structure and spot interesting things. + +This can't be properly achieved by using random colors that change every time you look at the same document, or by using colors that are too similar, or by using jarring colors (remember we are trying to help people, not make their eyes bleed), or by using too few or too many colors, or by depending too much on the physical properties of the user's device… so we will need: + +* a solid understanding of how color works, +* a systematic approach. + +## A primer on color + +The apple is not red. Its surface is made of tiny particles that, under certain circumstances, reflect certain wavelengths of the electromagnetic spectrum that, after being processed in our eyes, are associated by our brain with the concept of "red". Or not. The light our apple receives may not be perfectly white to begin with (think highway tunnels), or we may watch it through a colored window, or we may have slightly dysfunctional photoreceptors that can't process those specific wavelengths, or our culture may only have one word for "not green", etc. + +Color is, more than anything, a combination of phenomenons happening in the outside world, in our own body, and in our mind, all of them subject to *many* factors. + +### Vocabulary + +With such a fuzzy nature, color is not really an easy topic to discuss so we invented a number of terms to communicate some of its aspects in a hopefully objective way. Some of those terms are "abstract", meaning that they are used to discuss color among non-specialists and may or may not refer to measurable properties, while others are "concrete", more technical and science-y than their friends but not necessarily more objective. + +Making a colorscheme generally requires juggling with abstract and concrete terms and concepts: on one hand we want it to be eye-pleasing or evoke certain feelings (subjective, abstract) but we also want it to work correctly under different conditions or our colors to have some sort of logical distribution (objective, concrete). So let's get acquainted with the most useful terms. + +Aspect | Description | Example +---|---|--- +Hue | The name of the color | Blue, orange +Value | How lighter or darker a color is when white or black is added | dsdsd +Tint | Value obtained by adding white to a hue | sdsds +Shade | Value obtained by adding black to a hue | sdsdfsg +Tone | Value obtained by adding grey to a hue | sdsdsd + +#### Hue + +Experts aren't exactly unanimous about *why*, but they agree that it is possible to tell how much a given color diverges from four "pure hues": "red", "green", "blue", and "yellow". + +It may be difficult to find the exact word to describe the color of our apple but it is relatively easy to decide in which of the largest color buckets—"red", "green", "blue", and "yellow"—we shall put it. Those are "primary" or "unique" hues. + +But the apples in our "red" bucket are not all the same red. Some of them are decidedly more "red" than "yellow" but it's not clear cut so we put them in a "red-yellow" bucket and we do the same with the slightly red-ish apples from the "yellow" bucket and put them in a "yellow-red" bucket. At that point, we may find that some of the apples from the "red-yellow" and "yellow-red" bucket look so similar that we could in fact put them in their own bucket and invent a name for it: "orange". + +The hue of a color expresses how much it diverges from so-called "pure colors": red, green, blue, and yellow. Because it relates to broad categories it is the most immediately identifiable property of a color. + +Saturation + +Luminance + +## Contrast + +## Harmony + +## Cohesiveness + +## Environmental influence + +### proportions des surfaces +#### fond +##### foncé +##### clair +#### texte + + + + +## Artistic constraints +### High or low contrast +### Seasons +### Hot or cold +### Monochrom +### Documentary source + +## Sight deficiencies +### color blindness +## Vim constraints + +At a high level, the way it works is the same everywhere: there is a mechanism that divides your text in tokens according to some syntactic rules and another system that assigns styling to those tokens. + +## Best practices +## Hands-on + construire une palette + choisir des couleurs de base + couleurs secondaires + rhythme + + + + + +[//]: # ( Vim: set spell spelllang=en: ) diff --git a/content/2019/romainl-the-making-of-a-colorscheme-ii.md b/content/2019/romainl-the-making-of-a-colorscheme-ii.md new file mode 100755 index 0000000..03e696b --- /dev/null +++ b/content/2019/romainl-the-making-of-a-colorscheme-ii.md @@ -0,0 +1,16 @@ +--- +title: "The Making of a Colorscheme — Part 2: Implementation" +publishDate: 2019-12-24 +draft: true +description: "foo bar baz" +slug: "designing-a-colorscheme" +author: + name: "Romain Lafourcade" + github: "romainl" +--- + +* color theory +* + + +[//]: # ( Vim: set spell spelllang=en: ) From 23b65ca01c1dd83c76c31c5b336e7b35ab9f5950 Mon Sep 17 00:00:00 2001 From: Romain Lafourcade Date: Mon, 30 Sep 2019 22:46:14 +0200 Subject: [PATCH 2/4] More order --- .../romainl-the-making-of-a-colorscheme-i.md | 55 ++++++++----------- 1 file changed, 24 insertions(+), 31 deletions(-) diff --git a/content/2019/romainl-the-making-of-a-colorscheme-i.md b/content/2019/romainl-the-making-of-a-colorscheme-i.md index ee467da..b2c54d1 100755 --- a/content/2019/romainl-the-making-of-a-colorscheme-i.md +++ b/content/2019/romainl-the-making-of-a-colorscheme-i.md @@ -2,7 +2,7 @@ title: "The Making of a Colorscheme — Part 1: Design" publishDate: 2019-12-24 draft: true -description: "foo bar baz" +description: "Making a colorscheme" slug: "the-making-of-a-colorscheme-part-1-design" author: name: "Romain Lafourcade" @@ -12,22 +12,13 @@ author: bitbucket: "romainl" --- -* Theory - * colorschemes in general - * color theory - * harmonies - * colorschemes for text - * light background or dark background? - * color blindness -* Practice - The purpose of this two-parts article is to demystify the process of creating what Vim calls a "colorscheme", a script used to assign specific visual properties to specific parts of your favorite text editor. This part will focus on the theory, physical constraints, techniques, and thought processes typically involved in putting together an organized list of colors. This is the first step of designing a "colorscheme". The second part will focus on how to implement and distribute colorschemes, turning the palette we built in part 1 into a proper Vim colorscheme. -## The purpose of syntax highlighting +## Why syntax highlighting? In text editors, the whole point of syntax highlighting is to make it easier for the user to *see* important things in the text they are working with. The basic idea is to highlight every token belonging to a class with the same color, and do so for every class potentially present in our text, so that our eyes can scan the document efficiently and our brain can understand structure and spot interesting things. @@ -48,14 +39,6 @@ With such a fuzzy nature, color is not really an easy topic to discuss so we inv Making a colorscheme generally requires juggling with abstract and concrete terms and concepts: on one hand we want it to be eye-pleasing or evoke certain feelings (subjective, abstract) but we also want it to work correctly under different conditions or our colors to have some sort of logical distribution (objective, concrete). So let's get acquainted with the most useful terms. -Aspect | Description | Example ----|---|--- -Hue | The name of the color | Blue, orange -Value | How lighter or darker a color is when white or black is added | dsdsd -Tint | Value obtained by adding white to a hue | sdsds -Shade | Value obtained by adding black to a hue | sdsdfsg -Tone | Value obtained by adding grey to a hue | sdsdsd - #### Hue Experts aren't exactly unanimous about *why*, but they agree that it is possible to tell how much a given color diverges from four "pure hues": "red", "green", "blue", and "yellow". @@ -70,6 +53,14 @@ Saturation Luminance +Value + +Tint + +Shade + +Tone + ## Contrast ## Harmony @@ -78,11 +69,11 @@ Luminance ## Environmental influence -### proportions des surfaces -#### fond -##### foncé -##### clair -#### texte +### areas +#### background +##### dark +##### light +#### text vs shapes @@ -91,21 +82,23 @@ Luminance ### High or low contrast ### Seasons ### Hot or cold -### Monochrom +### Monochrome ### Documentary source ## Sight deficiencies ### color blindness ## Vim constraints -At a high level, the way it works is the same everywhere: there is a mechanism that divides your text in tokens according to some syntactic rules and another system that assigns styling to those tokens. - ## Best practices ## Hands-on - construire une palette - choisir des couleurs de base - couleurs secondaires - rhythme + +Build a palette + +Choose base colors + +Secondary colors + +Rhythm From 6b39fd7793f09102ce441c79ef11d0eaa1d7596e Mon Sep 17 00:00:00 2001 From: Romain Lafourcade Date: Mon, 30 Sep 2019 22:47:14 +0200 Subject: [PATCH 3/4] Added stub for part 2 --- content/2019/romainl-the-making-of-a-colorscheme-ii.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/2019/romainl-the-making-of-a-colorscheme-ii.md b/content/2019/romainl-the-making-of-a-colorscheme-ii.md index 03e696b..3d15221 100755 --- a/content/2019/romainl-the-making-of-a-colorscheme-ii.md +++ b/content/2019/romainl-the-making-of-a-colorscheme-ii.md @@ -2,15 +2,15 @@ title: "The Making of a Colorscheme — Part 2: Implementation" publishDate: 2019-12-24 draft: true -description: "foo bar baz" -slug: "designing-a-colorscheme" +description: "Making a colorscheme" +slug: "the-making-of-a-colorscheme-part-2-implementation" author: name: "Romain Lafourcade" github: "romainl" + sourcehut: "~romainl" + gitlab: "romainl" + bitbucket: "romainl" --- -* color theory -* - [//]: # ( Vim: set spell spelllang=en: ) From 405c81fee509109f02089fe76a1c1a278c24555f Mon Sep 17 00:00:00 2001 From: Romain Lafourcade Date: Tue, 31 Dec 2019 15:00:20 +0100 Subject: [PATCH 4/4] Moved files --- .../index.md} | 0 .../index.md} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename content/2019/{romainl-the-making-of-a-colorscheme-i.md => romainl-the-making-of-a-colorscheme-i/index.md} (100%) rename content/2019/{romainl-the-making-of-a-colorscheme-ii.md => romainl-the-making-of-a-colorscheme-ii/index.md} (100%) diff --git a/content/2019/romainl-the-making-of-a-colorscheme-i.md b/content/2019/romainl-the-making-of-a-colorscheme-i/index.md similarity index 100% rename from content/2019/romainl-the-making-of-a-colorscheme-i.md rename to content/2019/romainl-the-making-of-a-colorscheme-i/index.md diff --git a/content/2019/romainl-the-making-of-a-colorscheme-ii.md b/content/2019/romainl-the-making-of-a-colorscheme-ii/index.md similarity index 100% rename from content/2019/romainl-the-making-of-a-colorscheme-ii.md rename to content/2019/romainl-the-making-of-a-colorscheme-ii/index.md