HEX ティント＆シェード

ティント／シェード生成ツールです。1 つの HEX から白へ混ぜた色と黒へ混ぜた色の階調を作ります。

クリックするとコピーします

例 — スウォッチをクリック

複数の色を一度に変換します。1 行ずつ、または #3B82F6, #FF573380 のようにカンマ区切り。「例を入れる」で 3 行入り、下に表が出ます。

HEX ティントとシェード

ティント／シェード生成ツールです。HEX を白へ混ぜた色と黒へ混ぜた色の階調を作り、ボタンのホバーや枠に使います。

使い方

  1. HEX、rgb()、hsl() を貼るか、色塊・ランダム・例（#3B82F6、#171B45、#0074D9、#0F766E）を押し、対応ブラウザでは画面から取色できます。
  2. 軸の初期値は混合（白 / 黒）です。明度・彩度・色相は HSL の残り二つを固定します。刻みは 5%、10%、20%、25%。指定は 2–20 等分です。
  3. 全体の階調は左がシェード、中央が基色、右がティントです。HEX は色塊の下です。クリックでその HEX をコピーし、チップを更新します。
  4. トークン名の初期値は brand で、--brand-tint-10 などの CSS 変数と Tailwind 断片が出ます。結果をコピーは CSS をコピーします。例を表示は #3B82F6 を 10% 混合で再読込します。
  5. 一括は複数の HEX を受けます。例を入れると #3B82F6、#171B45、#0074D9 です。各行は基色・中間ティント・中間シェードです。

注意事項

混合は sRGB で #FFFFFF または #000000 へ直線です。#3B82F6 の 50% ティントは白の上に 50% 重ねた色と同じです。明度 / 彩度 / 色相は HSL で、OKLCH ではありません。不正な HEX はエラーです。すべてクリアで階調が空になります。関連：HEX を Tailwind、透明度の重ね、HEX を RGBA。

こんなときに

  • ブランド HEX からホバーや押下、枠線を作る。
  • 10% 刻みを 100–900 のトークンに載せる。
  • 明度を保ったまま彩度を下げて弱い塗りにする。
  • 色相を回して同じ重さの連れ色を探す。

よくある質問

50% ティントは白の上の 50% 不透明度と同じですか？

混合軸では同じです。#FFFFFF に 50% 重ねた色です。

10% は Tailwind の 50–950 ですか？

両側 9 段＋基色で個数は近いです。数値は混合パーセントで、OKLCH の 50–950 ではありません。既定クラスは HEX を Tailwind を使います。

複数の色を一度に貼れますか？

できます。1 行 1 色、または括弧の外のカンマです。rgb(22, 163, 74) は 1 件のままです。