@mmj-map/palette 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 meta-taro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,120 @@
-# Temporary Holding Version
+# @mmj-map/palette
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**導入者が自分の配色を完全に作るための道具**。指し値（4〜5 色）から、
+24 役割の配色、またはそのまま配れるスタイル JSON を作ります。
+
+> **ここが吐いたものを `styles/` へ置かないこと。**
+> MMJ が配る 6 枚は手書きの作品のままです（D-002）。
+> この道具は**導入者のためのもの**として切り出してあります（D-021）。
+> 出力には `mmj:generated: true` が入り、手書きと見分けが付きます。
+
+## 使う
+
+```bash
+# 24 役割の配色（<mmj-map palette-url> にそのまま渡せる）
+pnpm palette -- --land=#f7f9fb --water=#bfd7e8 --ink=#16202b --accent=#0a5fff
+
+# そのまま配れるスタイル
+pnpm palette -- --land=#f7f9fb --water=#bfd7e8 --ink=#16202b --accent=#0a5fff \
+  --style --base=modern-light --name="Acme Maps" --out=acme.json
+
+# 出したあとに確かめる
+pnpm style:check -- acme.json
+```
+
+| 引数 | 意味 |
+| --- | --- |
+| `--land` | 陸・背景の色（**必須**） |
+| `--water` | 水域の色（**必須**）。陸の系列から独立させる |
+| `--ink` | 文字の色（**必須**）。ラベルの一番濃い側 |
+| `--accent` | テーマカラー（**必須**）。高速道路と駅の縁に乗る |
+| `--green` | 公園・森。省くと陸から導く |
+| `--set=役割=色` | 役割を手で上書きする。**最後に勝つ**。何度でも書ける |
+| `--style` | 配色ではなくスタイルごと作る |
+| `--base` | 土台のスタイル名。既定 `modern-light`（`--style` のとき） |
+| `--name` | 作るスタイルの名前。既定 `Custom` |
+| `--out` | 書き出し先。**無ければ標準出力** |
+
+## 何が導かれるか
+
+**指し値はそのまま出ます**（作り変えません）。
+
+| 役割 | どうなるか |
+| --- | --- |
+| `background` `earth` `station-fill` `halo` | `--land` そのもの |
+| `water` | `--water` そのもの |
+| `label-city` | `--ink` そのもの |
+| `highway` `station` | `--accent` そのもの |
+| `landcover` `built` `paved` `buildings` `path` `road-*` `rail` `boundary` `label-station` `label-neighbourhood` | 地色から文字色へ向かって濃くなる。**細いものほど地色に近い** |
+| `waterway` `label-water` | 水から文字色へ向かって濃くなる |
+| `highway-casing` | accent を文字色側へ寄せた色 |
+| `green` | `--green`、無ければ陸から導く |
+
+混ぜるのは **Oklab**（sRGB のまま混ぜると階調が詰まり、色がくすむ）。**依存は足していません**（式だけ）。
+
+### 好みで変わるところは式にしていない
+
+明るい土台で**道路を白抜き**にしたい（地色より明るくする）ことがありますが、
+ここでは地色から文字色へ向かって濃くしています。白抜きにしたいときは上書きしてください。
+
+```bash
+pnpm palette -- ... --set=road-minor=#ffffff --set=road-medium=#ffffff --set=road-major=#ffffff
+```
+
+## MCP の口
+
+エージェントから直接作れます。
+
+```bash
+pnpm palette:mcp
+```
+
+Claude Code への登録（`.mcp.json` / `claude mcp add`）:
+
+```json
+{
+  "mcpServers": {
+    "mmj-palette": {
+      "command": "pnpm",
+      "args": ["palette:mcp"],
+      "cwd": "<このリポジトリのパス>"
+    }
+  }
+}
+```
+
+| 道具 | 何をするか |
+| --- | --- |
+| `mmj_list_roles` | 24 役割と、それぞれが地図の何を変えるかを返す |
+| `mmj_list_bases` | 土台にできるスタイル名を返す |
+| `mmj_derive_palette` | 指し値から 24 役割の配色を作る |
+| `mmj_build_style` | 指し値からスタイル JSON を作る |
+
+**SDK は入れていません**。MCP の stdio は JSON-RPC 2.0 を改行区切りで流すだけで、
+ここで要るのは `initialize` / `tools/list` / `tools/call` の 3 つです。
+公式 SDK（`@modelcontextprotocol/sdk` 1.30.0・MIT）は express / hono / cors / jose /
+express-rate-limit まで引いてきて **99 パッケージ増えます**（実測・2026-09-21）。
+HTTP と SSE の輸送のためのもので、**stdio 1 本には釣り合いません**（baseline §1 / §12）。
+
+代わりに、**本物のプロセスを起動して本物の JSON-RPC を流すテスト**があります
+（`test/mcp.test.ts`）。仕様が動いたらそこが落ちます。
+
+## 使う側
+
+```html
+<!-- 配色だけ渡す -->
+<mmj-map tiles="..." style-url="/styles/modern-light.json" palette-url="./acme-palette.json"></mmj-map>
+
+<!-- スタイルごと持つ -->
+<mmj-map tiles="..." style-url="./acme.json"></mmj-map>
+```
+
+スタイルごと作った場合、`metadata["mmj:anchors"].accent` を部品が読むので、
+**`accent` 属性を書かなくても目印・まとまり・自前 POI の色が揃います**。
+
+## 出したものの扱い
+
+- **あなたのものです**。手で直して構いません（そのための形にしてあります）
+- `__TILES_URL__` は残ります。**焼き込むと配信先を変えられなくなる**ため
+- `© OpenStreetMap contributors` の帰属表示は残ります。**消して配らないでください**（ODbL）
+- `mmj:generated: true` が入ります。**外さないでください**（手書きの作品と混ざります）

