これらのカラー形式について
HEXとRGBは画面やCSSの標準形式です。HEXはコンパクト（#3B82F6）、RGBは各チャンネル（0〜255）を明示します。HSL（色相・彩度・輝度）とHSV（色相・彩度・明度）は、人間の感覚に近い形で色を表現します - 同じ色相の中で濃淡を選びやすくなります。CMYK（シアン・マゼンタ・イエロー・キー）は印刷用で、光を発するのではなくインクを混ぜて色を作ります。
このツールでできること
カラー変換ツールは、1つの色をHEX、RGB、HSL、HSV、CMYKの5つの表記で同時に表示します。16進コードを入力する、RGBの値を入れる、スライダーを動かす、148色あるCSSの名前付きカラーから選ぶ、のいずれかを行うと、すべての形式がすぐに更新されます。
各行には個別のコピーボタンがあり、rgb(59, 130, 246)やhsl(217, 91%, 60%)のようにそのままCSSで使える構文で表示されます。変換はすべてブラウザー内で行われます。
こんなときに使えます
- デザインファイルにHEXで書かれたブランドカラーを、RGBやHSLを求めるCSS、Android、iOSのコードに移す場合。
- HSLで明度だけを変えて、同じ色相の明るい色や暗い色を作る場合。
- カラーコントラストチェッカーを使って、色の上のテキストが読みやすいままか確認する場合。
- デザインシステムのカラーパレットを作り、開発者が必要としそうなすべての表記で各色を記録する場合。
使用例
#3B82F6
rgb(59, 130, 246) · hsl(217, 91%, 60%) · hsv(217, 76%, 96%) · cmyk(76%, 47%, 0%, 4%)
#FF6347 (tomato)
rgb(255, 99, 71) · hsl(9, 100%, 64%) · hsv(9, 72%, 100%) · cmyk(0%, 61%, 72%, 0%)
このツールについての質問
CMYKが印刷色の近似にとどまるのはなぜですか？
画面は光を、プリンターはインクを混ぜて色を作り、プリンターや用紙ごとに発色も異なります。CMYKの値は数学的な変換なので、正確な色が重要な場合は印刷会社にプロファイルに基づく値を確認してください。
HSLとHSVの違いは何ですか？
どちらも色相と彩度から始まります。HSLは明度（lightness）を使い、100%は常に白です。HSVは明るさ（value）を使い、100%はその色の最も鮮やかな状態です。デザインツールではHSVがよく使われ、CSSではHSLが使われます。
透明度には対応していますか？
このツールの5つの形式には不透明度は含まれません。CSSではrgb(59 130 246 / 50%)のように4つ目の値として加えるか、#3B82F680のように16進数を2桁追加してください。
このツールは無料ですか？
はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。
結果はどこで確認できますか？
このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。