カラーコード変換
カラーコード変換（Color Converter）
色をカラーピッカーまたは数値で指定すると、HEX・RGB・HSL・HSV・CMYKを同時に計算します。各形式をワンタッチでコピーでき、補色や文字色とのコントラスト比も確認できます。
カラーコード変換ツールとは
カラーコード変換ツールは、Web制作、アプリ開発、画像編集、印刷物のデザインなどで使われる色の数値表現を相互に変換する無料オンラインツールです。同じ色でも、用途やソフトウェアによってHEX、RGB、HSL、HSV、CMYKなど異なる形式で指定されます。本ツールでは一つの色を入力するだけで、主要な形式の値をまとめて確認できます。
HEXはWebサイトのCSSで広く使われる16進数表記です。例えば白は#FFFFFF、黒は#000000で表されます。RGBは赤、緑、青の光を0から255の範囲で組み合わせる方式で、ディスプレイ上の色を扱う際に利用されます。RGBAと8桁HEXAでは透明度も指定できるため、半透明の背景色やオーバーレイを作るときに便利です。
HSLは色相、彩度、明度で色を表します。色相は0から360度の色相環、彩度と明度は0から100％で指定します。色を少し明るくする、鮮やかさを抑えるといった調整を直感的に行いやすい形式です。HSVまたはHSBは色相、彩度、明るさで表し、多くのグラフィックソフトやカラーピッカーで採用されています。
CMYKはシアン、マゼンタ、イエロー、ブラックのインク量を使う表現で、主に印刷分野で利用されます。ただし、画面上のRGB色から数式で求めるCMYK値は簡易的な目安です。実際の印刷結果は用紙、インク、印刷機、ICCプロファイルなどに左右されるため、色の正確さが必要な印刷物では印刷会社の指定やカラーマネジメント環境を確認してください。
本ツールでは各形式の値だけでなく、選択色のプレビュー、色相を180度ずらした補色、白文字と黒文字を重ねた場合のコントラスト比も表示します。背景色に対して読みやすい文字色を選ぶ際や、アクセシビリティを考慮した配色を検討する際に役立ちます。すべての計算はブラウザ内で実行され、入力した色の情報がサーバへ送信されることはありません。
使い方
- カラーピッカーを操作するか、HEX、RGB、HSL、HSV、CMYKのいずれかへ値を入力します。
- 入力した形式に応じて、ほかのカラー形式の値が自動的に更新されます。
- 透明度が必要な場合は、透明度スライダーまたは数値欄を調整します。
- 「変換結果を表示」を押すと、結果欄へ移動して各形式、補色、コントラスト比を確認できます。
- 必要な形式の「コピー」を押し、CSS、デザインツール、資料などへ貼り付けます。
利用時の注意
- CMYK値はRGBから算出した一般的な換算値であり、印刷時の厳密な色再現を保証するものではありません。
- 透明度はRGB、HSL、HEXAの出力に反映されますが、CMYKには透明度の概念を含めていません。
- ディスプレイやブラウザ、OSの設定によって、同じカラーコードでも見え方が異なる場合があります。
- コントラスト比は透明度を除いた不透明色を基準に計算します。実際の背景画像や重なり方によって読みやすさは変化します。
- 非常に細かな小数は、読みやすさのため適切な桁数へ丸めて表示します。