16進カラーピッカー＆コンバーター（RGB、HSL、HSV、CMYK、OKLCH）
任意の色を HEX、RGB、HSL、HSV、CMYK、OKLCH に変換し、コントラストを確認し、ハーモニースウォッチをコピーし、CSS または JSON をエクスポート—すべてブラウザ内で。
hex（#RGB、#RRGGBB、#RRGGBBAA）、rgb()/rgba()、hsl()/hsla()、hsv()、cmyk()、oklch()、または CSS 色名を入力してください。無効な値は最後に有効だった変換を保持します。
最も近い CSS 名: royalblue
変換結果
白背景上
3.68:1
WCAG AA 合格（大きいテキストのみ）
黒背景上
5.71:1
WCAG AA 合格（通常テキスト）
スウォッチをエクスポート
任意の色形式を選択または貼り付け、HEX、RGB、HSL、HSV、CMYK、OKLCH に変換し、WCAG コントラストを確認し、ハーモニースウォッチを生成し、値をコピーし、CSS または JSON をエクスポートします。無料・高速で、完全にブラウザ内で動作します。
このカラーピッカーの使い方
対応する色形式を入力または貼り付け、不透明度を調整するか、ネイティブピッカーを使用します。ページは HEX、RGB、HSL、HSV、CMYK、OKLCH に即座に変換し、白と黒に対する WCAG コントラストを表示し、ハーモニースウォッチとティント/シェードストリップを生成し、すべてコピー可能な状態に保ちます。URL で設定を共有できます—状態はクエリ文字列に保存されます。
HEX、RGB、HSL、HSV、CMYK、OKLCH リファレンス
Hex はコンパクトな RGB エンコーディングです。RGB は赤/緑/青チャンネルを表します。HSL は色相、彩度、明度を表現します。HSV は色相、彩度、値（明るさ）を使用します。CMYK は印刷インクの割合をモデル化します。OKLCH は知覚的に均一な CSS 色空間です。このツールはブラウザ内で決定論的な計算を使用し、アップロードや外部 API はありません。
補色、類似色、トライアド、スプリット補色、テトラード、モノクロ
補色は色相を 180° 回転します。類似色は基準色の周りで固定角度ずつ色相を進めます。トライアドは 120° オフセットを使用します。スプリット補色は補色付近の 2 色相を追加します。テトラードは 90° の矩形オフセットを使用します。モノクロは色相を保ち明度を変化させます。カウント制御は類似色とモノクロモードに適用されます。
CSS 変数と JSON エクスポート
エクスポートは安定した名前（例：--color-base、--color-analogous-1）の :root カスタムプロパティと、baseHex、alpha、namedColor、ハーモニーモード、コントラスト比、スクリプトやデザイントークン用のスウォッチリストを含む JSON を生成します。
WCAG コントラストチェッカー
コントラスト比は WCAG 2.x に従い相対輝度から計算されます。AA は通常テキストで 4.5:1、大きいテキストで 3:1 が必要です。AAA は 7:1 が必要です。明るいまたは暗い背景上のテキストや UI 色を選ぶ際にプレビューをご利用ください。
よくある質問
どの色形式を入力できますか？
Hex（#RGB、#RRGGBB、#RRGGBBAA）、rgb()/rgba()、hsl()/hsla()、hsv()、cmyk()、oklch()、および cornflowerblue や rebeccapurple などの標準 CSS 名前付き色。
#ABC は 6 桁に展開されますか？
はい。3 桁の hex は桁ペアごとに展開されるため、#ABC は #AABBCC になります。
色が無効な場合はどうなりますか？
インラインエラーが表示されます。有効な色を再入力するまで、最後の有効な色が変換行、ピッカー、エクスポートに残ります。
WCAG コントラストチェッカーはどのように動作しますか？
相対輝度を使用して、色と純白または純黒とのコントラスト比を計算します。結果は通常テキストまたは大きいテキストに対して AA または AAA の基準を満たすかどうかを示します。
ハーモニーカラーはどのように計算されますか？
決定論的です：補色は 180° の色相シフト、類似色は固定の色相ステップ、トライアドは 120° オフセット、スプリット補色は補色付近の色相、テトラードは 90° の矩形オフセット、モノクロは基準の色相と彩度を保ちながら明度を変化させます。
JSON エクスポートには何が含まれますか？
安定したキー：baseHex、alpha、namedColor、harmony、該当する場合 harmonyCount、harmonySwatches、tintShadeStrip、stripCount、コントラスト比—ツールやドキュメントに適しています。
色を共有できますか？
はい。URL は hex、alpha、ハーモニーモード、カウント、ストリップサイズで更新されるため、正確な設定をブックマークまたは共有できます。