前端需要了解的色彩知識

概述

在前端領域，我們常常需要跟色彩打交道，除了一部分從設計轉過來的前端外（ps：歷史原因），後來的新生代前端絕大多數基本都是學理工科出身的，一般沒有經過專門的設計訓練和培養，這樣在還原設計圖的過程中對於色彩的理解都會或多或少有些出入，從而導致設計和前端產生不必要的矛盾（ps：本是同根生，都相互體諒下），本文旨在通過介紹相關的一些色彩知識，為大家提供一些設計和前端雙重視角下的觀點，也希望能夠給大家提供一些對色彩的不同的認識和理解。

色彩理論

人類對色彩的研究其實很早都有記錄，但真正把色彩作為一門學科或者說有其理論體系，還要從牛頓說起，在之後不斷的科學發展過程中，人們逐漸對色彩有了不同的認識，也正是由於科學的發展，色彩理論在不同領域都有了長足的發展，本文著重分享兩個對我們前端來說需要著重瞭解的色彩理論，即：色環理論以及加減色模式理論。

色環

色環理論經歷了牛頓色環、伊頓色環（傳統色環）、孟塞爾色環、Yurmby色環等幾個不同的階段，這裡重點介紹傳統的經典色環，也就是伊頓色環，其作為包豪斯體系中重要的理論課程，對設計領域的影響巨大（ps：對設計史感興趣的童鞋，可以參看之前的這篇文章世界現代設計史），總體來說，色環理論可以簡單提煉出以下幾個常見的色彩概念：

加色模式 & 減色模式

在介紹加色模式和減色模式，我們先來看下我們從小學到的關於色彩的一些基本知識。我們之前上學的時候，美術老師可能教過三原色和三基色的概念，或者區分光學三原色和色彩三原色等等，這其實就已經是加色模式和減色模式的一個初步瞭解了，本質來說：三原色或者說三基色都是基於不同環境下材料而提出的一種基本色彩而已，我這裡以光學三原色和色彩三原色來區分，光學三原色是：紅(R)、綠(G)、藍(B)，也是我們前端開發過程中常用到的元色；而除了光學三原色外，還有一個色彩三原色，或者叫美術三原色，它們是：紅(M)、黃(Y)、藍(C)，這個是印刷或者繪畫過程中常常用到的元色。相信細心的同學已經發現我在標註英語的時候，色彩三原色和光學三原色裡的紅色及藍色好像是不一樣的，沒錯，正是由於不同場景下對於色彩使用的不同，而對色彩進行加合的過程中出現了不同的模式。這裡，就要引出我們這一部分的核心理論了，即：加色模式和減色模式。

下面給出不嚴謹的加色模式和減色模式的定義

加色模式是指對色彩模型中的屬性進行加和的模式；減色模式是指對色彩模型中的屬性進行吸收的模式

那麼為什麼光學色彩是加色法而美術色彩卻是減色呢？因為本質上，在光學場景中，比如在計算機顯示器中通常使用的是從一種光源來發出不同的元色給人呈現色彩，不同的顯示器製造材料有不同的顯示特點，比如有：陰極射線管顯示器(CRT)、等離子顯示器(PDP)、液晶顯示器(LCD)以及有機發光半導體顯示器(OLED)等等，但這些通常都會是從一個光源發出的，因而這些通常就是加色模型，而一般來說會有RGB模型、YUV(YCrCb)模型等，在前端來說，我們們常見的是以RGB模型進行的相關對應關係程式碼操作，這裡涉及到了色彩模型，具體請看下一部分的介紹。而在美術或者印刷場景中，則是利用的物體反射光線的原理，也就是說我們日常看到的物體的顏色其實是顯示的它不能被吸收的顏色，例如：粉色顏料其實吸收了除粉色以外的所有光線，所以我們才能看到它是粉色，因而減色其實是吸收的模式，因而在CMYK模型中，其就是典型的減色模式。

色彩模型

在有了對色彩的初步認識之後，如果想要來描述色彩，我們就需要建立一個模型來描述它，這裡就引出了色彩模型的概念，基於wiki百科和百度百科，我們不嚴謹的給出如下的定義：

色彩模型是用一個元組或者集合來描述可見光的子集，這裡的元組通常為三元或者四元。

