WEBカラーについて

WEBカラーについて

webページの背景やテキスト色は、
red(赤)blue(青)などのキーワードを使って指定することができます。

それ以外にも、赤(R)、緑(G)、青(B)の
三原色を数値で指定する方法などがあります。
この方法は赤・緑・青の頭文字をとってRGBと呼ばれてます。

RGBを使う場合は「#〇〇〇〇〇〇」のように16進数を使って、
表示する方法が基本的には使われてます。
まー簡単にいうと、「#〇〇〇〇〇〇」の部分をカラーチャートから
コピペして使おうねって事ですw

RGBA値の使い方

RGBA値というのは、
RGBに透明度が指定できるalpha(アルファ)値を追加した形式です。
つまりRGBA値を使うと「色指定と透過ができるよ」ってこと。

RGBA値の書き方

rgba(128,128,128,1) 背景で使う場合の書き方
.example{background:rgba(128,128,128,1);}

RGBA値の透明度は 0(完全に透明)~1(完全に不透明)の数値を使って指定できます。
例えば、色を半透明にしたいと言う時は、
上の「RGBA値の書き方」の「1」の部分を「0.5」と変えてあげると、
指定した色が半透明になります。

薄い透明にしたい時は「1」の部分を「0.1」に変えてあげると
かなり薄い透明になります。
ちなみに、RGBA値をサポートしてないブラウザでは、
透明度だけでなく色指定も認識されず無効となるので注意して下さい。
それと、RGBA値で色を指定する場合は
必ず「,」(カンマ)で区切りって下さいね

16進数のカラーコードはわかるけど、色をちょっと透明にしたいから
RGBA値のコードを知りたい!って時が来ると思います。
というか、必ず来ますw
なのでそういう時は、
16進数をRGBA値に変換してあげます。

変換と言っても、コピペするだけなのでとっても簡単!
1秒で終わります。

下のサイトで16進数とRGBA値を変換できるので、
ご参考までに(^-^)

16進数・RGB・RGBAカラーコード変換ツール

それと、背景の画像を透明にしたい!って時は、

カラーネームで指定できるhtml色見本とコード

※コントロールかつ+キーで拡大して見るように!

webセーフカラー一覧(全216色)

webセーフカラーとはNetscape社が発案した、 8ビットカラー全256色のうち 40色を除いた216色のことです。
なぜwebセーフカラーがあるかというと、 サイト制作者と訪問者とでは、環境によって色の見え方が変わることがあります。 というより、サイトを見る人のパソコンやosの違いによって 指定した色が正しく表示されない場合があります。 そこでNetscape社は、Netscape Navigator(Netscapeのブラウザ)を使えば、 どんな環境でも同じ色が表示できる216色(webセーフカラー)を発案しました。 つまりwebセーフカラーを使えば、 どんな環境でも同じ色が表示できるよってことです。
ここからは豆知識なんですけどw webセーフカラーはRGBの三原色を6段階で分けた組み合わせの色です。
16進数で「00、33、66、99、cc、ff」 10進数で「0、51、102、153、204、255」 パーセンテージで「0%、20%、40%、60%、80%、100%」 というような6段階となってます。 これを6×6×6で216色となるわけです。 表を見ると横6縦6が6ブロック分あるので わかりやすいと思います。 といってもどうでもいい知識ですねw
それと環境によって色が変わるなら、 webセーフカラー以外は使わない方がよくね?って思うかもしれません。 ですが、今の時代のモニターは16ビットから32ビットなわけです。 しかも画像(jpeg)などはwebセーフカラー以上の色を余裕で使ってますので、 特に気にしない方が良いです。
色の違いを気にするなら、 まずはモニターを買い替えた方が無難です。 モニターが古くなると青色が強くなってきますし、 全然色の見え方が違います。 なのでwebセーフカラーにこだわりすぎなくても大丈夫ですよ(^^(^^♪
以上「webセーフカラーチャートと豆知識」でしたー(^^)/

パステルカラー色見本とコード一覧(300色)

パステルカラーとは彩度が低く、明度が高い色のことをいいます。
彩度とは色の鮮やかさのことで、明度とは色の明るさのことです。 かんたんに言うと、原色に白をまぜた淡く優しいトーン色が パステルカラーという事になります。
web制作やブログカスタマイズでもパステルカラーは、 よく使う色だと思います。 枠の中の背景やテーブルの背景には、 かなり薄いパステルカラーを使用してるサイトを見かける事も あるので、 ぜひ使って見て下さいね(^^♪
以上「パステルカラーのコード一覧と色見本」でしたー(^^)/

モノトーンカラーのhtml色コード全256色

ビビットカラー一覧

ビビッドカラーのビビッド(vivid)とは、 鮮やかな、強烈な、生き生きとしたという意味です。 いわゆる彩度が高くて、原色に近いような色の事をいいます。
こうして一覧で見ると鮮やかな、原色的な色が多いですよね。
ちなみにビビッドカラーのみでwebサイトやブログを作る事はないと思いますが、 ビビッドカラーをアクセントとして使うと綺麗になります。 といっても、私一人で運営してるサイトだと適当にしちゃいますけどw
以上、「ビビッドカラーのカラーチャート」でした(^^♪

大手サイトで使われているテキストリンクの色一覧

html色コード日本の伝統色

中国の伝統色のカラーコード一覧

 

フランス伝統色のwebカラーコード330色

 

世界の洋色の名前413選【htmlカラーコード付き】