1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSS 色

Posted at

#はじめに
CSSの色関連の備忘録。

##色の指定方法
CSSの色の指定は下記の指定の方法がある。

・16進数
・キーワード
・rgb()、rgba()
・hsl()、hsla()

###16進数での色指定。

RGBの各値を16進数で指定する方法。

####RGBとは?
光の三原色である赤、緑、青の組み合わせ。

例)

/* 赤色 */
#ff0000

/* 黄緑 */
#00FF00

/* 青 */
#0000FF

RGBの各値を示す2桁ずつが同じ数字の繰り返しの場合、重複する1桁を省略して、3桁で表現できる。

例)

/* 赤色 */
#f00

/* 黄緑 */
#0F0

/* 青 */
#00F

###キーワード
英語の色の名前で指定することも可能。

基本色+拡張カラーキーワードがあり、150色以上の色が指定可能。
16進数の対応表が調べればでるので使う場合は、参照すること。

例)

/* 白 */
white

/* 黒 */
black

###rgb(), rgba()
rgb()という関数形式の指定方法を使用するとRGBの値を10進数で指定可能。
引数には左から赤のR、緑のG、青のBの値が指定可能。

rgb(R,G,B)

255を100%とする%値で指定も可能。

#####指定できる値の範囲
10進数で0~255、
%値で0%~100%

例)

/* 赤 */
rgb(255,0,0)
rgb(100%,0,0)

/* 黄緑 */
rgb(0,255,0)
rgb(0,100%,0)

/* 青 */
rgb(0,0,255)
rgb(0,0,100%)

rgba()はRGBの値に加えてAlpha(不透明度のこと)の値を指定できる。
不透明度は0.0~1.0の範囲の数値で指定できる。(整数でも少数でも可能)

0.0で完全透明
1.0で完全不透明

例)

/* 赤の半透明 */
rgba(255,0,0,0.5)

###hsl(),hsla()

hslは以下の略。
hue(色相)
saturation(彩度)
lightness(明度)

色相、彩度、明度の順で指定する。

彩度と明度は0%から100%のパーセント値で指定する。

色相は色相環(カラーサークル)の角度を示す数値(単位なし)で指定する。

参考

例)

/* 赤 */
hsl(0,100%,50%)

hsla()は、rgba()と同じくAlpha(不透明度)の値を指定できる。
0.0~1.0の範囲で不透明度の指定が可能。

例)

/* 半透明の赤 */
hsla(0,100%,50%,0.5)
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?