スキップしてメイン コンテンツに移動

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

-

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • タイトル: 「Color Tool」ブログの配色やカラーコードを調べる方法
  • 最終更新: