Toolipedia 埋め込み
JA
← すべてのテキストツール

明色・暗色ジェネレーター

任意の色の明るいティント、暗いシェード、柔らかいトーンを、CSS変数付きで生成します。

  • 無料
  • 登録不要
  • どの端末でも使える

約明色・暗色ジェネレーター

1色から出発して、(白を混ぜた)明るいティント、(黒を混ぜた)暗いシェード、(グレーを混ぜた)落ち着いたトーンが得られます。各段階は、スタイルシートにそのまま使えるCSS変数として出力されます。これらの系統は、ホバー状態、枠線、背景、無効なボタンの基礎になります。

明色・暗色ジェネレーターの使い方

  1. 基本色をHEXコードで入力するか、選んでください。
  2. より明るいティント、より暗いシェード、より柔らかいトーンを見てください。
  3. 個々の色、またはセット全体のCSS変数をコピーしてください。

このツールを使う理由

別名

よくある質問

ティントとシェードの違いは何ですか?

ティントは白を混ぜた色で、明るくなります。シェードは黒を混ぜた色で、暗くなります。トーンはグレーを混ぜたものです。

色合い用のCSS変数には、どのような名前を付ければよいですか?

100~900のような番号付きスケールを使ってください。小さい数が明るく、大きい数が暗くなります。これにより、名前が短く、拡張しやすくなります。

より柔らかいトーンは、何に使われますか?

トーンは、色をグレーと混ぜて、強度を下げたものです。純粋な色では主張が強すぎる、背景、境界線、控えめなインターフェース要素に向いています。

明色・暗色ジェネレーターは無料ですか？

はい。Toolipediaの明色・暗色ジェネレーターは無料で、登録不要、透かしもありません。

安全に使えますか？

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか？

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか？

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

明色・暗色ジェネレーター を自分のサイトに置けますか？

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール