CSS
色

構文

• 色：#rgb
• 色：#rrggbb
• color：rgb [a]（<red>、<green>、<blue> [、<alpha>]）
• 色：hsl [a]（<色相>、<彩度％>、<明度％> [、<α>]）
• 色： colorkeyword / *緑、青、黄、オレンジ、赤、..etc * /

カラーキーワード

ほとんどのブラウザでは、色のキーワードを使用して色を指定できます。たとえば、要素のcolorを青に設定するには、 blueキーワードを使用します。

.some-class {
    color: blue;
}

CSSキーワードはsensitive-小文字をされていないblue 、 BlueとBLUE中のすべての結果でしょう#0000FF 。

カラーキーワード

色の名前	16進値	RGB値	色
AliceBlue	＃F0F8FF	rgb（240,248,255）
アンティークホワイト	＃FAEBD7	rgb（250,235,215）
アクア	＃00FFFF	rgb（0,255,255）
アクアマリン	＃7FFFD4	rgb（127,255,212）
アズール	＃F0FFFF	rgb（240,255,255）
ベージュ	＃F5F5DC	rgb（245,245,220）
ビスク	＃FFE4C4	rgb（255,228,196）
ブラック	＃000000	rgb（0,0,0）
BlanchedAlmond	#FFEBCD	rgb（255,235,205）
青	＃0000FF	rgb（0,0,255）
青紫色	＃8A2BE2	rgb（138,43,226）
褐色	＃A52A2A	rgb（165,42,42）
BurlyWood	＃DEB887	rgb（222,184,135）
CadetBlue	＃5F9EA0	rgb（95,158,160）
Chartreuse	＃7FFF00	rgb（127,255,0）
チョコレート	＃D2691E	rgb（210,105,30）
コーラル	＃FF7F50	rgb（255,127,80）
コーンフラワーブルー	＃6495ED	rgb（100,149,237）
トウモロコシの毛	＃FFF8DC	rgb（255,248,220）
真紅	＃DC143C	rgb（220,20,60）
シアン	＃00FFFF	rgb（0,255,255）
濃紺	＃00008B	rgb（0,0,139）
ダークシアン	＃008B8B	rgb（0,139,139）
DarkGoldenRod	＃B8860B	rgb（184,134,11）
暗灰色	＃A9A9A9	rgb（169,169,169）
濃い灰色	＃A9A9A9	rgb（169,169,169）
濃い緑色	＃006400	rgb（0,100,0）
ダークカーキ	＃BDB76B	rgb（189,183,107）
ダークマジェンタ	＃8B008B	rgb（139,0,139）
DarkOliveGreen	＃556B2F	rgb（85,107,47）
ダークオーレンジ	＃FF8C00	rgb（255,140,​​0）
DarkOrchid	＃9932CC	rgb（153,50,204）
暗赤色	＃8B0000	rgb（139,0,0）
ダークサルモン	＃E9967A	rgb（233,150,122）
DarkSeaGreen	＃8FBC8F	rgb（143,188,143）
DarkSlateBlue	＃483D8B	rgb（72,61,139）
DarkSlateGray	＃2F4F4F	rgb（47,79,79）
DarkSlateGrey	＃2F4F4F	rgb（47,79,79）
ダークターコイズ	＃00CED1	rgb（0,206,209）
ダークバイオレット	＃9400D3	rgb（148,0,211）
深いピンク	＃FF1493	rgb（255,20,147）
DeepSkyBlue	＃00BFFF	rgb（0,191,255）
DimGray	＃696969	rgb（105,105,105）
DimGrey	＃696969	rgb（105,105,105）
DodgerBlue	＃1E90FF	rgb（30,144,255）
FireBrick	＃B22222	rgb（178,34,34）
FloralWhite	＃FFFAF0	rgb（255,250,240）
緑の森林	＃228B22	rgb（34,139,34）
フクシア	＃FF00FF	rgb（255,0,255）
ゲインズボロ	#DCDCDC	rgb（220,220,220）
ゴーストホワイト	＃F8F8FF	rgb（248,248,255）
ゴールド	＃FFD700	rgb（255,215,0）
ゴールデンロード	＃DAA520	rgb（218,165,32）
グレー	＃808080	rgb（128,128,128）
グレー	＃808080	rgb（128,128,128）
緑	＃008000	rgb（0,128,0）
黄緑	＃ADFF2F	rgb（173,255,47）
甘露	＃F0FFF0	rgb（240,255,240）
ホトピンク	＃FF69B4	rgb（255,105,180）
IndianRed	＃CD5C5C	rgb（205,92,92）
インジゴ	＃4B0082	rgb（75,0,130）
象牙	＃FFFFF0	rgb（255,255,240）
カーキ	＃F0E68C	rgb（240,230,140）
ラベンダー	＃E6E6FA	rgb（230,230,250）
LavenderBlush	＃FFF0F5	rgb（255,240,245）
芝生緑	＃7CFC00	rgb（124,252,0）
レモンシフォン	#FFFACD	rgb（255,250,205）
ライトブルー	＃ADD8E6	rgb（173,216,230）
ライトコラル	＃F08080	rgb（240,128,128）
LightCyan	＃E0FFFF	rgb（224,255,255）
LightGoldenRodYellow	＃FAFAD2	rgb（250,250,210）
ライトグレー	＃D3D3D3	rgb（211,211,211）
ライトグレー	＃D3D3D3	rgb（211,211,211）
ライトグリーン	＃90EE90	rgb（144,238,144）
ライトピンク	＃FFB6C1	rgb（255,182,193）
ライトサルモン	＃FFA07A	rgb（255,160,122）
LightSeaGreen	＃20B2AA	rgb（32,178,170）
LightSkyBlue	＃87CEFA	rgb（135,206,250）
LightSlateGray	＃778899	rgb（119,136,153）
LightSlateGrey	＃778899	rgb（119,136,153）
LightSteelBlue	＃B0C4DE	rgb（176,196,222）
ライトイエロー	＃FFFFE0	rgb（255,255,224）
ライム	＃00FF00	rgb（0,255,0）
ライムグリーン	＃32CD32	rgb（50,205,50）
リネン	＃FAF0E6	rgb（250,240,230）
マゼンタ	＃FF00FF	rgb（255,0,255）
マルーン	＃800000	rgb（128,0,0）
ミディアムアクアマリン	＃66CDAA	rgb（102,205,170）
ミディアムブルー	＃0000CD	rgb（0,0,205）
MediumOrchid	＃BA55D3	rgb（186,85,211）
ミディアムパープル	＃9370DB	rgb（147,112,219）
ミディアムシーグリーン	＃3CB371	rgb（60,179,113）
MediumSlateBlue	＃7B68EE	rgb（123,104,238）
MediumSpringGreen	＃00FA9A	rgb（0,250,154）
ミディアムターコイズ	＃48D1CC	rgb（72,209,204）
MediumVioletRed	＃C71585	rgb（199,21,133）
ミッドナイトブルー	＃191970	rgb（25,25,112）
ミントクリーム	＃F5FFFA	rgb（245,255,250）
ミスティローズ	＃FFE4E1	rgb（255,228,225）
モカシン	＃FFE4B5	rgb（255,228,181）
ナバホワホワイト	#FFDEAD	rgb（255,222,173）
海軍	＃000080	rgb（0,0,128）
オールドレース	＃FDF5E6	rgb（253,245,230）
オリーブ	＃808000	rgb（128,128,0）
OliveDrab	＃6B8E23	rgb（107,142,35）
オレンジ	＃FFA500	rgb（255,165,0）
オレンジレッド	＃FF4500	rgb（255,69,0）
蘭	＃DA70D6	rgb（218,112,214）
PaleGoldenRod	＃EEE8AA	rgb（238,232,170）
薄緑色	＃98FB98	rgb（152,251,152）
ペールターコイズ	#AFEEEE	rgb（175,238,238）
PaleVioletRed	＃DB7093	rgb（219,112,147）
パパイヤウィップ	＃FFEFD5	rgb（255,239,213）
PeachPuff	＃FFDAB9	rgb（255,218,185）
ペルー	＃CD853F	rgb（205,133,63）
ピンク	＃FFC0CB	rgb（255,192,203）
梅	＃DDA0DD	rgb（221,160,221）
パウダーブルー	＃B0E0E6	rgb（176,224,230）
紫の	＃800080	rgb（128,0,128）
レベッカパープル	＃663399	rgb（102,51,153）
赤	＃FF0000	rgb（255,0,0）
RosyBrown	＃BC8F8F	rgb（188,143,143）
ロイヤルブルー	＃4169E1	rgb（65,105,225）
サドルブラウン	＃8B4513	rgb（139,69,19）
サーモン	＃FA8072	rgb（250,128,114）
SandyBrown	＃F4A460	rgb（244,164,96）
海緑	＃2E8B57	rgb（46,139,87）
シーシェル	＃FFF5EE	rgb（255,245,238）
シエナ	＃A0522D	rgb（160,82,45）
銀	＃C0C0C0	rgb（192,192,192）
空色	＃87CEEB	rgb（135,206,235）
SlateBlue	＃6A5ACD	rgb（106,90,205）
SlateGray	＃708090	rgb（112,128,144）
SlateGrey	＃708090	rgb（112,128,144）
雪	#FFFAFA	rgb（255,250,250）
SpringGreen	＃00FF7F	rgb（0,255,127）
スチールブルー	＃4682B4	rgb（70,130,180）
タン	＃D2B48C	rgb（210,180,140）
ティール	＃008080	rgb（0,128,128）
アザミ	＃D8BFD8	rgb（216,191,216）
トマト	＃FF6347	rgb（255,99,71）
ターコイズ	＃40E0D0	rgb（64,224,208）
バイオレット	＃EE82EE	rgb（238,130,238）
小麦	＃F5DEB3	rgb（245,222,179）
白	#FFFFFF	rgb（255,255,255）
白い煙	＃F5F5F5	rgb（245,245,245）
黄	＃FFFF00	rgb（255,255,0）
YellowGreen	＃9ACD32	rgb（154,205,50）

