ウェブカラー

索引トップ用語の索引ランキングカテゴリー

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2024/06/05 06:21 UTC 版)

CSSカラー

Cascading Style Sheetsでは、HTML 4仕様と同じ数（基本の16色）の色を定義している。またCSS 2、SVGおよびCSS 2.1ではsystem colorsと呼ばれる色が使えるが、これらの色はオペレーティングシステムのデスクトップで使っている色の値に名前をつけたものである。これらを使うとユーザーのOS環境に合わせた色を使うことができる^[13]。2004年現在、CSS3仕様ではこの機能が"depreated"とされているが、今後変更される可能性もある^[14]。

CSS3仕様ではまた、スタイルシートにHSL色空間を導入している。

CSSの例

/* RGB model */
p { color: #F00 } /* #rgb */
p { color: #FF0000 } /* #rrggbb */
p { color: rgb(255, 0, 0) } /* integer range 0 - 255 */
p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

/* RGB with alpha channel, added to CSS3 */
p { color: rgba(255, 0, 0, 0.5) } /* 0.5 opacity, semi-transparent */

/* HSL model, added to CSS3 */
p { color: hsl(0, 100%, 50%) } /* red */
p { color: hsl(120, 100%, 50%) } /* green */ 
p { color: hsl(120, 100%, 25%) } /* dark green */ 
p { color: hsl(120, 100%, 75%) } /* light green */ 
p { color: hsl(120, 50%, 50%) } /* pastel green */

/* HSL model with alpha channel */
p { color: hsla(120, 100%, 50%, 1) } /* green */
p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */
p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */

脚注

注釈

^ 2016年現在「簡単な数コマ程度の動画のための、手軽な広く普及しているフォーマット」が、いわゆるアニメーションGIFしか存在しないことから、GIFにするため写真等を256色に減色する必要がある、というのが2016年現在の数少ない減色作業の例であるが、そういった場合は画像からメディアンカット等の手法で適応的にパレットを決めたほうが良い。