タイプライターからピクセルへ: CMYK、RGB、およびカラー ビジュアライザーの構築の旅

子供の頃、漫画の同人誌を発行していました。これは私がコンピューターを持つずっと前のことで、タイプライター、紙、ハサミを使って作成されていました!

同人誌は最初は白黒で、私の学校でコピーされました。時間が経つにつれ、成功が進むにつれて、カラーの表紙でオフセット印刷できるようになりました!

しかし、これらの色の管理は非常に困難でした。各表紙は、シアン、マゼンタ、イエロー、キー (黒) の色ごとに 1 回ずつ、合計 4 回印刷する必要がありました (CMYK と略されます)。

これは、それぞれ黒インクで印刷され、特定の色に対応する 4 つの別々のシートを用意する必要があることを意味します。

これが私が発行した問題の 1 つです:

上の画像にある黄色はすべて、私が「黄色」のシートに黒のインクを使って手描きしたものです。肌のトーンには「ラスタードット」と呼ばれるものを使いました。これらは、さまざまな密度の黒い点が入ったシートを購入できました。ドットを切り取って、この場合は「赤い」シートに適用します。

私はライト テーブル (照明が組み込まれたガラストップの描画テーブル) を使って作業しました。これにより、さまざまなシートを正しく位置合わせしながら透けて見ることができました。

これは非常に時間がかかりましたが、色を理解すること、そして印刷とスクリーンの色の大きなの違いを理解することへの生涯にわたる関心を呼び起こしました!

CMYK は 4 色に限定されていますが、それでも比較的簡単に理解できます。私たちは皆、紙に色鉛筆を使ったことがあるので、色がどのように混ざり合うかを直感的に理解しています。 CMYK は減法カラー モデルです。白い紙から始めて、さらにインクを追加すると、実際には光が差し引かれます。すべての色を組み合わせると、黒に近づきます。インクを塗布しなければ、紙はすべての光を反射するため白いままです。

初めてコンピューターを手に入れたとき、CMYK とは非常に異なる RGB を理解する必要がありました。 RGB は、デジタル画面に使用される加法的 カラー モデルです。ここでは、光そのものを混合しています。光をさらに追加すると、色が明るくなり、白に近づきます。すべての RGB ライト (R=0、G=0、B=0) をオフにすると、光が発せられなくなるため、画面が真っ暗になります。

当時のグラフィック デザイナーは、画面で見る色と印刷で見る色が非常に異なることがよくあったため、画面を調整する必要がありました。

RGB の視覚化

RGB は、赤、緑、青の 3 つの光源を表します。ライトが オフ の場合、その値は 0 です。完全にオンの場合、値は 255 です。これらのライトが重なると、異なる色が作成されます。

RGB の仕組みをより深く理解するために、小さなツールを構築してみましょう:

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>

スタイル

まず、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%;
}

これは異常なサイズですが、R、G、B の円が 5x5 で 重なっている ためです。

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

.r、.g、.b の CSS は次のとおりです:

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

最近グリッドエリアをよく使っています。これにより、非常に特定の場所にグリッド項目を配置できます:

行の先頭 / 列の先頭 / 行の末尾 / 列の末尾

Dev Tools の グリッド ビジュアライザ を有効にすると、これを簡単に視覚化できます:

3 つの CSS カスタム プロパティ、--r、--g、--b に気づきましたか?これらを小さな JS スニペットで更新します:

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

基本的にはそれだけです。

要素をいくつか追加し、微調整を加えました…しかし、ビジュアライザを機能させるための 最も重要な 1 行について言及するのをほとんど忘れていました:

ミックスブレンドモード: 違い

これについては、こちらをお読みください。すべてのモードをループするのはとても楽しいです。

デモ

これがコードペンです。 R、G、B の下の数字をクリックして編集すると、ページの背景と 3 つの円すべての重なり合う部分がどのように変化するかに注目してください。

以上がタイプライターからピクセルへ: CMYK、RGB、およびカラー ビジュアライザーの構築の旅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。