🎨 Webカラー一覧

CSS名前付きカラー全147色を一覧表示。カラーカードをクリックするとHEX値をコピーできます。名前検索、カテゴリフィルタ、色相・明度ソートに対応。

使い方・活用例

  • CSSで使える名前付きカラーを一覧から素早く確認
  • カラーカードをクリックしてHEX値をコピーし、デザインツールやCSSに貼り付け
  • 色相順・明度順ソートで似た色を比較しながら最適な色を選定
  • カテゴリフィルタで赤系・青系など目的の色調だけを表示

Webカラー一覧とは

Webカラー一覧は、CSS仕様で定義されている147色の名前付きカラーを全て網羅したリファレンスツールです。各色のカラー名・HEX値・RGB値をワンクリックで確認でき、HEX値をコピーすることもできます。さらに色相・明度によるソート機能や、カテゴリ別フィルタリングにより、目的の色を素早く見つけられます。

使い方ガイド

ページ上には全147色がグリッド状に表示されます。各カラーをクリックすると、カラー名・HEX値・RGB値・HSL値など詳細情報が表示されます。気に入った色のHEX値をワンクリックでコピーできるため、デザインコードに直接貼り付けられます。画面上部のフィルタやソート機能を使って、特定の色相や明度の色を絞り込むことも可能です。

活用シーン

Webサイトやアプリのデザイン制作時に、スタイルシートにCSSカラー名を使う際の参照に役立ちます。デザイナーと開発者のコミュニケーションで、「赤」ではなく正確な「Crimson」「Scarlet」などの色名を共有できます。プレゼンテーション資料の配色選定時に、Web標準の色を活用することで、異なるデバイスでの色の再現性が保証されます。ブランドカラーの定義時にも、Web標準に近い色を選定することでクロスプラットフォーム対応が容易になります。

知っておきたいポイント

CSS名前付きカラーは、ブラウザ間で統一された定義があるため、HEX値やRGB値よりも可読性が高く、保守性に優れています。全147色のうち、実は同じRGB値を持つ異なる名前が複数存在する場合があります。モニターの色表示品質によって、実際の見え方は異なるため、重要なデザインではHEX値での指定も並行して確認することが推奨されます。

よくある質問

CSS名前付きカラーとは何ですか？

CSS名前付きカラーは、CSSで使用できる事前定義された色名です。「red」「blue」「coral」など147色が標準で定義されており、HEXコードの代わりに色名をそのまま指定してスタイリングに使用できます。

全部で何色ありますか？

CSS Level 4で定義されている名前付きカラーは全部で147色です。基本的な赤・青・緑から、coral・salmon・lavenderなど多彩な色が含まれています。すべてのモダンブラウザで共通して使用できます。

HEX値をコピーするにはどうすればいいですか？

各カラーカードをクリックすると、そのカラーのHEX値が自動的にクリップボードにコピーされます。コピー完了時にはトースト通知が表示されます。

色相順ソートとは何ですか？

色相順ソートは、色のHSL色空間における色相（Hue）の値で並べ替える機能です。赤→オレンジ→黄→緑→青→紫の順に色が並ぶため、似た色同士をまとめて確認できます。

カテゴリフィルタはどのように分類されていますか？

赤系・オレンジ系・黄色系・緑系・青系・紫系・白系・グレー系の8カテゴリに分類されています。各色は色相と明度・彩度に基づいて自動的にカテゴリ分けされています。

名前付きカラーとHEXコードはどちらを使うべきですか？

どちらでも同じ結果になりますが、名前付きカラーはコードの可読性が高く直感的です。一方、HEXコードはデザインツールとの連携が容易で、名前付きカラーにない色も表現できます。プロジェクトの方針に合わせて使い分けるのが一般的です。

RGBやHSL値も表示されますか？

はい、各色のRGB値と16進HEX値が表示されます。クリックで簡単にコピーできるため、プログラミングやデザインで即座に活用できます。

色の透明度（アルファ値）は設定できますか？

基本表示では透明度設定はありませんが、表示されたHEX値をコピーしてCSSで『rgba()』や『opacity』を使い透明度を追加することで実現できます。

どのブラウザで使えますか？

Chrome、Firefox、Safari、Edgeなど主要ブラウザすべてに対応しています。インターネット接続があれば、ほとんどの環境でご利用いただけます。

特定の色を検索できますか？

はい、色名での検索機能があります。例えば『blue』で青系、『red』で赤系の色を抽出でき、目当ての色を素早く見つけられます。

Webセーフカラーとの違いは？

名前付きカラーは147色で、Webセーフカラーは216色の限定パレットです。名前付きカラーは覚えやすく記述しやすい点が利点で、Webセーフカラーは古いブラウザでの表示互換性を重視しています。

CSSコード以外での使用例は？

HTMLの『color』属性やJavaScriptの色指定、Webデザインの設計時のカラーピック、グラフィックツールでの色選択など、多くの場面で利用可能です。