このページの中身

色と階段

地・面・文字・アクセントを和文の予約ページで動かし、4.5:1 を割る組み合わせは持ち帰れない。薄い〜濃いの階段も出す。参考にした作業面: Realtime Colors、tints.dev、Huetone、OKLCH Color Picker。

つまみ#

案件の色を持っているなら、まず16進で入れます。アクセントは色相・彩度・明度の3つに落ちます。地と危険色は色相と彩度だけを使い、明度は紙の明るさに固定するので、欄の値は落とした結果に書き換わります。青紫（色相 240〜295）は使わない決まりで、入れるとコピーが止まります。

見本#

持ち帰る#

:root {
  --color-bg: #fbfaf8;
  --color-surface: #f3efe8;
  --color-text: #1c1a17;
  --color-text-muted: #6f6a62;
  --color-border: #d8d2c7;
  --color-accent: #b4713a;
  --color-accent-text: #95591c;
  --color-on-accent: #ffffff;
  --color-danger: #a2382a;
  --color-on-danger: #ffffff;
  --color-focus: var(--color-accent-text);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #171614;
    --color-surface: #201e1b;
    --color-text: #e9e6e1;
    --color-text-muted: #a49d93;
    --color-border: #3b3833;
    --color-accent: #d99356;
    --color-accent-text: #d99356;
    --color-on-accent: #171614;
    --color-danger: #d4705f;
    --color-on-danger: #171614;
  }
}

階段#

アクセントと無彩色を 50〜950 の11段で。OKLCH の明度を等間隔に置き、彩度は両端で落としています。各段に地に対する比を添えます。:root には入れず、使うときだけ貼ります。

つまみは JavaScript で動きます。無効の場合は、上の見本は既定の値で描かれ、コピー欄には出発点のCSSと同じ既定の値が入っています。

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。