指定された色に加えて、完全透明な黒を表すキーワードtransparentもありますrgba(0,0,0,0)

16進値

バックグラウンド

CSSの色は、色の赤、緑、青の成分を表すヘックスの三つ組として表現することもできます。これらの値のそれぞれの範囲内の数を表し00にFF 、または0に255進数で。大文字または小文字のHexidecimal値を使用できます（つまり、 #3fc = #3FC = #33ffCC ）。ブラウザは#369を#336699解釈します。それが意図したものではなく#306090を望むなら、明示的に指定する必要があります。

16進表記で表現できる色の総数は、256 ^ 3または16,777,216です。

構文

color: #rrggbb;
color: #rgb

.some-class {
    /* This is equivalent to using the color keyword 'blue' */
    color: #0000FF;
}

.also-blue {
    /* If you want to specify each range value with a single number, you can!
       This is equivalent to '#0000FF' (and 'blue') */
    color: #00F;
}

16進表記は、 W3Cの「数値カラー値」ごとにRGBカラーフォーマットでカラー値を指定するために使用されます。

インターネット上では、16進数（または単純に16進数）のカラー値を調べるためのツールがたくさんあります。

お気に入りのWebブラウザで「 16進カラーパレット 」または「 16進カラーピッカー 」を検索して、さまざまなオプションを見つけましょう！

