Des machines à écrire aux pixels : un voyage avec CMJN, RVB et la création d'un visualiseur de couleurs

Quand j'étais enfant, je publiais un fanzine sur la bande dessinée. C'était bien avant que j'aie un ordinateur : il a été créé à l'aide d'une machine à écrire, de papier et de ciseaux !

Le fanzine était initialement en noir et blanc, photocopié dans mon école. Au fil du temps, au fur et à mesure de son succès, j'ai pu me permettre l'impression offset avec des couvertures couleur !

Cependant, gérer ces couleurs était assez difficile. Chaque couverture devait être imprimée quatre fois, une fois pour chaque couleur : cyan, magenta, jaune et clé (noir) - en abrégé CMJN.

Cela signifiait que je devais fournir quatre feuilles distinctes, chacune imprimée à l'encre noire, mais correspondant à une couleur précise.

Voici un des numéros que j'ai publié :

Tout le jaune que vous voyez dans l’image ci-dessus a été peint à la main par moi en utilisant de l’encre noire sur la feuille « jaune ». Pour les tons chair, j'ai utilisé quelque chose appelé « points raster ». C'étaient des feuilles que l'on pouvait acheter avec des points noirs de différentes densités. Vous découperiez les points et les appliqueriez — dans ce cas, sur la feuille « rouge ».

J'ai travaillé sur une table lumineuse - une table à dessin en verre avec éclairage intégré - pour pouvoir voir à travers les différentes feuilles tout en les alignant correctement.

Cela prenait très de temps, mais cela a suscité un intérêt permanent pour la compréhension des couleurs - et l'énorme différence entre les couleurs d'impression et celles d'écran !

Bien que le CMJN soit limité à quatre couleurs, il reste relativement facile à comprendre. Nous avons tous utilisé des crayons de couleur sur du papier et avons une idée intuitive de la façon dont les couleurs se mélangent. CMJN est un modèle de couleur soustractif. Vous commencez avec une feuille de papier blanche et, à mesure que vous ajoutez de l’encre, vous soustrayez de la lumière. La combinaison de toutes les couleurs vous amène vers le noir. Si vous n’appliquez aucune encre, le papier reste blanc car il reflète toute la lumière.

Quand j'ai eu mon premier ordinateur, j'ai dû comprendre le RVB, qui est très différent du CMJN. RVB est un modèle de couleur additif utilisé pour les écrans numériques. Ici, vous mélangez la lumière elle-même : ajouter plus de lumière rend les couleurs plus brillantes et vous rapproche du blanc. Éteignez toutes les lumières RVB (R=0, G=0, B=0) et l'écran devient noir car aucune lumière n'est émise.

En tant que graphiste à l'époque, il fallait calibrer son écran car les couleurs que l'on voyait à l'écran et celles que l'on voyait sur papier étaient souvent très différentes !

Visualisation RVB

RVB représente trois sources de lumière : rouge, verte et bleue. Lorsqu'une lumière est éteinte, sa valeur est 0 ; lorsqu'il est complètement allumé, sa valeur est de 255. Lorsque ces lumières se chevauchent, elles créent des couleurs différentes.

Pour mieux comprendre le fonctionnement du RVB, créons un petit outil :

HTML

<fieldset class="rgb">
  <label class="r">
    R:<input
      type="number"
      name="r"
      min="0"
      max="255"
      value="255"
  /></label>
  <label class="g">
    G:<input
      type="number"
      name="g"
      min="0"
      max="255"
      value="255"
  /></label>
  <label class="b">
    B:<input
      type="number"
      name="b"
      min="0"
      max="255"
      value="255"
  /></label>
  <output class="rg">R+G</output>
  <output class="rb">R+B</output>
  <output class="gb">G+B</output>
</fieldset>

Styles

Tout d'abord, créons une grille 9x8 :

.rgb {
  all: unset;
  aspect-ratio: 9 / 8;
  container-type: inline-size;
  display: grid;
  font-size: 1.75cqi;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
}

C'est une taille inhabituelle, mais c'est parce que nos cercles R, G et B font 5x5 et se chevauchent :

.r, .g, .b {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  font-size: 5cqi;
  mix-blend-mode: difference;
}

Le CSS pour .r, .g et .b est :

.r {
  background-color: rgb(var(--r), 0, 0);
  grid-area: 1 / 3 / 6 / 8;
}

.g {
  background-color: rgb(0, var(--g), 0);
  grid-area: 4 / 1 / 9 / 6;
}

.b {
  background-color: rgb(0, 0, var(--b));
  grid-area: 4 / 5 / 9 / 10;
}

J'ai beaucoup utilisé la zone de grille ces derniers temps. Il vous permet de placer un élément de la grille à un emplacement très précis :

début de ligne / début de col / fin de ligne / fin de col

Il est plus facile de visualiser cela si vous activez le visualiseur de grille de Dev Tools :

Avez-vous remarqué les trois propriétés personnalisées CSS, --r, --g et --b ? Nous les mettrons à jour dans un petit extrait JS :

const rgb = document.querySelector('.rgb');
rgb.addEventListener('input', e => {
  const N = e.target;
  document.body.style.setProperty(`--${N.name}`, N.value);
})

Et c’est essentiellement tout. J'ai ajouté quelques éléments

et des ajustements mineurs… mais j'ai presque oublié de mentionner la ligne la plus importante pour faire fonctionner le visualiseur :

mix-blend-mode : différence

Lisez-en ici : c'est très amusant de parcourir tous les modes.

Démo

Voici un Codepen. Cliquez et modifiez les chiffres sous R, G et B, et remarquez comment l'arrière-plan de la page et les parties qui se chevauchent des trois cercles changent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!