W3.CSSカラーライブラリ
カラーライブラリ
カラーライブラリは、安全基準、高速道路の色、ファッションの色、カモフラージュの色など、一般的に使用される色の値を含む小さなCSSファイルです。
スクールバス
ファルコンリッジパークウェイ
止まる
カラーライブラリの使用方法
カラーライブラリは使いやすいです。Webページにカラーライブラリへのリンクを追加するだけです。
<link rel="stylesheet"
href="https://www.w3schools.com/lib/w3-colors-highway.css">
次に、色付けするHTML要素にクラス名を追加します。
<div class="w3-highway-schoolbus">Schoolbus</div>
<div
class="w3-highway-green">Falcon Ridge Parkway</div>
<div
class="w3-highway-red">STOP</div>
米国国道の色
w3-高速道路-茶色 |
w3-高速道路-赤 |
w3-高速道路-オレンジ |
w3-高速道路-スクールバス |
w3-高速道路-黄色 |
w3-ハイウェイグリーン |
w3-ハイウェイブルー |
高速道路の色は、連邦規格595で定義されています。
米国の安全色
w3-セーフティレッド |
w3-安全性-オレンジ |
w3-安全-黄色 |
w3-セーフティグリーン |
w3-セーフティブルー |
w3-安全-紫 |
米国の安全色は、 連邦規格595で定義されています。
ヨーロッパの信号色
w3-シグナルイエロー |
w3-シグナルオレンジ |
w3-信号-赤 |
w3-シグナルバイオレット |
w3-シグナルブルー |
w3-シグナルグリーン |
w3-シグナルグレー |
w3-シグナルブラウン |
w3-シグナルホワイト |
w3-シグナルブラック |
例
<div class="w3-signal-red">Stop</div>
<div
class="w3-signal-yellow">Wait</div>
<div class="w3-signal-green">Go</div>
CSSをダウンロード»
ヨーロッパの信号色は、 RAL色標準で定義されています。
鮮やかな色
w3-鮮やかなピンク |
w3-鮮やかな赤 |
w3-鮮やかなオレンジ |
w3-鮮やかな黄色 |
w3-鮮やかな緑 |
w3-鮮やかな青 |
w3-鮮やかな紫 |
w3-鮮やかな紫 |
w3-鮮やかな黒 |
w3-鮮やかな白 |
w3-鮮やかな黄色がかったピンク |
w3-鮮やかな赤みがかったオレンジ |
w3-鮮やかなオレンジ-黄色 |
w3-鮮やかな緑がかった黄色 |
w3-鮮やかな黄緑色 |
w3-鮮やかな黄緑色 |
w3-鮮やかな青みがかった緑 |
w3-鮮やかな緑がかった青 |
w3-鮮やかな紫がかった青 |
w3-鮮やかな赤みがかった紫 |
w3-鮮やかな紫がかった赤 |
例
<div class="w3-vivid-red">
<p>London is the most populous city in the
United Kingdom,
with a metropolitan area of over 9 million
inhabitants.</p>
</div>
CSSをダウンロード»
鮮やかな色はISCC-NBSで定義されています。
食用色素
w3-フードアップル |
w3-food-aspargus |
w3-食品-アプリコット |
w3-食品-ナス |
w3-食品-アボカド |
w3-食品バナナ |
w3-フードバター |
w3-食品-ブルーベリー |
w3-フードチェリー |
w3-食品-チョコレート |
w3-食品-クランベリー |
w3-フードコーヒー |
w3-食品-卵 |
w3-フードグレープ |
w3-フードキウイ |
w3-フードレモン |
w3-フードライム |
w3-フードマンゴー |
w3-食品-きのこ |
w3-フードマスタード |
w3-フードミント |
w3-フードオリーブ |
w3-フードオレンジ |
w3-食品-エンドウ豆 |
w3-フードピーチ |
w3-食品梨 |
w3-食品-ピスタチオ |
w3-フードプラム |
w3-食品-ラズベリー |
w3-食品サフラン |
w3-フードサーモン |
w3-食品スペアミント |
w3-フードスカッシュ |
w3-食品-イチゴ |
w3-食品-トマト |
w3-食品-小麦 |
w3-フードワイン |
カモフラージュカラー
w3-カモブラウン |
w3-カモレッド |
w3-迷彩オリーブ |
w3-迷彩フィールド |
w3-迷彩地球 |
w3-迷彩砂 |
w3-迷彩タン |
w3-迷彩砂岩 |
w3-迷彩-ダークグリーン |
w3-迷彩の森 |
w3-カモライトグリーン |
w3-カモグリーン |
w3-迷彩ダークグレー |
w3-カモグレー |
w3-カモブラック |
例
<div class="w3-camo-earth">Camouflaged Truck</div>
<div
class="w3-camo-grey">Camouflaged Ship</div>
CSSをダウンロード»
カモフラージュの色は、 連邦規格595で定義されています。