Lism Tips

色のトークン

Lism CSS の色のトークン（意味で名前を付けたセマンティックカラーと、赤や青などのパレットカラー）の一覧と、u--cbox での使い方、色の変え方を説明します。

Lism の色のトークンは2種類あります。役目で名前を付けたセマンティックカラー（--text・--brand など）と、色の名前で呼ぶパレットカラー（--red・--blue など）です。どちらも CSS 変数（-- で始まる、値を入れておく入れ物）として :root に入っています。

セマンティックカラー#

セマンティック（semantic）は「意味の」という意味です。「文字の色」「区切り線の色」のように、何に使う色かで名前が付いています。サイトの色を変えたいときは、これらの値をサイトに合わせて書きかえて使います。

トークン 変数 何に使う？ 最初の値
base --base ページの背景 #fcfcfc
base-2 --base-2 背景と少し違う、2番目の背景 #f2f2f3
text --text 文字 #141414
text-2 --text-2 少しうすい文字 #4e5155
divider --divider 区切り線・枠線 #dfe0e2
link --link リンク oklch(50% 0.3 240)
brand --brand サイトの顔になる色 #0f78f0
accent --accent 目立たせたいところの色 #d94a69
neutral --neutral どの色にもかたよらない補助の色 #bebfc1

「何に使う？」は名前からの言い換えです。最初の値は lism-css 1.0.1 の main.css に書かれている値です。--neutral は、背景や、マウスを乗せたときの色を作るときなどに使う、中立の補助の色とされています。

表示例

base
base-2
text
text-2
divider
link
brand
accent
neutral
html
<div class="l--grid -gtc -g:10" style="--gtc: repeat(3, 1fr)">
  <div class="l--stack -g:5"><div class="-bgc:base -bd -p:30 -bdrs:10"></div><span class="-fz:s">base</span></div>
  <div class="l--stack -g:5"><div class="-bgc:base-2 -p:30 -bdrs:10"></div><span class="-fz:s">base-2</span></div>
  <div class="l--stack -g:5"><div class="-bgc:text -p:30 -bdrs:10"></div><span class="-fz:s">text</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--text-2)"></div><span class="-fz:s">text-2</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--divider)"></div><span class="-fz:s">divider</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--link)"></div><span class="-fz:s">link</span></div>
  <div class="l--stack -g:5"><div class="-bgc:brand -p:30 -bdrs:10"></div><span class="-fz:s">brand</span></div>
  <div class="l--stack -g:5"><div class="-bgc:accent -p:30 -bdrs:10"></div><span class="-fz:s">accent</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--neutral)"></div><span class="-fz:s">neutral</span></div>
</div>

色は文字の無い箱で見せ、名前は箱の下に書いています。-bgc:base のようにクラスがある色は、クラスで塗れます。クラスが無い色は、-bgc のクラスを付けて、style="--bgc: var(--divider)" のように変数で色を渡します。-bgc は background-color（背景の色）の略です。

補足

main.css に入っている色のクラスは、よく使う一部の色と keycolor だけです。全部の色のクラスが入った版は CSS ファイルの種類 の full.css です。使えるクラスの一覧は 文字の色と背景 にあります。

パレットカラー#

赤・青・緑のように、色の名前で呼ぶトークンです。

トークン 変数
red --red
orange --orange
yellow --yellow
green --green
blue --blue
purple --purple
pink --pink
gray --gray
black --black
white --white

表示例

red
orange
yellow
green
blue
purple
pink
gray
black
white
html
<div class="l--grid -gtc -g:10" style="--gtc: repeat(3, 1fr)">
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--red)"></div><span class="-fz:s">red</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--orange)"></div><span class="-fz:s">orange</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--yellow)"></div><span class="-fz:s">yellow</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--green)"></div><span class="-fz:s">green</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--blue)"></div><span class="-fz:s">blue</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--purple)"></div><span class="-fz:s">purple</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--pink)"></div><span class="-fz:s">pink</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--gray)"></div><span class="-fz:s">gray</span></div>
  <div class="l--stack -g:5"><div class="-bgc -p:30 -bdrs:10" style="--bgc: var(--black)"></div><span class="-fz:s">black</span></div>
  <div class="l--stack -g:5"><div class="-bgc -bd -p:30 -bdrs:10" style="--bgc: var(--white)"></div><span class="-fz:s">white</span></div>
</div>

OKLCH と、--L・--C#

パレットカラーは OKLCH という書き方で作られています。OKLCH は、明るさ（L）・あざやかさ（C）・色あい（H）の3つの数で色を表すやり方です。

Lism では、すべてのパレットカラーが、明るさのもとになる --L と、あざやかさのもとになる --C を使っています。この2つを変えると、パレットカラー全体の色みを一度に調整できます。ただし --black と --white は決まった値なので、変わりません。

css
/* lism-css 1.0.1 の main.css での最初の値 */
:root {
  --L: 60%;
  --C: 0.2;
  --red: oklch(var(--L) var(--C) 20);
}

パレットカラーを使う（u--cbox）#

u--cbox は、--keycolor に入れた1つの色から、文字の色（--c）・背景の色（--bgc）・枠線の色（--bdc）をまとめて作るクラスです。color-mix()（2つの色を、決めた割合で混ぜる CSS の関数）で作っています。

  • 文字の色と背景の色は、そのまま付きます
  • 枠線の色は、枠線を出す -bd を一緒に付けたときに使われます

表示例

red の u--cbox
purple と枠線・角丸・影
brand と左の太い線
html
<div class="l--stack -g:20">
  <div class="u--cbox -p:20" style="--keycolor: var(--red)">red の u--cbox</div>
  <div class="set--bxsh u--cbox -bd -bdrs:20 -bxsh:20 -p:20" style="--keycolor: var(--purple)">purple と枠線・角丸・影</div>
  <div class="u--cbox -bdc:keycolor -bd-s -p:20" style="--keycolor: var(--brand); --bdw: 4px">brand と左の太い線</div>
</div>

React・Astro では次のように書きます。

jsx
<Lism util="cbox" keycolor="red" p="20">...</Lism>
<Lism util="cbox" keycolor="purple" bd bdrs="20" bxsh="20" set="bxsh" p="20">...</Lism>
<Lism util="cbox" keycolor="brand" bdc="keycolor" bd-s bdw="4px" p="20">...</Lism>

u--cbox のくわしい使い方と変え方は Utility Class（u--*） にあります。

透かす・混ぜる（Lism Props）#

React・Astro のコンポーネントでは、色の Props に : で区切った値を書くと、color-mix() で色を作ってくれます。

書き方 何が起きる？
bgc="black:50%" 黒を 50% 透かした背景
c="text:blue:5%" text の色に blue を 5% 混ぜた文字の色
jsx
<Lism bgc="black:50%" c="text:blue:5%">...</Lism>

くわしくは Lism Props（コンポーネントの指定）。

色を変える例#

ダークモードに合わせる#

パレットカラーは OKLCH で作られているので、--L（明るさ）と --C（あざやかさ）の2つを変えるだけで、全体の色みを切りかえられます。

css
:root[data-theme='dark'] {
  --L: 72%;
  --C: 0.22;
}

サイトの色に合わせる#

セマンティックカラーを上書きすると、サイトの顔になる色などを変えられます。

css
:root {
  --brand: #1e5f8c;
  --accent: #d94a6a;
  --link: oklch(50% 0.3 240);
}

自分の CSS をどこに書くかは カスタマイズの選び方 で説明しています。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