ToollyToolly
Web・開発

カラーコード変換

カラーピッカーまたはHEXコードの入力で色を選ぶだけで、HEX・RGB・RGBA・HSL・HSLA・CMYKの各コードをまとめて確認・コピーできます。濃淡チャートから近い色を選び直すこともできます。

使い方

  1. 1カラーピッカーで色を選ぶか、HEXコード欄に直接カラーコードを入力します。
  2. 2HEX・RGB・RGBA・HSL・HSLA・CMYKの各コードが自動で表示されます。
  3. 3気になるコードの右側のアイコンでワンクリックコピーできます。濃淡チャートから近い色を選び直すことも可能です。

計算方法・変換方法

HEXコードをRGB値に変換したうえで、標準的な変換式によりHSL(色相・彩度・明度)とCMYK(印刷用インク比率)を算出しています。

濃淡チャートは、選択した色のHSLの色相・彩度を保ったまま明度だけを段階的に変化させた色を並べています。

利用例

  • デザインカンプで指定されたHEXコードを、CSSで使うRGBA形式に変換する
  • Webサイトで使っている色を、印刷物用にCMYK値へ置き換える
  • ボタンのホバー色として、ベースカラーより少し暗い色を濃淡チャートから選ぶ
  • 透明度を加えたオーバーレイ用の色をRGBA形式で用意する

よくある質問

注意事項

  • CMYKへの変換は一般的な計算式による近似値です。実際の印刷では、用紙やインク、印刷機の設定によって色味が変わります。正確な色指定が必要な場合は印刷会社にご確認ください。
  • 画面上の見た目は、モニターの設定やカラープロファイルによって異なります。
  • RGBで表現できる色の範囲はCMYKより広いため、鮮やかな蛍光色などは印刷で再現できないことがあります。

他のカテゴリを見る