通常來說，按照是否裝置相關，我們可以將色彩模型分為裝置相關色彩模型以及裝置不相關的色彩模型，基於此大致可以分為兩大體系，即：RGB體系及XYZ體系，這裡我們將介紹以下幾種常見的色彩模型：RGB/CMYK、YUV/YCrCb、HS*、Lab、XYZ，下面將分別介紹下相關的顏色模型。

RGB & CMYK

RGB模型是典型的加法模型，其通過設立RGB為三個基色進行多種顏色的不同模型組合，其中R/G/B分別作為三維歐氏空間中的維度表示，對顏色進行相關的構建，如上圖所示。

不同於RGB模型的加法合成，對於印刷相關的場景，則是典型的減法合成，而這裡最常見的就是跟物質相關的基礎顏料作為基礎模型空間的維度，最常見的便是CMYK模型，其仍然是符合歐氏空間的模型構建，只是對於合成的演算法過程中使用的是減法合成。

YUV & YCrCb

YUV模型作為RGB模型的變形形式，其常用於視訊、電視領域的色彩表示。由於在視訊及電視領域中，對於色調和飽和度的指標相對更為關鍵，因而使用U+V來表示色度，使用Y來表示明亮度。

隨著視訊編碼技術的發展，YCbCr模型作為視訊流採用的一種變形模型標準，其不再是通過u+v來表示色度，而是通過RGB輸入訊號的R與亮度的差異即Cr和通過RGB輸入訊號的B與亮度的差異即Cb進行維度構建，這相對於YUV或者YPrPb編碼而言便是數字色差訊號而不再是模擬色彩訊號了。

YUV和YCrCb色彩模型常用於計算機視覺的相關分析中，對於視訊及影像分析相關的同學可以更深入瞭解一下

HSV & HSL & HSB & HSI

對於人的視覺而言，其實通常最容易描述的就是基於色相(Hue)、飽和度(Saturation)以及最後這一個明度或者說亮度來區分，但是對於最後兩個指標而言，不同模型的構建其實是不太一樣的，這裡我們將重點介紹兩種模型，即：類HSL和類HSV模型

對於HSL模型而言，最後定義的指標是一個混入了黑白的量，其最後的形態在歐氏空間中，表現為一個全椎體，如上圖所示。

而對於HSV模型而言，最後定義的指標只是混入了一個黑色的量，其最後形態在歐氏空間中，表現為一個倒立的圓錐體，如上圖所示。

正是由於這種對於S和 * 的處理不同，導致出現了很多不同的名詞及表示模型，這裡我們用以下表格做一下常見的 HS* 模型的對比：

結論：HSV = HSB，HSL ≈ HSI

如上圖所示，後續我們不加特別說明的話，後續將以HSV和HSL這兩種作為HS*的兩種典型代表進行表述，作為RGB模型的變種，我們後續在色彩計算過程中對 HS* 和 RGB模型的換算進行詳解。

LAB

隨著發展，人們對色彩的研究不再侷限於裝置基礎條件的限定，由此，CIE(Commission Internationale de Photométrie)國際照明協會提出了Lab模型，其不同於RGB的模型，其中L代表亮度，而a則是從深綠色(低亮)到灰色(中亮)再到亮粉紅色(高亮)的過渡，b則是亮藍色(低亮)到灰色(中亮)再到黃色(高亮)的過渡，其合成模型如上圖所示。

XYZ

在上一個Lab模型中我們知道，CIE對色彩做了進一步的調研研究，其實Lab模型也是XYZ模型的一個衍生變種，其對RGB模型中的光源做了座標系方面的區分，其對三元色進行了相關的修正，其是裝置無關的，如上圖所示，在歐氏空間中，兩個座標系發生了偏移。（ps：具體的變化，可以參考這篇文章RGB色彩體系和XYZ色彩體系）

色彩空間

色彩空間又稱為色域，在上一部分我們介紹了不同的色彩模型，那麼對於實際生產過程中會遇到各種不同的實際情況，因而各個廠家或者組織基於各自的裝置或者場景的不同而實際形成的色彩對映關係，從而提出了各自的色彩範圍，這裡我們結合wiki百科及百度百科，不嚴謹的給出如下定義：

色彩空間是基於色彩模型而對實際特定場景的色彩範圍的對映關係。

