カラー変換 🔒 データがブラウザの外に出ることはありません。
HEX ↔ RGB ↔ HSL、ライブプレビューとカラーピッカー付き。
コントラスト チェッカー
コントラストを確認するためのサンプル文です。
コントラストを確認するためのサンプル文です。
シェードとティント
色阶を選ぶと現在の色として読み込まれます。
このツールについて
任意のCSS形式で色を貼り付けてください。hex（#1e90ffや#19f）、rgb()、hsl()、dodgerblueのような色名でもOK。全形式がワンクリックコピーとライブスウォッチ付きで得られます。HEXはデザインツールの出力、RGBはcanvasやJS APIの入力、HSLは人間が推論しやすい形式（色相・彩度・明度）です。
変換にはブラウザ自身のCSSエンジンを使用するため、スタイルシートで有効な記法はすべて使えます。100%クライアントサイド。
よくある質問
カラーデータはどこかへ送信されますか？
いいえ。すべての変換、コントラストチェック、パレット生成はブラウザ内でローカルに計算され、入力した内容が端末の外に出ることはありません。
HSL と HSV の違いは何ですか？
どちらも色相と彩度を表しますが、HSL の3番目の値は明度（黒や白にどれだけ近いか）で、HSV の3番目の値は明るさ（黒にどれだけ近いかのみを見て、上限では常に最大輝度）です。HSV はデザインツールのカラーピッカーに多く、HSL は CSS の慣習に多く使われます。
なぜ hex コードが 6 桁ではなく 8 桁になるのですか？
追加の2桁はアルファ（透明度）を #rrggbbaa として表します。入力色のアルファチャンネルが 1 未満のときだけ表示され、完全不透明な色は 6 桁のままです。
コントラストチェッカーの下にある AA・AAA バッジは何を意味しますか？
これらは WCAG 2 のコントラスト基準です。AA はほとんどのサイトが満たすべき最低基準（通常テキストは 4.5:1、大きいテキストや UI 部品は 3:1）、AAA はより厳しい基準（7:1 / 4.5:1）です。緑のバッジは、前景色と背景色の組み合わせがその基準に合格していることを示します。
OKLCH とは何ですか？ HSL よりもなぜ使うべきなのですか？
OKLCH は知覚的に均一なカラースペースで、明度やクロマを等間隔で変化させると、人の目にも等間隔の違いとして見えます。これは HSL では保証されません。予期しない暗い部分や濁った部分のないカラースケールやグラデーションを作るため、モダンな CSS で採用が広がっています。