HTMLカラーコードやRGBを調べられるツール・サイト一覧
この記事では、CSSやデザインツールで使えるHTMLカラーコードやRGBコードを調べられるサイト・ツールを何個か紹介します。
ブックマークに登録しておくと便利です。
本記事では、以下のサービス・サイトを紹介します。気に入ったサイトがあれば、ブックマークに登録すると、すぐにアクセスできます。
「CSSでサイトをカスタマイズしたいけど、好みの色のHTMLカラーコードやRGB値が分からない！」といった方、参考にしてみてください。どれも無料・会員登録不要で利用できます。
HTMLカラーコードやRGBが分かるツール・サイト
Googleカラー選択ツール
Google公式のカラー選択ツールです。
https://g.co/kgs/eEDi4s「Google カラー選択ツール」と検索すると、検索結果に表示されます。カラーパレット内にある好みの色をマウスクリックします。その下にカラー情報が表示されます。
HEXがHTMLカラーコードです。コピーボタンでクリップボードにコピーできます。その下にRGBやそのほかの情報が記載されています。
Online Color Picker
サイトにアクセスすると、中央にカラーパレット、背景色が選択した色になっているページが開きます。
https://colorpicker.me/#2ab3fdマウスをクリックすることで、背景色が選択した色に変わります。目立つので、一目でどんな色か確認しやすいです。
RGBだけでなく、色相、彩度、明度なども調整できます。
| Hue | 色相 |
| Saturation | 彩度 |
| Lightness | 明度 |
| Value | 値 |
| Hex Code | HTMLカラーコード |
HTMLカラーコード
カラーチャート、カラーパレットで選択できるサイトです。
https://html-color-codes.info/japanese/サイトにアクセスすると、ファーストビューにカラーチャートが表示されます。好きな色のマスをクリックすると、その下にカラーコードが表示されます。
ページをスクロールすると、カラーピッカーが表示されます。
原色大辞典
様々な色を調べられるサイトです。
https://www.colordic.org/search色の名前や、イメージで検索できます。
あざやかな、派手な「青」で検索してみました。ずらっと表示されます。HTMLカラーコードが記載されているので、そのままコピーして別の場所で利用できます。
クリックすると、その色の詳細情報を表示します。カラーコードだけでなく、RGBも確認できます。
カラーコード変換
HTMLカラーコードをRGBに変換できるツールです。その逆も可能です。
https://tech-unlimited.com/color.htmlサイトにアクセスして、変換したい色情報を入力します。HTMLカラーコードの場合は、ハッシュタグを除いた数字のみ入力します。「変換する」をクリックします。
その下に、色のプレビューと、RGB値、RGBA、HSV値が表示されます。
感想
以上、HTMLカラーコードやRGBをサクっと調べられるサービス・サイトの紹介でした。
余談ですが、ウェブサイトにCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を使うことで、サイトをカスタマイズできます。TwitterやYouTubeなど、好きなサイトを自分好みに改造できます。
https://www.naporitansushi.com/stylebot/