出発点
5 部門に色を割り振る、という単純な作業に意外と時間がかかる。色相環で 5 等分するのは正解じゃない。色には 意味の温度 があって、それを部門の性格に合わせる必要がある。
私の場合、決めたのは次の 5 色:
| 部門 | 色名 | hex (light / dark) |
|---|---|---|
| Engineering | Electric Blue | #2D5BFF / #5C82FF |
| Design | Amber Sun | #FFB020 / #FFC54D |
| AI | Jade | #00A86B / #33C28C |
| Process | Bronze | #A66B3A / #C99063 |
| Essay | Red Signal | #E63946 / #FF6B73 |
「印刷インク」っぽさを目指した。チャラチャラした SaaS 系の grad ではなく、雑誌の表紙にあるような重みのある色。
なぜ Engineering を青にしたか
技術系の媒体で青を採用するのは半ば業界の慣例。Hacker News のオレンジ、Stripe の紫、Vercel の黒、Linear の紺紫... 多くは寒色系か無彩色だ。読者の認知コストを下げる意味で 青 に乗っかった。
ただし純粋な #007AFF（iOS 風）ではなく、#2D5BFF のような わずかに紫を含んだ青にした。これだと「Twitter の青」とも「Linear の紺」とも違う、ちょっとだけ独自性が出る。
Design に黄を当てた理由
Design 部門の記事は「色温度」を扱う。寒色を当てると本文が冷えすぎる気がした。逆に純赤は感情的すぎる。間を取って 琥珀色（amber）。本だと表紙金箔の系統。
#FFB020 は黄色系の中では飽和度が高めで、視覚的に止まる。これは記事ヒーローの dot で使うと「目を惹くアクセント」として機能する。
AI を緑にした判断
AI 系の媒体で緑は珍しい（GitHub Copilot が紫、ChatGPT が薄緑、Claude がオレンジ）。あえて Jade（翡翠） にしたのは「機械的でない自然色」を持ち込みたかったから。
AI = 機械 + 言語 = 結局のところ植物的
これは私の中での比喩で、根拠は無いが、決め手にはなった。
Process と Essay の対比
Process（過程）は Bronze（青銅） にした。「使い込まれた工具の色」「年月が乗った金属」のイメージ。記事内容も日々の運用記録なので、temporal な色合いが合う。
Essay（随筆）は Red Signal（赤信号）。これは唯一「感情の色」を直球で当てた部門。エッセイは個人的・主観的・感情的でいい、という宣言として赤にした。
ダーク派生の作り方
ダークモードでは「同じ色相、明度を上げる」が基本。
Light Dark
#2D5BFF → #5C82FF (engineering)
#FFB020 → #FFC54D (design)
#00A86B → #33C28C (ai)
#A66B3A → #C99063 (process)
#E63946 → #FF6B73 (essay)
明度だけ上げて、彩度はあまり触らない。彩度を上げると蛍光感が出てしまう。
OKLCH で組み直したい欲
正直に書いておくと、5 色は HSL ベースで決めたが、後で OKLCH で「知覚的に等距離」になるよう微調整したい欲がある。OKLCH は知覚均等色空間で、oklch(0.6 0.18 250) のような書き方で「明度 60%・彩度 0.18・色相 250°」を直接指定できる。
ただし、Tailwind v4 はまだ HSL 中心の運用が多く、無理に OKLCH に移行するメリットは薄い。今はこのままで十分。
まとめ
カテゴリ色は「色相を 5 等分」ではなく「部門の性格 × 色の温度」で決める。1 色だけ感情に寄せると全体に動きが出る。
色を決めるのは、どの読者に向けて書くかを決めるのとほぼ同じだ。