Von Schreibmaschinen zu Pixeln: Eine Reise mit CMYK, RGB und dem Aufbau eines Farbvisualisierers

Als Kind habe ich ein Fanzine über Comics veröffentlicht. Das war lange bevor ich einen Computer hatte – es wurde mit Schreibmaschine, Papier und Schere erstellt!

Das Fanzine war ursprünglich in Schwarzweiß und wurde in meiner Schule fotokopiert. Mit der Zeit, als es immer erfolgreicher wurde, konnte ich mir den Offsetdruck mit Farbcovern leisten!

Allerdings war die Verwaltung dieser Farben eine ziemliche Herausforderung. Jedes Cover musste viermal gedruckt werden, einmal für jede Farbe: Cyan, Magenta, Gelb und Key (Schwarz) – abgekürzt als CMYK.

Das bedeutete, dass ich vier separate Blätter bereitstellen musste, jedes mit schwarzer Tinte bedruckt, aber einer bestimmten Farbe entsprechend.

Hier ist eine der Ausgaben, die ich veröffentlicht habe:

Das gesamte Gelb, das Sie im Bild oben sehen, wurde von mir mit schwarzer Tinte auf das „gelbe“ Blatt handgemalt. Für die Hauttöne habe ich sogenannte „Rasterpunkte“ verwendet. Das waren Blätter, die man kaufen konnte, mit schwarzen Punkten unterschiedlicher Dichte. Sie würden die Punkte ausschneiden und auftragen – in diesem Fall auf das „rote“ Blatt.

Ich habe an einem Leuchttisch gearbeitet – einem Zeichentisch mit Glasplatte und integrierter Beleuchtung – damit ich durch die verschiedenen Blätter sehen und sie gleichzeitig richtig ausrichten konnte.

Es war sehr zeitaufwändig, aber es weckte ein lebenslanges Interesse am Verständnis von Farben – und dem riesigen Unterschied zwischen Druck- und Bildschirmfarben!

Obwohl CMYK auf vier Farben beschränkt ist, ist es dennoch relativ einfach zu verstehen. Wir alle haben schon einmal Buntstifte auf Papier verwendet und haben ein intuitives Gespür dafür, wie sich Farben mischen. CMYK ist ein subtraktives Farbmodell. Sie beginnen mit einem weißen Blatt Papier und wenn Sie mehr Tinte hinzufügen, subtrahieren Sie tatsächlich Licht. Die Kombination aller Farben führt Sie in Richtung Schwarz. Wenn Sie keine Tinte auftragen, bleibt das Papier weiß, da es alles Licht reflektiert.

Als ich meinen ersten Computer bekam, musste ich RGB verstehen, was sich sehr von CMYK unterscheidet. RGB ist ein additives Farbmodell, das für digitale Bildschirme verwendet wird. Hier mischen Sie das Licht selbst – wenn Sie mehr Licht hinzufügen, werden die Farben heller und Sie bewegen sich in Richtung Weiß. Schalten Sie alle RGB-Lichter aus (R=0, G=0, B=0) und der Bildschirm wird schwarz, weil kein Licht emittiert wird.

Als Grafikdesigner musste man damals seinen Bildschirm kalibrieren, weil die Farben, die man auf dem Bildschirm sah, und die, die man im Druck sah, oft sehr unterschiedlich waren!

---

RGB visualisieren

RGB repräsentiert drei Lichtquellen: Rot, Grün und Blau. Wenn ein Licht aus ist, ist sein Wert 0; Wenn es vollständig an ist, beträgt der Wert 255. Wenn sich diese Lichter überlappen, erzeugen sie unterschiedliche Farben.

Um besser zu verstehen, wie RGB funktioniert, erstellen wir ein kleines Tool:

---

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>

Stile

Erstellen wir zunächst ein 9x8-Raster:

.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%;
}

Es ist eine ungewöhnliche Größe, aber das liegt daran, dass unsere R-, G- und B-Kreise 5x5 groß sind und überlappen:

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

Das CSS für .r, .g und .b ist:

.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;
}

Ich habe Grid-Area in letzter Zeit häufig verwendet. Damit können Sie ein Rasterelement an einer ganz bestimmten Stelle platzieren:

Zeilenanfang / Spaltenanfang / Zeilenende / Spaltenende

Es ist einfacher, dies zu visualisieren, wenn Sie den Rastervisualisierer von Dev Tools aktivieren:

Sind Ihnen die drei benutzerdefinierten CSS-Eigenschaften --r, --g und --b aufgefallen? Wir werden diese in einem kleinen JS-Snippet aktualisieren:

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

Und das ist im Grunde alles. Ich habe einige

-Elemente und kleinere Anpassungen hinzugefügt … aber ich habe fast vergessen, die einzige wichtigste Zeile zu erwähnen, damit der Visualizer funktioniert:

Mix-Blend-Modus: Unterschied

Lesen Sie hier mehr – es macht großen Spaß, alle Modi zu durchlaufen.

---

Demo

Hier ist ein Codepen. Klicken Sie auf die Zahlen unter R, G und B und bearbeiten Sie sie. Beachten Sie, wie sich der Seitenhintergrund und die überlappenden Teile aller drei Kreise ändern.

Das obige ist der detaillierte Inhalt vonVon Schreibmaschinen zu Pixeln: Eine Reise mit CMYK, RGB und dem Aufbau eines Farbvisualisierers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!