HEX と RGB をすばやく相互変換

色コードを確認しながらHEX、RGB、HSL、CSS値をまとめて見比べられます。

🔒 100%ローカル ⚡ すぐ使える 🚫 アップロード不要 🏠 全ツール
#3b82f6

HEX と RGB を見比べながら色指定を整える

デザインと実装のあいだでは、HEXとRGBのどちらで色を渡すかが混在しがちです。DragKitはライブプレビュー付きで値を相互変換し、CSS用の確認にも使えます。

相互変換

HEXからRGB、RGBからHEXへその場で切り替えられます。

ライブプレビュー

入力した色がその場で表示されるので、確認しながら値を整えられます。

CSS確認にも便利

HSLやCSS値もまとめて見られるため、実装に渡す前のチェックに向いています。

使い方

  1. 色コードを入力 - HEXまたはRGBの値を入力して変換を始めます。
  2. 結果を確認 - ライブプレビューで色味を見ながら値を整えます。
  3. 必要な形式をコピー - HEX、RGB、HSL、CSSの必要な値を使います。

よくある用途

  • CSS色指定の確認
  • デザインと実装の色合わせ
  • ブランドカラーの形式変換

FAQ

HEXとRGBはどちらを使えばいいですか?

CSSではどちらも使えます。チームの運用やデザインツールに合わせて選ぶのが実用的です。

HSLも確認できますか?

はい。ページ上でHSL値も確認できます。