色変換ツール

HEX・RGB・Unity Colorを相互変換。デザインツールとUnityの橋渡しに便利です。

▶このツールについて

HEX・RGB・Unity Color形式を相互に変換できるツールです。カラーピッカーで色を選ぶだけで、RGBとUnityのnew Color(r,g,b)形式が同時に表示。パレット登録でよく使う色の再利用もできます。

Figmaで決めた色をUnityに持っていきたいのに、HEXからnew Color()に直すのが地味に面倒──そんな経験はありませんか？ HEX（#RRGGBB）を入力するかカラーピッカーで色を選ぶだけで、RGBとUnityのColor形式（0〜1の正規化値）を同時に確認できます。逆にマテリアルの色をHEXでデザイナーに共有したいときにも重宝します。よく使う色はパレットに登録しておけば、次からワンクリックで呼び出せます。

ツール操作

RGB 99, 102, 241
Unity Color
new Color(0.388f, 0.4f, 0.945f)

履歴（直近5色）

使い方

  1. HEX形式（#RRGGBB）を入力するか、カラーピッカーで色を選択します
  2. RGBとUnityのnew Color(r,g,b)形式が自動で表示されます
  3. 表示された形式をコピーしてマテリアルやスクリプトに貼り付けます

いつ使うか

デザインツールで指定した色をUnityのスクリプトにコピーしたい、マテリアルの色をHEXで共有したい場合。

使用例

#6366f1 → RGB(99,102,241) → new Color(0.388f, 0.4f, 0.945f)

補足・Tips

  • UnityのColorは0〜1のfloat。255で割った値を使用します。
  • マテリアルのColorプロパティにそのまま貼り付け可能。
  • パレットからよく使う色を登録して再利用できます。

よくある質問

HEXとRGBの違いは？

同じ色の異なる表記方法です。HEXは#RRGGBB形式（例:#ff0000）、RGBは(255,0,0)のように0〜255の数値で指定。HEXはWeb・CSSで、RGBは画像編集ソフトでよく使われます。

UnityのColorは0〜1の値を使う理由は？

正規化された値で、異なる色深度に対応しやすく、シェーダーやグラフィックスAPIとの互換性が高いためです。255で割るか、Color32を使うと0〜255の値も扱えます。

カラーコードの#とは？

HEX形式の先頭記号で、16進数表記であることを示します。#RRGGBBのR=赤、G=緑、B=青の各2桁（00〜FF）で色を表します。

HEXとRGBの変換方法は？

HEXの2桁を16進数として10進数に変換するとRGBの1要素になります。例: #FF = 255、#00 = 0。逆にRGBは255で割って16進数に変換するとHEXになります。

色変換ツールの使い方は？

HEXを入力するかカラーピッカーで選択。RGBとUnityのnew Color(r,g,b)形式が自動表示されます。

デザインの色をUnityにコピーするには？

Figma等のHEXをこのツールでUnity形式に変換。new Color(0.388f, 0.4f, 0.945f)のようにコピーできます。

UnityのColorの書き方は？

new Color(r, g, b)で0〜1のfloat。例: new Color(1f, 0f, 0f)は赤。このツールでHEXから変換できます。

カラーピッカーで色を選ぶには？

このツールのカラーピッカーをクリック。色を選択するとHEX・RGB・Unity形式が即座に更新されます。

マテリアルの色をHEXで共有するには？

Unityの色をこのツールでHEXに変換。デザイナーと色の共有がしやすくなります。

色変換はデータを送信する？

いいえ。すべてブラウザ内で完結。入力した色はサーバーに送信されません。

関連ツール

色・デザインセット