色を設定しよう! カラーネームとRGB値

スポンサードリンク
レクタングル広告(大)

色の設定は2種類 カラーネームとRGB値

HTMLやCSSでは文字や罫線や背景等に色を設定することができます。
色の設定方法にはカラーネームという色の名前で設定する方法と、RGB値という特別な数値で設定する方法があります。

カラーネームでの設定

例えば、色を緑に設定したい場合はgreenという名前を、青に設定したい場合はblueという色の英語名で設定するのがカラーネームでの設定です。

下の表は代表的なカラーネームの設定です。

カラーネームを利用した色指定

カラーネーム 見本
black         
white         
red         
blue         
green         

RGB値での設定

色の名前を利用するカラーネームに対し、数値を利用して色指定を行うのがRGB値での設定です。例えば、赤色の指定は#ff0000、青の指定は#0000ff、等となります。カラーネームより多くの色を細かく指定できます。

RGB値は数値の前に#(シャープ)を付ける必要があり、#の後に6桁の数値を指定します。
数値は0-9までの数字だけでなくaからfまでのアルファベットを利用して数値とする16進数という数値を利用しています。

※RGBのRはRed、GはGreen、BはBlueという光の三原色の頭文字から成り立っており、光が無いと黒(#000000)となり、光が強いと白(#ffffff)となります。

下の表は代表的なカラーネームの設定の一部です。

RGB値を利用した色指定

RGB値 見本
#000000         
#ffffff         
#ff0000         
桃色 #f09199         
水色 #bce2e8         

色見本の活用

カラーネームやRGB値は種類も豊富な為、覚えるのは困難です。そこで、色見本サイト(下バナーをクリックすると移動します)の出番です。

色見本サイトではカラーネームやRGB値などと一緒に色合いが確認できて便利なので、是非活用して下さい。

原色大辞典(原色だけでなく、パステルカラーやビビッドカラーのページもあります)
2015013002_banner

スポンサードリンク
レクタングル広告(大)
レクタングル広告(大)

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)