package/dist/args.js

@@ -0,0 +1,62 @@
+import { ROLE_ORDER } from "./derive.js";
+const ANCHOR_KEYS = ["land", "water", "ink", "accent"];
+const KNOWN = new Set(["land", "water", "ink", "accent", "green", "base", "name", "out", "set"]);
+/** `--base` を付けなかったときの土台 */
+const DEFAULT_BASE = "modern-light";
+/** `--name` を付けなかったときの名前 */
+const DEFAULT_NAME = "Custom";
+/**
+ * @param argv `process.argv.slice(2)` 相当
+ */
+export function parseArgs(argv) {
+    const values = {};
+    const overrides = {};
+    let mode = "palette";
+    for (const arg of argv) {
+        // `pnpm palette -- --land=...` の `--` はそのまま渡ってくる。**読み飛ばす**
+        if (arg === "--")
+            continue;
+        if (arg === "--style") {
+            mode = "style";
+            continue;
+        }
+        const match = /^--([A-Za-z-]+)=(.*)$/.exec(arg);
+        if (!match)
+            throw new Error(`読めない引数です: ${arg}`);
+        const [, key = "", value = ""] = match;
+        if (!KNOWN.has(key)) {
+            throw new Error(`知らない引数です: --${key}（使えるのは ${[...KNOWN].map((k) => `--${k}`).join(" ")}）`);
+        }
+        if (key === "set") {
+            const at = value.indexOf("=");
+            if (at <= 0)
+                throw new Error(`--set は 役割=色 の形で書きます: --set=${value}`);
+            const role = value.slice(0, at);
+            if (!ROLE_ORDER.includes(role)) {
+                throw new Error(`知らない役割です: ${role}（使えるのは ${ROLE_ORDER.join(" ")}）`);
+            }
+            overrides[role] = value.slice(at + 1);
+            continue;
+        }
+        values[key] = value;
+    }
+    const missing = ANCHOR_KEYS.filter((key) => values[key] === undefined || values[key] === "");
+    if (missing.length > 0) {
+        // 足りない色を勝手に作らない（baseline §11）
+        throw new Error(`指し値が足りません: ${missing.map((k) => `--${k}`).join(" ")}`);
+    }
+    return {
+        anchors: {
+            land: values["land"],
+            water: values["water"],
+            ink: values["ink"],
+            accent: values["accent"],
+            ...(values["green"] === undefined ? {} : { green: values["green"] }),
+        },
+        overrides,
+        mode,
+        base: values["base"] ?? DEFAULT_BASE,
+        name: values["name"] ?? DEFAULT_NAME,
+        out: values["out"] ?? null,
+    };
+}

