パレット内には[カスタム]タブと[スタイル]タブがあり、それぞれ設定項目が異なります。
[カスタム]タブ：要素に色を設定する
[スタイル]タブ：カラースタイルを登録する、登録したスタイルを選択する
この記事では、カラーパレットを使って色を設定する手順を解説します。
1. 色を指定したい要素を選択する
色を設定したい要素をスクリーン上でクリックして選択します。
以下の要素で色の指定が可能です。
ボックス：塗り、枠線
テキスト：テキストの色、背景色
リッチテキスト：テキストの色、背景色
アイコン：アイコンの色
2. カラーパレットを開く
右パネルで色を設定したい項目をクリックして、カラーパレットを開きます。
カラーパレットは、選択した要素により配置箇所が異なります。
要素 | カラーパレットの配置箇所 |
ボックス | [ボックス]タブ |
テキスト | [テキスト]タブ |
リッチテキスト | [コンテンツ]タブ |
アイコン | [アイコン]タブ |
3. 透明（塗りなし）・単色・グラデーションを選択する
透明（塗りなし）を設定する
ボックスや枠線などを透明（塗りなし）にする場合には、パレット右上部のアイコン
をクリックします。
単色とグラデーションを選択する
パレット中央部で、単色またはグラデーションどちらで色を設定をするか選択します。
グラデーションを選択した場合は、後述のグラデーションの詳細設定で色や角度を調整します。
4. 色を選択する
次のいずれかの方法で色を選択します。
デフォルトカラー
サンプル色から色を選択できます。
パレット左上部のアイコン
をクリックして、デフォルトカラーを表示します。一覧からサンプル色を選択します。選択後も色の微調整が可能です。
デフォルトカラーの選択をやめる場合は、もう一度アイコンをクリックします。
注意：マイカラー（My Color）
デフォルトカラー内に、過去に登録されたマイカラーが格納されています。
マイカラーは、2025年3月13日より色の新規登録機能を停止しました。また、機能自体も段階的に提供終了を予定しています。
詳しくは、マイカラーへの新規登録停止と機能提供終了についてをご覧ください。
RGBA数値・HEXコード指定
RGBAの数値やHEXコードを直接入力して色を指定できます。
パレット中央部のテキストフィールドに直接値を入力します。
コードの切り替えは、テキストフィールド右のアイコンで行います。
Tips：RGBA数値とHEXコード
RGBA数値とHEXコードは、どちらもさまざまなデザインツールや開発環境で一般的に使われるカラーコードです。正確な色の指定や他のデザインツールとの連携に便利です。
RGBA数値
RGBAは赤（R）、緑（G）、青（B）、透明度（A）の4つの値で色を表現する方式です。
R・G・Bは、それぞれ0〜255の範囲で指定します。不透明度（A）は0（完全な透明）から1（完全な不透明）の範囲で設定します。
HEXコード
HEXコードは16進数で色を表現する方式です。不透明度は0％（完全な透明）から100%（完全な不透明）の範囲で設定します。
＜代表的なHEXコードの例＞
white：#ffffff
black：#000000
red：#ff0000
blue：#0000ff
yellow：#ffff00
カラーピッカー
別サービスで作成したデザインなどから色を抽出し、その色をエディタ内で利用できます。
パレット中央部左のスポイトアイコン
をクリックすると、カーソルが円に変化します。抽出したい箇所にカーソルを移動してクリックし、色を抽出します。
カラースタイル
カラースタイルに登録した色は、パレット右上部の[スタイル]タブから選択が可能です。
Point：カラースタイルとは
カラースタイルは、エディタ上で繰り返し使用する色を登録・管理する機能です。
登録済みの色を適用するだけで同じ色を再利用でき、色指定の手間を減らし、色味のばらつきや設定ミスを防げます。
詳しい設定方法は、カラースタイルの設定方法をご覧ください。
5. 不透明度を設定する
パレット中央右で不透明度の設定をします。右パネル上の設定箇所でも操作が可能です。
0％から100%、または0から1の範囲で設定します。数値が大きいほど、不透明度が上がります。
グラデーションの詳細設定
グラデーションを選択した際の設定方法を解説します。
グラデーションに使用する色を指定する
パレット中央部に配置された、グラデーションバーで設定します。
スライダーを追加して、グラデーションにする色を追加することが可能ですが、デフォルトでは起点と終点の2点が設定されています。
色を追加する場合は、追加したい位置をクリックしてスライダーを追加します。
スライダーをドラッグして位置を調整できます。
スライダーにカーソルを合わせて[×]をクリックすると、削除できます。
グラデーションの角度を調整する
角度を変更すると、色の変化する方向が変わります。
グラデーションバーの右側の矢印のアイコンにカーソルを当てます。
角度調整パネルで、グラデーションの角度を決定します。
