ここぽんのーと

コードとデザインの境界に生きるエンジニアの、雑多な記録帳。

Chrome開発ツールで、CSSの色空間表示を切り替える

2014/01/08, cocopon

Google ChromeをWeb開発に利用している場合、「表示→開発/管理→デベロッパーツール」で開発ツールを開けば、CSSの色指定を確認・編集できます。

2014-01-08_20_53_55-5

「#rrggbbをHSLで表示」なんて色空間の表示切り替えもできるのですが、過去のどこかのタイミングで操作方法が変わったんですよね。

現在は、色の付いた四角を「Shift + クリック」です。
2回ほどShift + クリックすると…。

2014-01-08 21.01.10

RGBになりました。もういっちょShift + クリックすると…。

2014-01-08 21.01.17

HSLになりました。RGBより直感的でよいですね。

Shiftを押さずに色付き四角をクリックすると色の変更になりますが、このときの表記にも反映されます。

2014-01-08 21.07.19

「Shift + クリック」便利ですね。