package/dist/cli.js

@@ -0,0 +1,69 @@
+/**
+ * 指し値から配色を作る。
+ *
+ *   pnpm palette -- --land=#f7f9fb --water=#bfd7e8 --ink=#16202b --accent=#0a5fff
+ *   pnpm palette -- ... --style --base=modern-dark --name="Acme Maps" --out=acme.json
+ *   pnpm palette -- ... --set=road-minor=#ffffff        役割を手で上書きする
+ *
+ * 既定は **24 役割の JSON**（`<mmj-map palette-url>` にそのまま渡せる）。
+ * `--style` を付けると**スタイルごと**作る（`<mmj-map style-url>` / 自分の配布物へ同梱）。
+ *
+ * **出したものは導入者のもの。**`styles/` へ置かないこと（D-002 / D-021）。
+ */
+import { readFileSync, writeFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseArgs } from "./args.js";
+import { deriveRoles } from "./derive.js";
+import { buildStyle } from "./style.js";
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../../..");
+/**
+ * `--out` の基準にする場所。
+ *
+ * **`process.cwd()` は使えない。** `pnpm --filter` 越しに起動されると
+ * パッケージのディレクトリになり、リポジトリのルートで打った相対パスが
+ * `tools/palette/` の中へ落ちる（実際に落ちた）。
+ * pnpm は打った場所を `INIT_CWD` で教えてくれる。
+ */
+const userDir = process.env["INIT_CWD"] ?? process.cwd();
+function main(argv) {
+    let parsed;
+    try {
+        parsed = parseArgs(argv);
+    }
+    catch (error) {
+        console.error(error instanceof Error ? error.message : String(error));
+        console.error("");
+        console.error("例: pnpm palette -- --land=#f7f9fb --water=#bfd7e8 --ink=#16202b --accent=#0a5fff");
+        return 1;
+    }
+    const roles = deriveRoles(parsed.anchors, parsed.overrides);
+    let output = roles;
+    if (parsed.mode === "style") {
+        // 名前を経路として扱わせない（§21）
+        if (!/^[A-Za-z0-9._-]+$/.test(parsed.base)) {
+            throw new Error(`土台の名前が不正です: ${parsed.base}`);
+        }
+        const base = JSON.parse(readFileSync(resolve(repoRoot, "styles", `${parsed.base}.json`), "utf8"));
+        output = buildStyle(base, roles, { name: parsed.name, anchors: parsed.anchors });
+    }
+    const text = `${JSON.stringify(output, null, 2)}\n`;
+    if (parsed.out === null) {
+        process.stdout.write(text);
+        return 0;
+    }
+    writeFileSync(resolve(userDir, parsed.out), text, "utf8");
+    // 何を書いたかを出す。**黙って終わると、書けたのかどうか分からない**
+    console.error(`書きました: ${parsed.out}（${parsed.mode === "style" ? "スタイル" : "配色 24 役割"}）`);
+    if (parsed.mode === "style")
+        console.error(`確かめる: pnpm style:check -- ${parsed.out}`);
+    return 0;
+}
+try {
+    process.exitCode = main(process.argv.slice(2));
+}
+catch (error) {
+    // 握り潰さない（§8）。色が読めない等はここに出る
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exitCode = 1;
+}

package/dist/derive.js

@@ -0,0 +1,125 @@
+/**
+ * 指し値（アンカー）から 26 の役割を作る。**ここは純粋関数。**
+ *
+ * **これは D-002 が採らなかった「配色をアルゴリズムで振る」そのものです。**
+ * 人が範囲を決めて認めました（D-021・2026-09-21）:
+ *
+ *   「独自で完全につくれるなら OK です」
+ *
+ * 認められた範囲は **導入者のための道具** であって、MMJ が配る `styles/*.json` の 6 枚は
+ * 手書きのまま（D-002 は生きている）。ここが吐いたものを `styles/` へ置かないこと。
+ *
+ * 出したものは**手で直される前提**なので、返すのは完成品ではなく
+ * 「役割 → 色」の表。どの行を直せば何が変わるかが分かる形にしてある。
+ */
+import { mix, parseHex, toHex } from "./oklab.js";
+/**
+ * 役割の並び。**`packages/elements/src/palette.js` の `ROLE_LAYERS` と一致していること。**
+ * 一致はテストが見ている（片方だけ増やすと落ちる）。
+ */
+export const ROLE_ORDER = [
+    "background",
+    "earth",
+    "landcover",
+    "green",
+    "built",
+    "paved",
+    "water",
+    "waterway",
+    "buildings",
+    "path",
+    "road-minor",
+    "road-medium",
+    "road-major",
+    "highway-casing",
+    "highway",
+    "rail",
+    "rail-hatch",
+    "boundary",
+    "station",
+    "station-fill",
+    "label-city",
+    "label-station",
+    "label-neighbourhood",
+    "label-water",
+    "label-poi",
+    "halo",
+];
+/**
+ * 地色から文字色へ向かう道のり。**細いものほど地色に近い。**
+ *
+ * 明暗どちらの土台でも同じ式で使える（`land → ink` へ混ぜるだけなので、
+ * 暗い土台では明るく、明るい土台では暗くなる）。**式を 2 つ持たない。**
+ *
+ * 白抜きの道（明るい土台で道路だけ `#fff`）にしたいときは、
+ * 出したあとに `road-*` を手で直す。**そこは好みなので式にしない。**
+ */
+const LAND_TO_INK = {
+    landcover: 0.05,
+    built: 0.07,
+    paved: 0.09,
+    buildings: 0.12,
+    path: 0.18,
+    "road-minor": 0.26,
+    "road-medium": 0.38,
+    "road-major": 0.5,
+    boundary: 0.42,
+    rail: 0.56,
+    "label-neighbourhood": 0.72,
+    // 目印の名前は、町名と同じ控えめな段に置く。**これ以上濃いと駅と地名を食う**
+    "label-poi": 0.72,
+    "label-station": 0.86,
+};
+/** 緑を渡されなかったときの行き先。**紙の地図の公園の色に寄せた中間値** */
+const GREEN_HINT = "#6f9e58";
+/**
+ * 指し値から 26 の役割を作る。
+ *
+ * @param anchors 人が決める 4〜5 色
+ * @param overrides 手で決めた色。**ここが最後に勝つ**
+ */
+export function deriveRoles(anchors, overrides = {}) {
+    // 読めない色はここで落とす。**黙って黒へ落とすと、間違いが黒い地図として出る**
+    const land = toHex(parseHex(anchors.land));
+    const water = toHex(parseHex(anchors.water));
+    const ink = toHex(parseHex(anchors.ink));
+    const accent = toHex(parseHex(anchors.accent));
+    const green = anchors.green === undefined ? mix(land, GREEN_HINT, 0.55) : toHex(parseHex(anchors.green));
+    const roles = {
+        background: land,
+        earth: land,
+        green,
+        water,
+        // 水路は水より一段濃い。同じ色だと、川筋が面に埋もれて見えなくなる
+        waterway: mix(water, ink, 0.28),
+        // 水の名前は水の系列から取る。陸のラベルと同じ色だと、何の名前か分からなくなる
+        "label-water": mix(water, ink, 0.62),
+        // **指し値そのもの**。作り変えない
+        highway: accent,
+        station: accent,
+        "station-fill": land,
+        "label-city": ink,
+        // 縁取りは地色。文字と同じ側にすると、ラベルが背景に溶ける
+        halo: land,
+        // 線路のハッチは**地色そのもの**。線路の上に地色の刻みを入れて「線路」に見せる。
+        // ここを地色から外すと、刻みが別の線に見えて道が 2 本あるように読める
+        "rail-hatch": land,
+        // 高速の縁取りは本体より濃い。**同じにすると太い線が塊になる**（Modern Ink で実際に潰れた）
+        "highway-casing": mix(accent, ink, 0.4),
+    };
+    for (const [role, t] of Object.entries(LAND_TO_INK)) {
+        roles[role] = mix(land, ink, t);
+    }
+    for (const [role, color] of Object.entries(overrides)) {
+        if (!ROLE_ORDER.includes(role)) {
+            // 綴り間違いを黙って捨てない。捨てると「指定したのに効かない」になる
+            throw new Error(`知らない役割です: ${role}（使えるのは ${ROLE_ORDER.join(" ")}）`);
+        }
+        roles[role] = toHex(parseHex(color));
+    }
+    // 並びを固定して返す。**差分が読める形にするため**
+    const ordered = {};
+    for (const role of ROLE_ORDER)
+        ordered[role] = roles[role];
+    return ordered;
+}

package/dist/mcp.js

@@ -0,0 +1,93 @@
+/**
+ * MCP の口（stdio）。
+ *
+ *   pnpm palette:mcp
+ *
+ * Claude Code などの設定に、この起動コマンドを登録して使う。
+ * 詳しい登録の仕方は `tools/palette/README.md`。
+ *
+ * **stdout には応答しか書かない。**ログを 1 行でも混ぜると、
+ * 相手は JSON として読もうとして接続が壊れる（原因が非常に分かりにくい）。
+ * 出したいものは stderr へ。
+ */
+import { readFileSync, readdirSync } from "node:fs";
+import { createInterface } from "node:readline";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { handle } from "./server.js";
+/**
+ * 土台のスタイルを探す。**配った包みの中が先、リポジトリの根が後。**
+ *
+ * - 配ったとき: `<package>/styles/`（`prepublishOnly` が正本から写す）
+ * - リポジトリで動かすとき: `<repo>/styles/`（**正本はこちら**・D-002）
+ *
+ * **両方を見る。**どちらか一方にすると、
+ * 「手元では動くのに `npx` で動かない」か、その逆が起きる。
+ */
+function findStyleDir() {
+    const here = dirname(fileURLToPath(import.meta.url));
+    // src/mcp.ts なら ../styles、dist/mcp.js でも ../styles（どちらも包みの直下）
+    const candidates = [resolve(here, "../styles"), resolve(here, "../../..", "styles")];
+    for (const dir of candidates) {
+        try {
+            if (readdirSync(dir).some((name) => name.endsWith(".json")))
+                return dir;
+        }
+        catch {
+            // 無い候補は次へ。**最後まで無ければ下で落とす**（黙って空で動かさない）
+        }
+    }
+    throw new Error(`土台のスタイルが見つかりません: ${candidates.join(" / ")}`);
+}
+const styleDir = findStyleDir();
+/**
+ * 名乗る版を package.json から読む。**ここで数字を決め打たない。**
+ * 決め打つと、版を上げた日に名乗りだけ古いまま残る（気づけない）。
+ */
+function readVersion() {
+    const here = dirname(fileURLToPath(import.meta.url));
+    for (const path of [resolve(here, "../package.json"), resolve(here, "../../package.json")]) {
+        try {
+            const value = JSON.parse(readFileSync(path, "utf8")).version;
+            if (typeof value === "string" && value !== "")
+                return value;
+        }
+        catch {
+            // 次の候補へ。**両方だめなら下で分かる値を返す**
+        }
+    }
+    return "0.0.0-unknown";
+}
+const deps = {
+    version: readVersion(),
+    listBases: () => readdirSync(styleDir)
+        .filter((name) => name.endsWith(".json"))
+        .map((name) => name.replace(/\.json$/, ""))
+        .sort(),
+    loadBase: (name) => {
+        // 名前を経路として扱わせない。**`../` を渡されて外を読ませない**（§21）
+        if (!/^[A-Za-z0-9._-]+$/.test(name))
+            throw new Error(`土台の名前が不正です: ${name}`);
+        return JSON.parse(readFileSync(resolve(styleDir, `${name}.json`), "utf8"));
+    },
+};
+const lines = createInterface({ input: process.stdin });
+lines.on("line", (line) => {
+    const trimmed = line.trim();
+    if (trimmed === "")
+        return;
+    let request;
+    try {
+        request = JSON.parse(trimmed);
+    }
+    catch {
+        // 読めない行に応答を返しようがない（id が分からない）。**握り潰さず stderr へ**
+        console.error("[mmj-palette] JSON として読めない行を無視しました");
+        return;
+    }
+    const response = handle(request, deps);
+    if (response !== null)
+        process.stdout.write(`${JSON.stringify(response)}\n`);
+});
+lines.on("close", () => process.exit(0));
+console.error(`[mmj-palette] MCP を stdio で待っています（土台: ${deps.listBases().join(" ")}）`);

package/dist/oklab.js

@@ -0,0 +1,95 @@
+/**
+ * 色を混ぜる。**ここは純粋関数。**
+ *
+ * **sRGB のまま混ぜない。**理由は 2 つ。
+ *
+ * 1. **階調の間隔が目の感じ方と合わない。**道の 6 段のような等間隔の階調を sRGB で作ると、
+ *    明るい側が詰まって 2 段ぶんが同じに見える
+ * 2. **混ぜるとくすむ。**赤と緑を sRGB で平均すると `#808000` の濁った黄土色になる
+ *
+ * Oklab（Björn Ottosson・2020）は、目の感じ方に近い間隔で並ぶ色空間で、
+ * 明度の階調と色みの保持がどちらも素直に出る。**依存は足していない**（式だけ）。
+ * 出典: https://bottosson.github.io/posts/oklab/
+ */
+const HEX = /^#?(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+/**
+ * `#rrggbb` / `#rgb` を読む。**読めなければ投げる。**
+ * 黒へ落とすと、綴り間違いが「黒い地図」として出てしまい、原因を探せない。
+ * @param value
+ */
+export function parseHex(value) {
+    if (typeof value !== "string" || !HEX.test(value.trim())) {
+        throw new Error(`色として読めません: ${JSON.stringify(value)}（#rrggbb か #rgb）`);
+    }
+    const body = value.trim().replace(/^#/, "");
+    const full = body.length === 3
+        ? body
+            .split("")
+            .map((c) => c + c)
+            .join("")
+        : body;
+    const n = Number.parseInt(full, 16);
+    return { r: ((n >> 16) & 255) / 255, g: ((n >> 8) & 255) / 255, b: (n & 255) / 255 };
+}
+/** 0〜1 の外は端で止める。**回り込ませない**（255 を越えて 0 に戻ると別の色になる） */
+function clamp(value) {
+    return value < 0 ? 0 : value > 1 ? 1 : value;
+}
+/** `#rrggbb` に戻す。小文字で揃える（差分の見た目を安定させるため） */
+export function toHex(rgb) {
+    const part = (value) => Math.round(clamp(value) * 255)
+        .toString(16)
+        .padStart(2, "0");
+    return `#${part(rgb.r)}${part(rgb.g)}${part(rgb.b)}`;
+}
+/** sRGB のガンマを外して線形にする */
+function toLinear(c) {
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+/** 線形からガンマを戻す */
+function fromLinear(c) {
+    return c <= 0.0031308 ? c * 12.92 : 1.055 * c ** (1 / 2.4) - 0.055;
+}
+function toLab(rgb) {
+    const r = toLinear(rgb.r);
+    const g = toLinear(rgb.g);
+    const b = toLinear(rgb.b);
+    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    return {
+        L: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+        a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+        b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+    };
+}
+function fromLab(lab) {
+    const l = (lab.L + 0.3963377774 * lab.a + 0.2158037573 * lab.b) ** 3;
+    const m = (lab.L - 0.1055613458 * lab.a - 0.0638541728 * lab.b) ** 3;
+    const s = (lab.L - 0.0894841775 * lab.a - 1.291485548 * lab.b) ** 3;
+    return {
+        r: fromLinear(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+        g: fromLinear(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+        b: fromLinear(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
+    };
+}
+/**
+ * 2 色を混ぜる。`t` が 0 なら `from`、1 なら `to`。
+ * @param from 色（`#rrggbb`）
+ * @param to 色（`#rrggbb`）
+ * @param t 0〜1
+ */
+export function mix(from, to, t) {
+    // 端はそのまま返す。**丸め誤差で `#ffffff` が `#fffffe` にならないように**
+    if (t <= 0)
+        return toHex(parseHex(from));
+    if (t >= 1)
+        return toHex(parseHex(to));
+    const a = toLab(parseHex(from));
+    const b = toLab(parseHex(to));
+    return toHex(fromLab({
+        L: a.L + (b.L - a.L) * t,
+        a: a.a + (b.a - a.a) * t,
+        b: a.b + (b.b - a.b) * t,
+    }));
+}