當我還是個孩子的時候，我出版了一本關於漫畫的同人雜誌。那是在我擁有計算機之前很久——它是用打字機、紙和剪刀創建的！
同人雜誌原本是黑白的，在我的學校複印的。隨著時間的推移，隨著它取得了更大的成功，我能夠負擔得起帶有彩色封面的膠印！
但是，管理這些顏色非常具有挑戰性。每個封面必須列印四次，每種顏色列印一次：青色、洋紅色、黃色和基底色（黑色）——縮寫為 CMYK。
這意味著我必須提供四張單獨的紙，每張都用黑色墨水列印，但對應於特定的顏色。
這是我發表的其中一期：
上圖你看到的所有黃色都是我用黑色墨水在「黃色」紙上手繪的。對於膚色，我使用了一種叫做“光柵點”的東西。您可以購買不同密度黑點的床單。您可以剪下這些點並將它們應用到 - 在本例中，應用到「紅色」紙上。
我在一張燈台上工作 - 一個帶有內置照明的玻璃頂繪圖桌 - 這樣我就可以在正確對齊各種紙張的同時看到它們。
這非常耗時，但它激發了人們對理解顏色的終生興趣——以及打印顏色和屏幕顏色之間的巨大差異！
雖然CMYK僅限於四種顏色，但它仍然相對容易掌握。我們都曾在紙上使用過色鉛筆，並且對顏色如何混合有直覺的感覺。 CMYK 是一種減色顏色模型。你從一張白紙開始，當你添加更多墨水時，你實際上是在減去光線。組合所有顏色會讓你走向黑色。如果不塗任何墨水，紙張會保持白色，因為它會反射所有光線。
當我拿到第一台電腦時，我必須了解 RGB，它與 CMYK 非常不同。 RGB 是一種用於數位螢幕的相加顏色模型。在這裡，您正在混合光線本身 - 添加更多光線會使顏色更明亮，並使您接近白色。關閉所有RGB燈（R=0，G=0，B=0），螢幕變黑，因為沒有光發出。
當時作為平面設計師，您必須校準螢幕，因為您在螢幕上看到的顏色和在列印中看到的顏色通常非常不同！
視覺化 RGB
RGB代表三種光源：紅、綠、藍。當燈關閉時，其值為0；當它完全開啟時，其值為255。當這些燈重疊時，它們會產生不同的顏色。
為了更好地理解 RGB 的工作原理，讓我們建立一個小工具：
超文本標記語言
<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;
}
登入後複製
我最近常使用網格區域。它可以讓您將網格項目放置在非常特定的位置：
行開始/列開始/行結束/列結束
如果您啟用開發工具的網格視覺化工具：
，則可以更輕鬆地將其視覺化
你注意到三個 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);
})
登入後複製
基本上就是這樣。我添加了一些
混合混合模式：差異
在這裡閱讀相關內容 - 循環瀏覽所有模式非常有趣。
示範
這是一個 Codepen。點擊並編輯 R、G 和 B 下面的數字，注意頁面背景和所有三個圓圈的重疊部分如何變化。
以上是從打字機到像素：CMYK、RGB 和建立色彩視覺化工具的旅程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