對於常見的色彩空間，我們列舉了以下幾種：

色彩體系

在講了關於色彩的一些基礎理論和描述之後，我們來看一下設計領域對於色彩的相關運用和實踐，這些對我們前端和設計同學協作也會有比較好的前置鋪墊。

如果按照設計體系的標準制定，通常需要包含 願景與原則（Vision & Principle）、 指南（Guidelines）、 庫與工具（Libraries & Tools） 這三層，其中：

第一層：願景與原則（Vision & Principle），是設計體系的核心價值觀及總體綱領，指引整體設計體系的風格和調性。

第二層：指南（Guidelines），包含樣式指南（Style Guideline）、模式指南(Patterns Guideline)、內容指南（Content Guideline）等更多通過文字和影像進行傳達的內容，也是大部分設計中對色彩(Color)、版式(Layout)、。

第三層：庫與工具（Libraries & Tools），包含元件庫（Components Libraries）、工具包（Toolkits）、協同工具（Collaborative Tools）等可以直接進行使用的內容，一般會輸出可開發使用的元件庫、以sketch或者psd的設計資源以及產品使用的figma、axure等物料。（ps：大型設計團隊也會協同前端製作對應的元件庫，比如常見的antd、element元件庫等都是對應的設計團隊的前端資源，一般來說大型的團隊可能會將設計和前端劃入使用者體驗團隊，當然這也需要看整體的組織架構）

之前做設計的時候，做過相關的設計體系，有興趣的同學，可以看下這篇對應的設計體系實踐——2018總結-多條業務線並行的UI基礎框架規範（附案例）

在剛才介紹了設計體系之後，我們看到對於第二層的guidelines中，對於樣式部分的規約，其中很重要的一個部分就是色彩，其實色彩是設計師展現視覺過程中最為重要的工具，在包豪斯體系中，作為三大構成之一的色彩構成是十分重要設計理論，而如果將色彩構建成符合商業化的體系，通常來說需要包含兩大部分，即：通用色彩系統和商業色彩系統。

對於色彩系統的分類，這裡我將以螞蟻金服的ant design色彩體系作為樣板來進行描述。

通用色彩系統，也就是antd中所說的系統級色彩體系，其是不包含任何關於商業及產品的特定色彩要求，只是設計師選出了幾種特定的色彩，配合不同的視覺感受來表達不同的傳達需求。

而商業色彩體系，也就是antd中所說的產品級色彩體系，通常需要配合品牌調性、產品功能等來從上述通用色彩系統中進行著重的篩選和設定，從而更好的服務商業化，用王受之先生的話講就是：“設計是對外的，而藝術是對內的”。

現階段的設計和工程結合的也越來越緊密，可以通過Design Token等手段將設計體系和工程體系進行相關的對接，從而化解設計和前端鏈路過程中的溝通成本問題，提升工程效能。關於設計方面的鏈路方面的提升，可以看看螞蟻金服去年SEE Conf關於設計工程化的幾場介紹--提效神器 Design Tokens 的探索與應用 - 昱星 & 元堯、設計工程化三部曲 - 倏昱 & 聞冰

這裡我列舉了幾個比較有名的設計團隊所做的色彩體系風格，大家可以參考一下：

設計團隊	色彩體系	備註
Ant Design		Ant Design色彩體系
Element Design		Element Design色彩體系
Material Design		Material Design色彩體系
Human Interface Guidelines		Apple色彩體系
Fluent Design		微軟色彩體系

色彩計算

在理性的瞭解了色彩理論、色彩模型、色彩空間以及感性的體會了色彩體系之後，最後一部分我們來看一下之前所建立的理性與感性是如何通過計算進行融合的，這一部分我將著重介紹和我們前端相關的色彩模型換算(RGB與HSV/HSL)，以及簡單介紹下在換算過程中可能涉及到的數學計算方法(貝塞爾曲線)，最後我們將通過ant design的色板實現來看一下色彩的具體應用。

RGB/HSL/HSV換算

在有了前邊關於色彩模型的認識後，我們來看一下色彩模型之間是如何進行換算的，由於前端應用過程中主要涉及RGB向HS*的換算，因而這裡我們僅僅介紹RGB模型是如何向HSL及HSV進行座標體系換算的。

