株式会社エニキャリ様のサイトを作成していた時のこと。

Figmaのファイル上でのカラーコードは#F78733なのですが、

コーディングしてChromeで見てみると、なんか違う…。
詳しくディベロッパーツールとスポイトツールで見てみると、

cssは

#F78733なのに、表示は

#F78732になっていました。

こちら原因がわからずかなり迷宮入りしていたのですが、Chromeのカラープロファイル設定が原因であると判明したので、もし似たような事象にお悩みの方がいらっしゃったら試してみてください。

(エニキャリ様のサイトについてはこちら)

カラープロファイル設定の変更

設定は簡単。

カラープロファイル設定を開く

まず、アドレスバーに

chrome://flags/#force-color-profile

を入れてカラープロファイル設定を開きます。

この、黄色でハイライトされている部分がカラープロファイル設定です。

sRGBに変更する

次に、この設定でsRGBを選択します。

そしてChromeを再起動すれば完了です!

サイトのコーディング後は必ず色の確認を

今回はChromeのカラープロファイル設定の問題だったため、クライアントへの影響はありませんでした。
しかし、本当にコーディングした際の色が間違っている場合もあるため、仮アップ時などに必ず色の確認もするようにしましょう!

はてブはてブ 保存 LINE送る

関連キーワード

#カラープロファイル

ブログを書いてる人

アバター画像

momo

株式会社桃花源のCEO兼デザイナー。このブログでは、Webデザインに関する個人的なメモを、一部公開してお届けしています。

Home