カラーコード変換
カラーピッカーまたはHEXコードの入力で色を選ぶだけで、HEX・RGB・RGBA・HSL・HSLA・CMYKの各コードをまとめて確認・コピーできます。濃淡チャートから近い色を選び直すこともできます。
使い方
- 1カラーピッカーで色を選ぶか、HEXコード欄に直接カラーコードを入力します。
- 2HEX・RGB・RGBA・HSL・HSLA・CMYKの各コードが自動で表示されます。
- 3気になるコードの右側のアイコンでワンクリックコピーできます。濃淡チャートから近い色を選び直すことも可能です。
計算方法・変換方法
HEXコードをRGB値に変換したうえで、標準的な変換式によりHSL（色相・彩度・明度）とCMYK（印刷用インク比率）を算出しています。
濃淡チャートは、選択した色のHSLの色相・彩度を保ったまま明度だけを段階的に変化させた色を並べています。
HEXコードは、赤（R）・緑（G）・青（B）の強さをそれぞれ16進数2桁（00〜FF）で表したものです。16進数の00〜FFは10進数の0〜255にあたるため、たとえば #1463F0 は R=20、G=99、B=240、つまり rgb(20, 99, 240) と同じ色を指します。RGBAとHSLAの末尾の値は不透明度で、0が完全な透明、1が不透明です。
HSLは、色相（0〜360度の色の種類）・彩度（鮮やかさ）・明度（明るさ）で色を表す方式です。「同じ色味のまま少し明るくしたい」といった調整が数値で行いやすく、ボタンのホバー色や配色の濃淡を作るときに便利です。
CMYKは印刷で使う4色のインクの比率です。本ツールのCMYK値は計算式による単純な変換で、印刷機や用紙ごとの特性（カラープロファイル）は考慮していません。画面で見る色と印刷した色は一致しないことが多いため、印刷物に使う場合は、印刷会社の指定や色見本で最終的な色を確認してください。
利用例
- デザインカンプで指定されたHEXコードを、CSSで使うRGBA形式に変換する
- Webサイトで使っている色を、印刷物用にCMYK値へ置き換える
- ボタンのホバー色として、ベースカラーより少し暗い色を濃淡チャートから選ぶ
- 透明度を加えたオーバーレイ用の色をRGBA形式で用意する
よくある質問
入力した色の情報はサーバーに送信されますか？
いいえ。すべての変換処理はブラウザ内で完結し、サーバーに送信されることはありません。
CMYKの値は印刷でそのまま使えますか？
画面表示用のRGBから計算した近似値です。実際の印刷では、使用するインクや用紙によって発色が異なるため、目安としてご利用ください。
HEXとRGBはどう使い分けますか？
どちらも同じ色を表す形式で、CSSではどちらも使えます。HEXは短く書けるため単色の指定に、RGBAは透明度（アルファ値）を指定できるため重ね表示や影の色によく使われます。
HSLを使うメリットは何ですか？
色相・彩度・明度に分かれているため、「同じ色味のまま少し明るくする」といった調整が直感的に行えます。配色のバリエーションを機械的に作るのに向いています。
アクセシビリティを考えた色選びはできますか？
本ツールはコントラスト比の判定機能は備えていません。文字色と背景色の組み合わせは、別途コントラスト比（WCAGでは本文で4.5:1以上が推奨）をご確認ください。
注意事項
- ・CMYKへの変換は一般的な計算式による近似値です。実際の印刷では、用紙やインク、印刷機の設定によって色味が変わります。正確な色指定が必要な場合は印刷会社にご確認ください。
- ・画面上の見た目は、モニターの設定やカラープロファイルによって異なります。
- ・RGBで表現できる色の範囲はCMYKより広いため、鮮やかな蛍光色などは印刷で再現できないことがあります。