從視訊中我們可以看出，RGB -> HSV 的過程為：

RGB傾斜 => 拉成六稜錐 => 轉成六稜柱 => 轉為圓柱

而 RGB -> HSL 的過程則為：

RGB傾斜 => 拉成雙六稜錐 => 轉成六稜柱 => 轉為圓柱

從這個過程，我們經過一系列複雜的數學換算，可以得到如下轉換公式：

注意：R、G、B都是換算到0-1區間的值，也就是這裡的R/G/B是原本 0-255 區間的值除以255得到相應的值

Hue的換算

H的計算三者是一樣的，即：

Lightness/Value/Intensity的換算

從上邊的換算過程可知，L、V、I的對應方程為：

Saturation的換算

對於飽和度的換算，由於L、V、I的不同，導致換算過程中的S也發生了變化：

貝塞爾曲線

貝塞爾曲線作為數值計算中的重要方法，其對動態擬合不同運動軌跡有十分重要的作用，作為插值計算來處理伯恩斯坦多項式的重要方法，其對於科學計算十分重要。

在對色彩計算過程中，使用貝塞爾曲線來處理兩個資料值也是一項十分重要的手段，可以更加接近對於色彩體系的構建和對真實色彩世界的擬合。

Ant Design 色板

在介紹了所有的色彩相關的模型、計算等等之後，我們來看一下前端中關於色彩計算的一些應用，這裡我們以螞蟻金服的 Ant Design 色板的生成演算法作為案例進行一些簡單的分析，來看一下色彩計算在元件庫中的具體落地，對於更為詳細的介紹，大家可以看一下偏右大佬所寫的這篇《Ant Design 色板生成演算法演進之路》，這裡我僅僅做一下個人的理解與分析簡述。

antd色板 1.x演算法