16進値は常にシャープ記号（＃）で始まり、最大6桁の数字で、大文字と小文字を区別しません。つまり、大文字小文字を区別しません。 #FFC125と#ffc125は同じ色です。

rgb（）表記法

RGBは、赤、緑、青の光の混合物としての色を表す加法的な色モデルである。本質的に、RGB表現は、16進表記の10進表現に相当します。 16進数では、各数値の範囲は00〜FFで、10進数で0〜255、パーセントで0〜-100％に相当します。

.some-class {
    /* Scalar RGB, equivalent to 'blue'*/
    color: rgb(0, 0, 255);
}

.also-blue {
    /* Percentile RGB values*/
    color: rgb(0%, 0%, 100%);
}

構文

rgb(<red>, <green>, <blue>)

hsl（）表記法

HSLは、 色相 （「どの色」）、 彩度 （「どのくらいの色」）、 明度 （「どれくらいの白」）を表します。

色相は0°〜360°（単位なし）の角度で表され、彩度と明度はパーセンテージで表されます。

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

構文

color: hsl(<hue>, <saturation>%, <lightness>%);

ノート

• 0％の彩度は常にグレースケールの色を生成します。色相を変更しても効果はありません。

• 0％の明度は常に黒を生成し、100％は常に白を生成します。色相または彩度を変更しても効果はありません。

currentColor

currentColorは、現在の要素の計算されたカラー値を返します。

同じ要素で使用する

currentColorは、 colorプロパティがred設定されているため、赤色に評価されred 。

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

この場合、ボーダーにcurrentColorを指定すると、それを省略すると同じ結果が生成されるため、冗長性が高くなります。 より特定のセレクタのために上書きされる場合は、同じ要素内のborderプロパティの中でのみcurrentColorを使用してください 。

これは計算された色なので、次の例では境界線が緑色になります。これは、2番目のルールが1番目のルールを上書きするためです。

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

親要素から継承されます。

親の色が継承されます。ここではcurrentColorは「青」と評価され、子要素の境界線の色が青色になります。

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColorは、background-colorなど、通常colorプロパティから継承しない他のルールでも使用できます。下の例では、親として設定されている色を背景として使用している子を示しています。

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}

考えられる結果：

rgba（）表記法

rgb（）表記法と似ていますが、追加のアルファ（不透明度）値が付いています。

.red {
    /* Opaque red */
    color: rgba(255, 0, 0, 1);
}

.red-50p {
    /* Half-translucent red. */
    color: rgba(255, 0, 0, .5);
}

構文

rgba(<red>, <green>, <blue>, <alpha>);

hsla（）表記法

hsl（）表記法に似ていますが、アルファ（不透明度）値が追加されています。

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

構文

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);