カラーコンバーター

カラーコンバーターは、1つの色の値を入力すると、他のすべての一般的な形式で同時に表示するツールです。HEXコード、rgb()/rgba()値、hsl()/hsla()値のいずれかを入力または貼り付けると自動的に解析され、対応するHEX、RGB、HSL、HSV、CMYKの文字列が一覧表示されます。大きなスウォッチに色が表示され、透明度がある場合はその背後に市松模様が表示されます。ブラウザ標準のカラーピッカーで色を選ぶこともでき、テキスト入力欄と常に同期します。

どんな形式に対応していますか?

入力欄はHEXの3桁・4桁・6桁・8桁の各形式に対応しています(#f0fでも#ff00ffでも受け付け、4桁と8桁の形式はアルファチャンネルも扱えます)。加えてrgb()/rgba()とhsl()/hsla()は、カンマ区切りの従来記法でも、rgb(255 0 0 / 0.5)のようなスペース区切りの新しい記法でも認識します。入力した値は残り4つの形式、HEX・RGB・HSL・HSV・CMYKに変換されます。HSVとCMYKは透明度を標準的な方法で表現できないため常に不透明の値として表示され、一方HEX・RGB・HSLはアルファチャンネルを保持し、色が完全な不透明でない場合はaが付いた関数名(rgba()、hsla())に切り替わります。

変換結果とあわせて、非常に明るい色から非常に暗い色まで10段階の色調ランプも生成されます。色相と彩度はそのままに、明度だけを均等な間隔で下げていく仕組みです。ブランドカラー1色から、デザインツールを開かずにティント・シェードのパレットをさっと作りたいときに便利です。

データはどこかにアップロードされますか?

されません。解析と変換はすべてブラウザ内でJavaScriptの計算だけで完結し、サーバーへの通信は一切発生しません。入力または選択した色が外部に送信されることはないため、社内のデザインシステムやクライアントのスタイルガイドのブランドカラーを、外部サイトに貼り付けることなく変換できます。

デザイナーが指定したHEXコードをCSSファイルで使うRGBやHSLの値に変換したり、透明度を持たせた場合の色の見え方を確認したり、画面上で選んだ色から印刷用のCMYKパーセンテージを取得したりするのに使えます。CSSのカラー表記の一覧はMDNの<color>データ型のリファレンスを、スペース区切り記法の仕様はCSS Color Module Level 4を参照してください。