// 變亮
@function tint($color, $percentage) {
    @return mix(white, $color, $percentage);
}
// 變暗
@function shade($color, $percentage) {
    @return mix(black, $color, $percentage);
}
// 使用
.useage {
    background-color: tint(#2db7f5, 80%);
}

第一版的方法很簡單，我們看到直接使用了黑白的混合去處理，這裡的mix是sass中的顏色混合方法，這裡使用的是簡單的RGB模型進行換算，具體換算方法我找到了dart-sass的中的方法：

/// Returns [color1] and [color2], mixed together and weighted by [weight].
SassColor _mixColors(SassColor color1, SassColor color2, SassNumber weight) {
  // This algorithm factors in both the user-provided weight (w) and the
  // difference between the alpha values of the two colors (a) to decide how
  // to perform the weighted average of the two RGB values.
  //
  // It works by first normalizing both parameters to be within [-1, 1], where
  // 1 indicates "only use color1", -1 indicates "only use color2", and all
  // values in between indicated a proportionately weighted average.
  //
  // Once we have the normalized variables w and a, we apply the formula
  // (w + a)/(1 + w*a) to get the combined weight (in [-1, 1]) of color1. This
  // formula has two especially nice properties:
  //
  //   * When either w or a are -1 or 1, the combined weight is also that
  //     number (cases where w * a == -1 are undefined, and handled as a
  //     special case).
  //
  //   * When a is 0, the combined weight is w, and vice versa.
  //
  // Finally, the weight of color1 is renormalized to be within [0, 1] and the
  // weight of color2 is given by 1 minus the weight of color1.
  var weightScale = weight.valueInRange(0, 100, "weight") / 100;
  var normalizedWeight = weightScale * 2 - 1;
  var alphaDistance = color1.alpha - color2.alpha;

  var combinedWeight1 = normalizedWeight * alphaDistance == -1
      ? normalizedWeight
      : (normalizedWeight + alphaDistance) /
          (1 + normalizedWeight * alphaDistance);
  var weight1 = (combinedWeight1 + 1) / 2;
  var weight2 = 1 - weight1;

  return SassColor.rgb(
      fuzzyRound(color1.red * weight1 + color2.red * weight2),
      fuzzyRound(color1.green * weight1 + color2.green * weight2),
      fuzzyRound(color1.blue * weight1 + color2.blue * weight2),
      color1.alpha * weightScale + color2.alpha * (1 - weightScale));
}

可以看到這裡使用的是RGB模型的線性計算，由於RGB模型線性換算過程中對間隔的變化十分巨大，對於人眼的視覺效果十分不友好

antd色板 2.x演算法

@import "bezierEasing";
@import "tinyColor";

// We create a very complex algorithm which take the place of original tint/shade color system
// to make sure no one can understand it ?
// and create an entire color palette magicly by inputing just a single primary color.
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
.colorPaletteMixin() {
@functions: ~`(function() {
  var warmDark = 0.5;     // warm color darken radio
  var warmRotate = -26;  // warm color rotate degree
  var coldDark = 0.55;     // cold color darken radio
  var coldRotate = 10;   // cold color rotate degree
  var getShadeColor = function(c) {
    var shadeColor = tinycolor(c);
    // warm and cold color will darken in different radio, and rotate in different degree
    // warmer color
    if (shadeColor.toRgb().r > shadeColor.toRgb().b) {
      return shadeColor.darken(shadeColor.toHsl().l * warmDark * 100).spin(warmRotate).toHexString();
    }
    // colder color
    return shadeColor.darken(shadeColor.toHsl().l * coldDark * 100).spin(coldRotate).toHexString();
  }
  var primaryEasing = colorEasing(0.6);
  this.colorPalette = function(color, index) {
    var currentEasing = colorEasing(index * 0.1);
    // return light colors after tint
    if (index <= 6) {
      return tinycolor.mix(
        '#ffffff',
        color,
        currentEasing * 100 / primaryEasing
      ).toHexString();
    }
    return tinycolor.mix(
      getShadeColor(color),
      color,
      (1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100
    ).toHexString();
  };
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.colorPaletteMixin();

在第二版的演算法中，使用的HSL模型進行的整體色板粒度變化，然後換算到RGB模型中。

其中在基於HSL模型分割粒度的時候，這裡作者使用了自己定義的一個轉化方法，對於灰度的判斷，使用的是r與b的比較，而這裡的旋轉角度及darken比例個人以為應該是作者根據實際生產資料獲得的經驗值，這裡我並沒有從相關資料中獲取到對應的推到依據。

這裡的RGB的混合也不再使用sass中的方法，而是基於tinyColor中的混合方法，mix方法如下：

tinycolor.mix = function(color1, color2, amount) {
    amount = (amount === 0) ? 0 : (amount || 50);

    var rgb1 = tinycolor(color1).toRgb();
    var rgb2 = tinycolor(color2).toRgb();

    var p = amount / 100;

    var rgba = {
        r: ((rgb2.r - rgb1.r) * p) + rgb1.r,
        g: ((rgb2.g - rgb1.g) * p) + rgb1.g,
        b: ((rgb2.b - rgb1.b) * p) + rgb1.b,
        a: ((rgb2.a - rgb1.a) * p) + rgb1.a
    };

    return tinycolor(rgba);
};

mix過程中的比例也不再是線性，而是使用的一個固定的貝塞爾曲線進行繪製的曲線，從上圖中大體看出其基本符合線性的擬合。

antd色板 3.x演算法

前置演算法，判斷亮度，使用了轉灰度的演算法公式(ps：601校正公式，由NTSC亮度方程推導而來)，即：

Y = 0.299 R + 0.587 G + 0.114 * B

在tinycolor的庫中，實現方式如下：

function getBrightness() {
    //http://www.w3.org/TR/AERT#color-contrast
    var rgb = this.toRgb();
    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
},

在下邊的 isLight 獲取就是從上述的 getBrightness 轉化而來

/* stylelint-disable no-duplicate-selectors */
@import "bezierEasing";
@import "tinyColor";

// We create a very complex algorithm which take the place of original tint/shade color system
// to make sure no one can understand it ?
// and create an entire color palette magicly by inputing just a single primary color.
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
.colorPaletteMixin() {
@functions: ~`(function() {
  var hueStep = 2;
  var saturationStep = 0.16;
  var saturationStep2 = 0.05;
  var brightnessStep1 = 0.05;
  var brightnessStep2 = 0.15;
  var lightColorCount = 5;
  var darkColorCount = 4;

  var getHue = function(hsv, i, isLight) {
    var hue;
    if (hsv.h >= 60 && hsv.h <= 240) {
      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
    } else {
      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
    }
    if (hue < 0) {
      hue += 360;
    } else if (hue >= 360) {
      hue -= 360;
    }
    return Math.round(hue);
  };
  var getSaturation = function(hsv, i, isLight) {
    var saturation;
    if (isLight) {
      saturation = hsv.s - saturationStep * i;
    } else if (i === darkColorCount) {
      saturation = hsv.s + saturationStep;
    } else {
      saturation = hsv.s + saturationStep2 * i;
    }
    if (saturation > 1) {
      saturation = 1;
    }
    if (isLight && i === lightColorCount && saturation > 0.1) {
      saturation = 0.1;
    }
    if (saturation < 0.06) {
      saturation = 0.06;
    }
    return Number(saturation.toFixed(2));
  };
  var getValue = function(hsv, i, isLight) {
    var value;
    if (isLight) {
      value = hsv.v + brightnessStep1 * i;
    }else{
      value = hsv.v - brightnessStep2 * i
    }
    if (value > 1) {
      value = 1;
    }
    return Number(value.toFixed(2))
  };

  this.colorPalette = function(color, index) {
    var isLight = index <= 6;
    var hsv = tinycolor(color).toHsv();
    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
    return tinycolor({
      h: getHue(hsv, i, isLight),
      s: getSaturation(hsv, i, isLight),
      v: getValue(hsv, i, isLight),
    }).toHexString();
  };
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.colorPaletteMixin();

對於目前的antd 色板生成演算法，這裡是基於HSV模型進行的相關融合，其中：

1. 對於色相，在60到240度的色相進行了色相的粒度分割；
2. 對於飽和度，加深和減淡部分做了不同的粒度處理，其中減淡更快；
3. 對於明度，明度減弱也比加和粒度要更大；

不同於2.x使用的貝塞爾曲線去擬合曲線，這裡又改回線性組合來進行符合色彩體系的可控調整，從而使得整體的方案特別清晰明瞭，但又不同於1.x中的暴力組合，這裡的灰度推算是基於亮度方程來作為科學依據的換算，算是融合了1.x和2.x各自的特點

總結

在前端開發過程中，我們在幫助設計師對於色彩體系的構建時，除了對於日常常見的一些感知層面的理解外，我們更應該注重對於深層原理的探索與探究，追問科學深層的認知，對於我們探索前端領域的深層有著至關重要的作用，比如在色彩中的計算機視覺方面的探索，讓我們對於工程與設計鏈路的擴充套件提供了更高層次和維度的認識，希望各位同學在後續研發過程中，都能通過探索底層追問，獲取到對於自己工作邊界的認知探索。

色彩的研究絕不僅僅涉及到色彩理論、色彩模型、色彩空間、色彩計算等，其實色彩是一門十分有意思且可以很深入的學科，對於我們前端來講則更為重要，作為連線設計與資料的紐帶，也作為關聯使用者與企業的先鋒，我們對前端理論學習的同時也要對相關科學理論知識作補充，做到能夠對知識的靈活運用，幫助企業和使用者提升更好的體驗，這也是我們作為前端工程師的更高價值所在，共勉！！！

參考

• 影像特效及濾鏡演算法彙總
• Ant Design 色板生成演算法演進之路
• HSL and HSV
• 貝塞爾曲線掃盲
• Color code converter
• 前端也要懂的一些色彩知識
• 前端需要了解的顏色模型，RGB、HSL和HSV
• 如何快速實現一個顏色選擇器
• RGB和HSB色彩模型和演算法
• 系統級和產品級色彩體系
• antd中的調色版計算方法
• COLOR SYSTEMS
• 色彩模型與色彩空間
• 【攝影教程】色彩基礎（三）：攝影常用的色彩空間
• 什麼是YUV
• YUV簡介
• 加色法與減色法
• 設計體系：數字產品設計的系統化方法
• 設計體系（一）丨設計體系的湧現：適應組織的需要
• 設計體系（二）丨什麼才是設計體系？結構、原則與認知誤區
• 設計體系（三）丨設計體系有什麼用？價值與缺陷
• 設計體系（四）丨如何建立設計體系？
• Naming Tokens in Design Systems
• Design Token 應用指南——設計篇
• Tint and Shade Functions
• Bézier基函式的匯出
• 拒絕被忽悠 手機螢幕材質/技術淺解析