「Color Tool」ブログの配色やカラーコードを調べる方法

Color Tool - Material Design

Create and share color palettes for your UI, and measure the accessibility of any color combination.

  material.io

Google提供の配色ツールが便利だったので紹介する。簡単にカラーコードが調べられるのでブログテーマのカスタマイズが捗りそうだ。

「Color Tool」のインターフェースは物凄くシンプル。Googleはマテリアルデザイン激推しらしいけど、一般的なブログカスタマイズにも全然使えるツールだと思う。

今回は、Bloggerの無料テーマ「Vaster2」の見出し（h2）の配色を変更するために使用してみた。

本来はカラースキーム設計におけるUIデザインなどを吟味するものだろう。

Color Toolのカスタムパレットが便利

「Color Tool」では予め標準パレットが準備されている。

そして基本色に対して、LightカラーとDarkカラーが自動的にコーディネートされる。

よりイメージに近い色を探し出したい場合は、カスタムパレットを使うことになる。

右上の色相環ツール？とサイドのスライダーで色合いを自由に調合できる。

使ってみた感じでは、これで作れない色はないといった感じだ。

Accessibilityタブに切り替えれば、こんな感じでテキストとの兼ね合いもチェックできる。

ブログのメニューや見出しのテキストの配色にも役立だろう。

Codepenを使えばHTML、CSS、JavaScriptの確認（取得）もできる。

興味のある人は、さっそく使ってみよう。