カラーピッカーの使い方
このカラーピッカーでは、視覚的に色を選んだり、値を直接入力したり、画像から色を取得したり、カラーホイールからパレットを探したりできます。現在の色は Hex、RGB、HSL、HSV、OKLCH に変換され、CSS、デザインツール、書き出しコードで使いやすくなります。
Hex カラーピッカーの使い方
選択点をドラッグしたり、チャンネル値を編集したり、Hex コードを入力したりして色を選べます。色が変わると、スウォッチ、配色、バリエーション、コントラストプレビュー、書き出しパネルが同じ値から更新されます。
Hex 色はいくつありますか？
Hex 色は #RRGGBB 形式の 6 桁の 16 進文字を使います。各 2 桁が赤、緑、青を 00 から FF まで制御するため、16,777,216 通りの RGB 色を扱えます。
画像カラーピッカー
画像ピッカーでは、アップロードした画像から直接色を取得できます。画像上の取得点を動かして色を拾い、値を比較し、選択した画像の色をそのまま書き出せます。
カラーホイール
色相で作業したいときにカラーホイールは便利です。外側のリングで色相を変え、内側の領域で彩度と明度を調整すると、インターフェイス全体が同期します。
シェード、ティント、トーン
シェードは選択色を黒と、ティントは白と混ぜ、トーンは灰色へ近づけます。これらはホバー状態、境界線、背景、無効状態、階層的な UI 面に役立ちます。
カラー ハーモニー
調和パレットはカラーホイール上の関係から作られます。類似色、補色、分割補色、トライアド、テトラード、スクエアは、ブランド、UI アクセント、データ色、イラストの出発点になります。
色空間
RGB は赤、緑、青の光で画面色を表します。HSL は色相、彩度、明度を分けて感覚的に調整しやすくします。HSV は視覚的なピッカーで一般的で、OKLCH は現代的な CSS パレットでより均一な見え方を目指します。
Hex コード
Hex コードは短く、コピーしやすく、ブラウザーやデザインツールで広く対応しています。Hex と RGB は同じチャンネルを表すため、見た目を変えずに相互変換できます。
カラーコードの書き出し
書き出しパネルは表示中のパレットを Tailwind、Figma、CSS 変数、接頭辞付き関数、コード一覧にまとめます。単色はスウォッチをクリックし、全体が必要なときは書き出しを使います。
WCAG とアクセシビリティ
読みやすい配色にはコントラストが重要です。コントラストチェッカーは選択色を明るい背景と暗い背景で比較し、文字、境界線、面の色を選びやすくします。
色覚シミュレーター
シミュレーターは一般的な色覚特性で現在の色がどう変わるかを確認できます。色相差だけに頼るパレットを避け、コントラスト、ラベル、補助的な視覚手がかりを強める助けになります。
ダークテーマとライトテーマ
シェード、ティント、トーン、ハーモニーは暗いテーマと明るいテーマの土台になります。1 色から始め、周囲の変化を確認し、背景、前景、ボタン、強調状態に合う値を書き出します。
カラーホイールの使い方
カラーホイールは、色同士の関係を視覚的に理解するための方法です。色相を円に並べることで、基準色の選択、近い色の比較、予測しやすい関係からバランスのよいパレット作成がしやすくなります。
カラーホイールとは？
カラーホイールは赤、橙、黄、緑、青、紫を円形のスペクトル上に配置します。近い色は関連して穏やかに見え、反対側の色は強いコントラストとエネルギーを生みます。
このカラーホイールの使い方
ホイール上をドラッグして色相を選び、ピッカー内で彩度と明度を調整します。現在の色は Hex、RGB、HSL、HSV、OKLCH、上部パレット、ハーモニー、書き出しパネルへ反映されます。
原色
原色は多くの色体系の出発点です。伝統的な美術理論では赤、黄、青です。画面では RGB が赤、緑、青の光を使い、Web サイト、アプリ、デジタルデザインの色を作ります。
二次色
二次色は 2 つの原色を混ぜて作られます。伝統的なホイールでは、橙、緑、紫が原色の間にあり、暖色、寒色、中間的なパレットをつなぎます。
三次色
三次色は原色と二次色の間にあります。黄橙、赤橙、赤紫、青紫、青緑、黄緑などが含まれ、基本の 6 色ホイールより細かなニュアンスを与えます。
暖色と寒色
赤、橙、黄などの暖色は活発で明るく目を引きます。青、緑、紫などの寒色は落ち着きと広がりを感じさせます。強いパレットでは一方を基調にし、もう一方をアクセントにすることがよくあります。
補色
補色はホイール上で向かい合う色です。強いコントラストを作り、ボタン、強調、バッジ、周囲から目立たせたい要素に役立ちます。
類似色
類似色パレットはホイール上の隣り合う色を使います。色相が近いため、背景、カード、チャート、イラストで滑らかで自然に扱いやすい結果になります。
トライアド配色
トライアド配色は等間隔の 3 つの色相を使います。1 色を主役にし、残り 2 色を控えめなアクセントとして使うと、鮮やかでバランスのよい方案になります。
分割補色
分割補色は基準色から始め、その直接の補色の両隣の 2 色を使います。補色のような強いコントラストを持ちながら、より柔らかく柔軟です。
テトラードとスクエア配色
テトラードとスクエア配色はホイール上の 4 色を使います。複数のアクセントが必要なときに便利ですが、1 色を主役にし、残りを明るい色や暗い色で調整すると扱いやすくなります。
シェード、ティント、トーン
色相関係を選んだら、シェード、ティント、トーンで実用的なパレットにします。明るいティントは背景に、暗いシェードは文字や境界線に、落ち着いたトーンは補助的な UI 状態に使えます。
配色を組み立てる
主色から始め、ハーモニーの種類を選び、実際のインターフェイス要件で試します。完全な配色には通常、主色、1 つか 2 つのアクセント、中立面、読みやすい文字色、コントラスト安全な状態が含まれます。
ホイール色の書き出し
パレットが合ったら、CSS 変数、Tailwind 値、Figma 向けオブジェクト、接頭辞付き関数、コード一覧として書き出します。表示されているスウォッチから現在の色を直接コピーすることもできます。
アクセシビリティとコントラスト
色の調和は読みやすさを保証しません。文字や重要なコントロールのコントラストを確認し、色だけに頼らず、シミュレーターで一般的な色覚条件での変化を確認してください。