濃淡スケール生成

Tint & Shade Scale

色ひとつから見た目の間隔が均等な50〜950の明度スケールを作り、そのままデザイントークンに使えます。

色ひとつから50〜950のランプを、デザインシステムが求める形で組み立てます。明度の目標値はTailwind自身の有彩色の系統の平均で、手で選んだものではなくインストール済みのパッケージから測っています。だから各段が、目のすでに予期している位置に落ちます。スライダーで、その見慣れた曲線と等間隔の曲線のあいだを動かせます。

🔒 ブラウザの中だけで動きますcolorscaletokenstailwind

基準の色

色

色相と彩度がランプの種になり、明度はどの段階に「あなたが選んだ色」の印が付くかを決めます。

ランプ

実測カーブへの寄せ具合: 100%0 なら 0.97 から 0.25 までの直線で、間隔は均等ですが見慣れません。100% なら、みんながすでに頭の中に持っているカーブと同じになります。色相の移動: 0°Tailwind の系統そのものが色相を動かします。赤は 50 段階の 17° から 950 段階の 26° まで動きます。暗い赤は少し暖かいほうがよく見えるからです。最大彩度: 基準の色から

すべての段階を sRGB 内に収めるオフにすると広色域の段階をそのまま残します。P3 ディスプレイには出せますが、16 進数では表せません。

各段階の明度の目標値はここで決めたものではなく、インストール済みの Tailwind パッケージから測った有彩色の系統の平均です。

ダークモード

ダークのスケールを作る

50 段階が 950 に、100 が 900 に、という具合に入れ替わります。トークン名の意味はそのままで、500 は変わらず中間トーンです。このスケールに合わせて書いたコンポーネントは何も直す必要がありません。

ライト

100

200

300

400

500

600

700

800

900

950

書き出し

接頭辞

:root {
  --brand-50: oklch(97.72% 0.0107 259.81);
  --brand-100: oklch(95.04% 0.0236 259.81);
  --brand-200: oklch(90.55% 0.0458 259.81);
  --brand-300: oklch(84.05% 0.0793 259.81);
  --brand-400: oklch(75.35% 0.1267 259.81);
  --brand-500: oklch(68.27% 0.1677 259.81);
  --brand-600: oklch(59.78% 0.1861 259.81);
  --brand-700: oklch(51.49% 0.1655 259.81);
  --brand-800: oklch(44.61% 0.1391 259.81);
  --brand-900: oklch(39.46% 0.1128 259.81);
  --brand-950: oklch(27.79% 0.0752 259.81);
}

ひとつの色相のランプではなく複数の色相が要るときは、配色パレット生成が調和のとれた配色を作ります。ここで出た色にいちばん近い Tailwind のトークンを探すなら、近い Tailwind カラー検索が ΔE で測ってくれます。

使い方

基準の色を入れます
その色相と彩度がランプの種になります。明度は、どの段に輪が付くかを決めます。持ち込んだ色にいちばん近い段です。
曲線をどれだけ見慣れた形にするか決めます
100%ではTailwindが置いている位置に段が並び、チームの誰もがすでに頭に入れている形になります。0では0.97から0.25までの直線になり、間隔は均等ですが見慣れないものになります。正解はありません。100%のままにする理由はたいてい、既存のプロダクトに合わせることです。
暗い側が気に入らなければ色相のずれを足します
実際の系統は色相がずれていきます。Tailwindの赤は50の17°から950の26°まで動きますが、暗い赤は少し暖かいほうがよく見えるからです。数度あれば足りることが多く、スライダーはどちらの向きにも40まで動きます。
sRGBの中に留まるかを決めます
有効にすれば、どの段もどんな画面でも表示できる色になり、16進数は正確です。無効にすれば、彩度の高い色相の中間の段が彩度を保ち、P3ディスプレイならそれが表示され、16進数は近似値になります。あふれた段には印が付きます。
変数、Tailwindのテーマ、JSONで書き出します
接頭辞は自由に決められます。JSON形式には明度の基準値も入るので、下流で同じランプを組み直す必要があるときに役立ちます。

よくある質問

ブランドカラーの16進数がランプのどこにもありません。不具合ですか。

不具合ではなく、正直な振る舞いです。ランプは明度の目標値から組み立てるもので、入れた色を通して引くわけではありません。ですから、その色がちょうど11個の目標値のどれかに乗っていないかぎり、そのままの形では現れません。輪の付いた段がいちばん近いものです。その16進数がどうしても必要なら、そのトークンだけ直接使い、残りをランプに任せてください。

これはTailwindの色ですか。

違います。Tailwindから来ているのは曲線の形だけで、有彩色の系統全体で平均した11個の明度の値です。色相と彩度はあなたのものです。手元の色にいちばん近いTailwindのトークンを探すなら、近いTailwindカラー検索がそれをΔEで測ります。

「知覚的に均等」とは、どの段も同じだけ違うという意味ですか。

0%に寄せたときだけです。100%ではランプは意図的にTailwindの曲線をなぞりますが、それは等間隔ではありません。明るい側を詰めて、背景に使える淡い色を十分に取れるようにしています。どちらにしてもOKLCHが与えてくれるのは、数字が知覚の上で意味を持つということで、だからこの作り方をした2つの系統は互いに歩調を合わせて進みます。