色板

Skeletonic Stylus v2.0.0 隨附三套可選色板，每套均以獨立的壓縮樣式表形式發佈，讓您只需為所用的部分付出代價。

Data table table
色板	檔案	大小（min）
Material	`dist/css/palettes/material/skeletonic-material.min.css`	約 8 KB
Tachyons	`dist/css/palettes/tachyons/skeletonic-tachyons.min.css`	7.3 KB
Web 安全	`dist/css/palettes/websafe/skeletonic-websafe.min.css`	約 4 KB

本頁正在載入 Tachyons 色板，因此下方的色彩工具類別可以正確渲染。

Skeletonic 核心灰階

核心樣式表隨附一組符合無障礙標準的 11 級灰階，以 --cl-grey-100 … --cl-grey-1000 公開。

100

300

500

700

200

400

600

900

品牌色彩（v2.0.0 — AA 對比度）

在 v2.0.0 中，主色與次色 token 加深處理，以在白色文字背景下開箱即達 WCAG 4.5:1 對比度。

--cl-primary
hsl(210 100% 42%)

--cl-secondary
hsl(195 100% 33%)

--cl-tertiary
#757c8a

注意。 --cl-tertiary (#757c8a) 相對於白色的對比度為 4.71:1 ——符合 AA 標準的大號文字（粗體不小於 18 px / 常規不小於 24 px），但不��用於內文。請搭配深色背景使用，或僅將其用於非必要的裝飾性元素。

Tachyons 色板工具類別

當您載入 skeletonic-tachyons.min.css 後，即可獲得一整套單一用途的色彩類別——同一發行產物，選擇性啟用模組。

<span class="bg-blue white pa2">.bg-blue .white</span>
<span class="bg-light-green dark-green pa2">.bg-light-green .dark-green</span>
<span class="bg-washed-yellow dark-gray pa2">.bg-washed-yellow .dark-gray</span>

完整的 Tachyons 色板規範請參閱 tachyons.io/docs/themes/skins；此處隨附的是 Skeletonic 編譯的版本。

返回組件 →