Color Shades Generatorとは?
カラーシェードジェネレーターは、1 つのベースカラーを取り、その明るいバージョンと暗いバージョンの単色スケールを構築します。 #4466EEなどの単一の入力から、白に向かってステップする色合いの行、黒に向かってステップする色合いの行、およびグレーに向かってステップするトーンの行を生成します。各スウォッチは、HEX、RGB、または HSL としてコピーして、CSS、デザインファイル、またはテーマ構成にまっすぐにドロップできる実際の色です。
3 つのスケールは、色彩理論で使用される古典的な定義に由来しています。色合いとは、同じ色相を維持しながら明るさを高める白と混合されたベースのことです。色合いとは、黒と混合されたベースで暗くなります。色調とは、灰色と混合されたベースで、強度が低下し、色の落ち着いた、より洗練されたバージョンが得られます。 1 つの入力から 3 つすべてを取得すると、一貫したパレットを構築できます。ボタンとそのホバリング状態、一連のチャート シリーズ、またはインターフェイスの明暗の表面はすべて、単一のブランド カラーから派生します。
ジェネレータは完全にブラウザで実行されます。入力した色が解析され、スケールはクライアント側の JavaScript で計算されるため、アップロードされるものは何もなく、アカウントも存在せず、作業が追跡されることもありません。 HEX、rgb()、hsl()、および一般的な CSS カラー名を受け入れ、各スケールに含まれるステップ数を設定でき、すべてのスウォッチを即座に更新します。ページがロードされると、オフラインで動作します。
カラーシェードジェネレーターの使い方は?
ベースカラーを入力します
#4466EE のような HEX コード、rgb()または hsl()値、または teal などの CSS カラー名など、一般的な構文で色を入力または貼り付けます。
ステップ数を設定します
各スケールに含めるバリエーションの数を選択します。ステップを増やすと、ベースから白、黒、またはグレーに向かってより細かい勾配が得られます。
色合い、色合い、トーンを確認してください
このツールには 3 つのスケールが並んで表示されており、各スウォッチには HEX 値とターゲットの色に向かって混合されたパーセンテージがラベル付けされています。
必要な色をコピーします
任意のスウォッチをクリックして値をコピーします。 HEX、RGB、HSL の間でコピー形式を切り替えて、プロジェクトが期待する構文に一致させます。
主な機能
色合い、色合い、色調
1 つのベース カラーで、明るい色合い、暗い色合い、グレーに向かう落ち着いた色調の 3 つの完全なスケールが同時に生成されます。
すべての値をコピー可能
各スウォッチはHEX、RGB、HSLとして利用できるため、CSS、デザインツール、またはテーマファイルに直接貼り付けることができます。
調整可能なステップ
ベースカラーと白、黒、またはグレーの間のグラデーションの細さを制御するために、スケールごとに 2 ～ 20 ステップを設定します。
許すインプット
3 桁および 6 桁の HEX、rgb()および hsl()値、および一般的な CSS カラー名を受け入れ、すべて同じスウォッチに正規化されます。
Frequently Asked Questions
Related Tools
Color Contrast Checker
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Color Mixer
Blend two colors with adjustable ratio and blend modes, and build a gradient between them
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Comments
0 comments
No comments yet. Be the first to share your thoughts!