HEX・RGB・HSL・HWBの間で色を変換
任意のCSSカラーを入力するだけで、HEX・RGB・HSL・HWBの値をすぐに確認でき、プレビューとWCAGコントラストチェックも表示されます。
上部に色を入力すると、プレビューと変換結果が表示されます。
カラーコンバーターについて
このツールは、16進数コード、rgb()、hsl()、「coral」のような色名など、あらゆるCSSカラーを一度に主要な形式へ変換します。アルファチャンネルを調整したり色相を視覚的に選んだりして、CSSやデザインツール、コードに必要な正確な値をコピーできます。
機能：
- HEX・RGB・HSL・HWBおよびCSS色名に対応
- カラーピッカーとアルファスライダーがテキスト入力と常に同期
- AA/AAAバッジ付きのWCAGコントラストチェッカーを内蔵
- 各出力形式をワンクリックでコピー
色を変換する方法
- 入力欄に色（16進数、rgb()、hsl()、または色名）を入力または貼り付けます
- カラーピッカーまたはアルファスライダーで微調整します
- 即座に生成されるHEX・RGB・HSL・HWBの値を確認します
- 任意の値をクリックしてクリップボードにコピーします
よくある質問
このツールはどの色形式に対応していますか？
16進数コード（#abc、#aabbcc、#aabbccdd）、rgb()/rgba()、hsl()/hsla()、および「tomato」や「steelblue」のような標準的なCSS色名に対応しています。
このコンバーターは透明度に対応していますか？
はい。アルファ値を含む色（rgba()や8桁の16進数など）を入力するか、アルファスライダーを使用すると、すべての出力形式がそれに合わせて更新されます。
HWBとは何ですか？なぜ含まれているのですか？
HWB（色相・白色度・黒色度）はCSS Color Moduleの形式で、HSLよりも手動での色調整が直感的に行える場合があります。
アクセシビリティにおけるコントラスト比とは何を意味しますか？
その色のテキストが白または黒の背景上でどれだけ読みやすいかを示します。WCAGでは、通常サイズのテキストに対して4.5:1（AA）以上、または7:1（AAA）以上の比率を推奨しています。
色のデータはどこかにアップロードされますか？
いいえ。解析と変換はすべてブラウザ内のJavaScriptでローカルに行われ、サーバーには何も送信されません。
8桁の16進数が一部の出力で透明度を失うのはなぜですか？
このツールでは失われません — アルファ値はHEX8・RGBA・HSLAのすべてで保持されます。一部の古いツールや画像形式は6桁の16進数のみに対応しており、アルファチャンネルが完全に失われます。他の場所で透明度を維持したい場合はRGBAまたはHSLAを使用してください。
プライバシー
変換はすべてお使いのブラウザ内でローカルに実行されます。色のデータがサーバーにアップロードされたり保存されたりすることはありません。