Softonic

カラーティントジェネレーター

ステップ 1 / 2
次へ

色合いは、色と白を混ぜた結果です。各段階で明るくなります。ジェネレーターはベース カラーを取得し、徐々に明るい色合いのラダーを生成します。これは、デザイン システムのパレット範囲 (100 → 400)、微妙な背景の塗りつぶし、暗い原色のホバー状態、およびアクセント カラーが存在する必要があるが静かである必要があるバッジ/アラートの背景に役立ちます。

色合いが生成される仕組み

  1. 1

    ベースカラーを選択します

    カラーピッカーでベースカラーを選びます。中程度の明度のベースに最適です。白に近いベースには明るくする余地がほとんどありません。

  2. 2

    ステップ数を選択

    3 から 20 段階、デフォルトは 10。10 でデザインシステムの完全なスケールが得られ、素早い UI 作業には少なめの段階で十分です。

  3. 3

    白と混ぜる割合を増やしていきます

    10 段階の場合、最初の色合いは白を約 9% 混ぜ、最後は約 91% 混ぜます。補間は RGB 空間で直接行われるため、明度が上がるにつれて彩度は薄れていきます。

  4. 4

    HEX 値を読み取ります

    各スウォッチに HEX 値が表示されます。CSS 変数、Tailwind スケール、Sass マップにそのまま使えます。

#3B82F6 の色合いスケールの例

下表は、デフォルトの 10 段階でこのツールが出力する内容です。

ステップ Hex 白の割合 典型的な用途
0 #3B82F6 ベース プライマリーブランド色（blue-500）
1 #4C8DF6 9.1% 暗い背景での明るいホバー
2 #5E98F7 18.2% blue-400 相当
3 #70A4F8 27.3%
4 #82AFF9 36.4% blue-300
5 #94BAFA 45.5%
6 #A5C6FA 54.5%
7 #B7D1FB 63.6%
8 #C9DCFC 72.7% 控えめな背景 (blue-100/200)
9 #DBE8FD 81.8%
10 #EDF3FE 90.9% blue-50

ティント + シェード = デザインシステムスケール

単一のベースの周囲にティント (明るい色) とシェード (暗い色) を組み合わせて、フルスケールを形成します。

  • 50、100、200、300、400: ティント (最も明るい色からベースよりわずかに明るい色まで)
  • 500: ベース
  • 600、700、800、900: シェード (ベースよりわずかに暗い色から最も暗い色まで)

これは、Tailwind、マテリアル、オープン カラー、Radix UI、および最も一般的なデザイン システムに一致します。 10 ～ 11 段階のスケールが標準です。

UI で色合いが映える場所

  • アラートとバッジの背景: error-50 の背景に error-500 のテキスト = 視覚的に主張しすぎずに即座に認識できます。
  • 暗い背景でのホバー状態: 暗い表面上のボタンは、ホバーすると明るい色合いに向かって明るくなります。
  • 連続スケールのデータ: 値と色のマッピング。高い値は飽和し、低い値は白に向かって消えます。
  • アバター/チャート カテゴリ プレースホルダー: 画像/データが存在しない場合のプライマリの色合い。
  • 表面層: カードの背景はブランドカラーでわずかに着色されており、さりげなくブランドの存在感を示します。

最も明るい色合いの彩度が落ちる理由

このジェネレーターは RGB 空間で直接混色します。白を加えるほど、知覚される明度の上昇よりも彩度の低下のほうが速く進むため、上の段階は淡く、灰色がかって見えます。これは RGB 混色では正常な挙動です。

  • RGB 混色（このツール）: シンプルで予測しやすい。彩度は一定の割合で薄れ、非常に明るい段階は彩度の低い見た目になります。
  • OKLCH や LAB の補間: デザインソフトが明るくする際にクロマを安定させるために使います。このジェネレーターにはそうしたモデルはありません。色相の安定した色合いが必要なら、OKLCH 対応のデザインツールで生成してください。
  • HSL のライト化: 白を混ぜずに明度を上げるため、絵の具のような自然さよりパステル調に見えることがあります。

使える UI のためのティントの下限

非常に明るい色合い (ステップ 8 以降) は純白に近づき、白い背景上では視覚的に区別できなくなります。次のように役立ちます:

  • 微妙な選択範囲がテキストの後ろに強調表示されます。
  • 密集したテーブルでは行ストライプがほとんど見えなくなります。

ただし、ユーザーが明確な色を見る必要があるボタンやラベルには適していません。明るい色合いと暗い要素 (境界線、テキスト) を組み合わせて下地にします。

よくある質問

このジェネレーターは RGB で直接混色し、RGB 補間では明度が上がるにつれて彩度も下がるため、上の段階は白に寄っていきます。OKLCH や LAB で補間すればベースの色相の痕跡が残ります。それが重要な場合は OKLCH 対応のデザインツールを使ってください。

似ていますが、同一ではありません。白と混ぜると、彩度と明度の両方が比例して減少します。 HSLの明度調整はLを独立して上げます。色合いはより自然に (ペイントのように) 感じられます。 HSL の明るさは、非現実的なパステルを押し上げる可能性があります。

はい。背景がすでに暗いため、ダーク モードでは通常、別の「明度ラダー」が必要です。多くのシステムでは、スケールが反転されます (ダーク モードの 50 は、ライト モードの 900 に相当する、ダーク上に白です)。

同じベースから 5 段階のティント ラダー (50 ～ 500) と 5 段階のシェード ラダー (500 ～ 900) を生成します。完全な 10 ～ 11 ステップの設計システム スケールに合わせて連結します。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

バイナリからASCIIへの変換ツール

バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを8ビットずつ復号して取得できます。