Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add stubs for my two-parts article on creating a colorscheme #73

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 107 additions & 0 deletions content/2019/romainl-the-making-of-a-colorscheme-i/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
---
title: "The Making of a Colorscheme — Part 1: Design"
publishDate: 2019-12-24
draft: true
description: "Making a colorscheme"
slug: "the-making-of-a-colorscheme-part-1-design"
author:
name: "Romain Lafourcade"
github: "romainl"
sourcehut: "~romainl"
gitlab: "romainl"
bitbucket: "romainl"
---

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.

## 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.

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.

#### 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

Value

Tint

Shade

Tone

## Contrast

## Harmony

## Cohesiveness

## Environmental influence

### areas
#### background
##### dark
##### light
#### text vs shapes




## Artistic constraints
### High or low contrast
### Seasons
### Hot or cold
### Monochrome
### Documentary source

## Sight deficiencies
### color blindness
## Vim constraints

## Best practices
## Hands-on

Build a palette

Choose base colors

Secondary colors

Rhythm





[//]: # ( Vim: set spell spelllang=en: )
16 changes: 16 additions & 0 deletions content/2019/romainl-the-making-of-a-colorscheme-ii/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
title: "The Making of a Colorscheme — Part 2: Implementation"
publishDate: 2019-12-24
draft: true
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"
---


[//]: # ( Vim: set spell spelllang=en: )