Figmaデザインでのカラーモデル – Figma Learn - ヘルプセンター

はじめに

この機能を使用できるユーザー

ファイルの編集可アクセス権があるユーザーは、色選択機能を使用し、カラーモデルを選択できます。

色を表現するために使われる用語はたくさんあります。この記事では、カラーモデルという用語を使って、色を表現するさまざまな方法を説明します。

Figmaでは、Hex、HSB、HSL、CSS、RGBという5つのカラーモデルで色を表示できます。

カラーモデルの切り替えはFigmaの色を説明する方法にのみ影響します。Figmaがどのように色を表現するかには影響しません。

Image showing five color pickers with the same color represented in each color model

カラープロフィールは、Figmaで色がどのようにレンダリングされるかに影響します。デフォルトのカラープロフィールとして、デザインファイルのカラープロフィールとして、またはアセットのエクスポート用に、sRGBまたはDisplay P3のいずれかを選択できます。カラープロフィールと色管理について詳しくはこちら →

カラーモデル

デフォルトでは、Hexモデルを使って色の値を表現します。色選択機能で他のモデルのカラー表記を見ることもできます。

Hex

Hexは、Figmaのデフォルトのカラーモデルで、16進数コードの色を指します。これは、RGB値を表す英数字の省略形です。

ウェブやデジタルデザインのクリエーターは、このカラーモデルの表記法を16進数コードと呼んでいます。

Hex値は8文字で、以下の構文を使用します。

#RRGGBBAA

RRは赤成分を表します。
GGは緑成分を表します。
BBは青成分を表します。
AAはアルファ成分を表します。alpha値00は完全に透明な色を表し、FFは完全に不透明な色を表します。

RGB

RGB (すなわちRed、Green、Blue)は、最も一般的に使用されているカラーモデルです。

モニターやスクリーンにレンダリングされるすべての色は、さまざまな量のRed、Green、Blueで構成されています。

RGB値は以下の構文で表されます。

(red, green, blue, alpha)

Red、Green、Blue (赤、緑、青)の値は、0から255の整数で色の強さを表します。
alpha値は、不透明度を、0.0 (完全に透明)から1.0 (完全に不透明)の間の数値で定義します。

HSB

Hue (色相)、Satuation (彩度)、Brightness (明度)は、RGBモデルの代替表現です。

これは、ディスプレイが色をとらえるやり方(RGB)とは異なり、人の目による色の感じ方に基づいた表現です。

HSB値は以下の構文で表されます。

(hue, saturation, brightness, alpha)

色相値は度数で計測され、0から360までの整数で表されます。
彩度値は0から100までの整数で表され、100が最も高彩度です。
明度値は0から100までの整数で表され、100が最も高明度です。
alpha値は、不透明度を、0.0 (完全に透明)から1.0 (完全に不透明)の間の数値で定義します。

HSL

Hue (色相)、Satuation (彩度)、Luminance (輝度)もまた、人の目がどのように色を認識するかに基づいたカラーモデルです。

HSBと同様、RGBモデルの代替表現です。HSBとHSLの主な違いは、彩度と明度の扱い方です。

HSL値は以下の構文で表されます。

(hue, saturation, luminance, alpha)

色相値は度数で計測され、0から360までの整数で表されます。
彩度値は0から100までの整数で表され、100が最も高彩度です。
輝度値は1から100までの整数で表され、100が最も高明度です。
alpha値は、不透明度を、0.0 (完全に透明)から1.0 (完全に不透明)の間の数値で定義します。

CSS

CSSカラーモデルでは、CSS構文を使用してRGBa値を表示または入力できます。

CSS値は以下の構文で表されます。

rgba(red, green, blue, alpha)

Red、Green、Blue (赤、緑、青)の値は、0から255の整数で色の強さを表します。
alpha値は、不透明度を、0.0 (完全に透明)から1.0 (完全に不透明)の間の数値で定義します。

開発者やエンジニアに色を伝えたい場合、CSSモデルでは、選択した色のCSSで使いやすい表記をコピーすることができます。これにより、フォーマットも含めてスタイルシートに直接貼り付けることができます。開発者へのハンドオフについて詳しくはこちらをご覧ください。

カラーモデル値の表示と調整

色選択機能で異なるカラーモデル間の色を表示し、更新します。

右サイドバーの[塗り]または[線]をクリックすると、色選択機能(カラーピッカー)が開きます。
[色相]と[不透明度]スライダーの下に、現在のカラーモデルと、対応する値が表示されます。
ドロップダウンを使ってカラーモデルを切り替えます。[Hex]、[HSB]、[HSL]、[CSS]、[RGB]から選択します:

Figmaでは、選択した表記法で値が表示されます。

また、利用可能なフィールドに直接値を入力して色を調整することもできます。

RGB、HSL、HSBカラーモデルには、alpha値用の独立したパーセンテージフィールドがあります。
CSSモデルには、alpha値を0.0から1.0の間の数値で含める必要があります。
Hexの場合は、次のどちらかを選ぶことができます。
- 6桁の16進数コードを入力し、alpha値の調整には別のパーセンテージフィールドを使用する
- 最後の2桁にalpha値を含む8桁の16進コードを入力する

···

カラーモデル

Hex

RGB

HSB

HSL

CSS

カラーモデル値の表示と調整