どーも！とーますです。

弊社では、Webデザイン制作にデザインツールの「Figma」を使用しています。

ある日、デザインデータとテストアップしたサイトを見比べると、
「Figmaで見たカラーと、ブラウザソフトで見たカラーが違う！」
という現象が起こりました。

ブラウザのカラーは、Figmaで見たカラーよりもくすんで（彩度が低い）見えます。
このような違いが起きる主な原因は、Figmaのカラープロファイル設定です。

FigmaのカラープロファイルをsRGBに設定しよう

Figmaでは、次の2種類のカラープロファイルを選ぶことができます。
・sRGB
・Display P3

「Display P3」は「sRGB」よりも広い色域を持ち、Apple社のiPhoneやMacのRetinaディスプレイ向けの設定です。
そのため、通常のディスプレイで表示すると色がくすんで見えることがあります。

一方、「sRGB」は一般的なディスプレイやWebブラウザで最も広く使われているカラープロファイルです。
Webサイトをデザインする場合は、sRGBの設定が最適です。

設定方法

画面左上のメニューから
[基本設定]　>　[カラープロファイル]　を開く
表示された設定画面で「sRGB」を選択
（※下記スクリーンショットもご参照ください）

Figmaでは、初期設定で「sRGB」が選択されています。
そのため、Webデザインのみを行う場合は、基本的に変更する必要はありません。
また、一度設定すると新規作成時もカラープロファイル設定が引き継がれます。

まとめ

Figmaでカラープロファイルを「sRGB」に設定すると、
Figma上のカラーとブラウザ上のカラーが一致してくれます。

「Figmaとブラウザで色が違う！」と感じた方は、
ぜひこの設定をお試しください。

それじゃあね～～～