カラーパレットジェネレーター
ベースカラーを選ぶか入力すると、このツールはそれをHSLに変換し、補色・類似色・トライアド配色という3種類のすぐ使えるパレットを生成します。デザインの配色をすばやく検討するのに便利です。スウォッチをクリックすると、その16進数コードをコピーできます。
16進数コード
#3B82F6 hsl(217, 91%, 60%)
補色
#3b82f6
#f6af3b
類似色
#3bdff6
#3b82f6
#523bf6
トライアド配色
#3b82f6
#f63b82
#82f63b
使い方
色はHSL(色相・彩度・明度)に変換され、色相を回転させるだけで新しい色を生成できます。補色パレットはカラーホイール上でちょうど反対側の色(+180°)を追加し、類似色パレットは隣接する2つの色相(±30°)を追加し、トライアド配色パレットはホイール上に均等に配置された2つの色相(+120°と+240°)を追加します。
ヒント
スウォッチをクリックすると、その16進数コードがクリップボードにコピーされます。デザインツールやCSSに直接貼り付けるのに便利です。
どのパレットを使えばいいですか?
補色パレットは強いコントラストを生み、単一のアクセントカラーに向いています。類似色パレットは落ち着いてまとまりのある印象になり、背景やグラデーションに最適です。トライアド配色パレットは鮮やかでバランスが取れており、どれも目立つ3色が必要なときに役立ちます。
このカテゴリの他のツール
露出計算機
絞り、シャッタースピード、ISOの間で等価露出を求めます。
アスペクト比計算機
画像や動画を比率を保ったまま拡大縮小し、簡略化した比率を求めます。
CSSグラデーションジェネレーター
線形または放射状のCSSグラデーションをデザインし、生成されたコードをコピーします。
コントラストチェッカー
前景色と背景色がWCAGコントラストガイドラインを満たしているか確認します。
カラーフォーマット変換ツール
色をHEX、RGB、HSL、CMYKの間で即座に変換。各形式をワンクリックでコピーできます。
タイポグラフィスケールジェネレーター
基準フォントサイズと拡大比率から、調和の取れたフォントサイズのセットを生成し、CSSカスタムプロパティとしてコピーできます。