HOME　＞　カラー

カラー

色を指定する　　（RGB値 or 色名）

ショートカット

説明
基本16色
Webセーフカラー216色

形式

色の指定

色は、RGB値 を16進数２桁ずつで指定する方法と、色名で指定する方法が主である。
スタイルシートの場合は、他に以下の方法で指定することが出来るがここでは詳細は省略する。
- RGB値 を16進数１桁ずつ指定する方法　　　　青の場合：　#00F
- RGB値 を10進数で指定する方法　　　　青の場合：　rgb(0,0,255)
- RGB値 を % で指定する方法　　　　青の場合：　rgb(0%,0%,100%)

RGB値による指定方法

R（red　赤）　G（green　緑）　B（blue　青）　の数値で色を指定する

光の３原色 である赤、緑、青の３つの光の量を調節することによって目に見える色が変化する。
混ぜれば混ぜるほど（光が強ければ強いほど）世界は明るく白くなり、
光がなければ世界は真っ黒になる。
R の数値が高ければ赤、G の数値が高ければ緑、B の数値が高ければ青みがかる。
R と G の数値が同時に高いと黄、G と B なら水色、R と B は紫がかる。
全ての数値が同じ場合は無彩色（白・グレー・黒）となる。
R・G・B の数値の差が激しいほど明るくケバケバしい派手な色となり、
差が少ないほど穏やかに淡くにごる。

光の３原色と色の３原色は違う

色の３原色は　マゼンタ、イエロー、シアン　の３つである。
この３つは逆に混ぜれば混ぜるほど黒く濁っていく。
パソコンの画面・セロハンを使って作ったスポットライト（光の３原色）と
印刷・絵の具（色の３原色）の違いによくたとえられる。
印刷したら色が全然違う！なんてことがあるのは色の表現方法が根本的に違うため。
（光をつねに使って表現しているパソコンの画面はとても鮮やかに見えるが...）

指定は主に 16進数が使われる

16進数というのは、0 1 2 3 4 5 6 7 8 9 A B C D E F の英数字を使って数を表す方法。
- 普通私達が日常に使っている10進数は、 0 ～ 10 の数字で数の大きさを表している。
  10進数では、9 の次は 10 に繰り上がって（2ケタになって）大きな数を表現していく。
- しかし　16進数では、9 の次は A になる。
  F （10進数では15になる）までいってようやく　10 に繰り上がる。
- 16進数の 100 は、10進数の 256 となる。
RGB値を　16進数によって指定するときの形は　# ～　となる。
- 0 に近ければ近いほど暗い色になり、F に近ければ近いほど明るい色になる。
- FF （10進数では 255）　がもっとも明るく　00 （10進数では 0）　がもっとも暗くなる。
- それぞれ　赤、緑、青に指定するので６桁の数字になる。

カラーネーム（色名）による指定方法

Netscape Navigator がカラーネームによる指定を定義している。（IE でも使用可）
RGB値による指定方法はパッと見てどんな色かわかりにくい。
カラーネーム指定はその色の名前を指定するのでわかりやすい。（でも英語だからどうかな？）
基本16色以外は正しく表示できないこともあるのでなるべく RGB値による指定がオススメ。
あまり使わないのでココでは詳細は省略します。

参考になるサイトたち

WEB COLOR 216　　　セーフカラーについて詳しい。カラーネームの見本も見やすい。
色のみじん切り　　　個人的にここの色見本がわかりやすくお気に入り。
Mariのいろえんぴつ　　　カラーサンプルやＨＰの配色などを並べた「いろずかん」が便利。
Color's　　　色についていろいろな知識が載ってる。見てて楽しい。
色いろいろ.com　　　株式会社デジトレック。色に関する情報を集めた「色の総合情報サイト」。
色に関してはこれらのサイトがとても参考になると思います。
カラーチャートをダウンロードしたりして自分なりに色を活用していってください。
下の見本と違ってとても使いやすいのがあちこちにあります♪

基本16色

基本16色とは

HTML4.01とXHTML1.0、CSS2で共通して正式に定義されている色名。
古いバージョンのブラウザやほぼ全ての環境において使える。

色見本

■　Black (#000000)
■　Gray (#808080)
■　Silver (#C0C0C0)
□　White (#FFFFFF)

■　Red (#FF0000)
■　Yellow (#FFFF00)
■　Lime (#00FF00)
■　Aqua (#00FFFF)
■　Blue (#0000FF)
■　Fuchsia (#FF00FF)

■　Maroon (#800000)
■　Olive (#808000)
■　Green (#008000)
■　Teal (#008080)
■　Navy (#000080)
■　Purple (#800080)

Webセーフカラー216

Webセーフカラーとは

Webセーフカラー とは、8bit（256色）のうち、MacintoshとWindowsで違う40色を除いた 216色。
Webセーフカラーを使うとより多くの環境で思ったとおり表示される。（一部例外はある）
可能ならとりあえずWebセーフカラーを指定した方が安心。
WebセーフカラーのRGB値は　　00 、 33 、 66 、 99 、 CC 、 FF を組み合わせている。
（10進数だと 0 、 51 、 102 、 153 、 204 、 255）

色見本

■　#000000	■　#333333	■　#666666	■　#999999	■　#CCCCCC	□　#FFFFFF
■　#FFCCCC ■　#FF9999 ■　#FF6666 ■　#FF3333 ■　#FF0000 ■　#CC0000 ■　#990000 ■　#660000 ■　#330000	■　#FFFFCC ■　#FFFF99 ■　#FFFF66 ■　#FFFF33 ■　#FFFF00 ■　#CCCC00 ■　#999900 ■　#666600 ■　#333300	■　#CCFFCC ■　#99FF99 ■　#66FF66 ■　#33FF33 ■　#00FF00 ■　#00CC00 ■　#009900 ■　#006600 ■　#003300	■　#CCFFFF ■　#99FFFF ■　#66FFFF ■　#33FFFF ■　#00FFFF ■　#00CCCC ■　#009999 ■　#006666 ■　#003333	■　#CCCCFF ■　#9999FF ■　#6666FF ■　#3333FF ■　#0000FF ■　#0000CC ■　#000099 ■　#000066 ■　#000033	■　#FFCCFF ■　#FF99FF ■　#FF66FF ■　#FF33FF ■　#FF00FF ■　#CC00CC ■　#990099 ■　#660066 ■　#330033
■　#663333 ■　#993333 ■　#996666 ■　#CC9999 ■　#CC6666 ■　#CC3333	■　#666633 ■　#999933 ■　#999966 ■　#CCCC99 ■　#CCCC66 ■　#CCCC33	■　#336633 ■　#339933 ■　#669966 ■　#99CC99 ■　#66CC66 ■　#33CC33	■　#336666 ■　#339999 ■　#669999 ■　#99CCCC ■　#66CCCC ■　#33CCCC	■　#333366 ■　#333399 ■　#666699 ■　#9999CC ■　#6666CC ■　#3333CC	■　#663366 ■　#993399 ■　#996699 ■　#CC99CC ■　#CC66CC ■　#CC33CC
■　#FFCC99 ■　#FFCC66 ■　#FFCC33 ■　#FFCC00 ■　#FF9900 ■　#FF6600 ■　#FF3300 ■　#CC3300 ■　#993300 ■　#663300	■　#CCFF99 ■　#CCFF66 ■　#CCFF33 ■　#CCFF00 ■　#99FF00 ■　#66FF00 ■　#33FF00 ■　#33CC00 ■　#339900 ■　#336600	■　#99FFCC ■　#66FFCC ■　#33FFCC ■　#00FFCC ■　#00FF99 ■　#00FF66 ■　#00FF33 ■　#00CC33 ■　#009933 ■　#006633	■　#99CCFF ■　#66CCFF ■　#33CCFF ■　#00CCFF ■　#0099FF ■　#0066FF ■　#0033FF ■　#0033CC ■　#003399 ■　#003366	■　#CC99FF ■　#CC66FF ■　#CC33FF ■　#CC00FF ■　#9900FF ■　#6600FF ■　#3300FF ■　#3300CC ■　#330099 ■　#330066	■　#FF99CC ■　#FF66CC ■　#FF33CC ■　#FF00CC ■　#FF0099 ■　#FF0066 ■　#FF0033 ■　#CC0033 ■　#990033 ■　#660033
■　#CC0099 ■　#CC0066 ■　#990066 ■　#993366 ■　#FF6699 ■　#FF3399 ■　#FF3366 ■　#CC3366 ■　#CC3399 ■　#CC6699	■　#CC9900 ■　#CC6600 ■　#996600 ■　#996633 ■　#FF9966 ■　#FF9933 ■　#FF6633 ■　#CC6633 ■　#CC9933 ■　#CC9966	■　#99CC00 ■　#66CC00 ■　#669900 ■　#669933 ■　#99FF66 ■　#99FF33 ■　#66FF33 ■　#66CC33 ■　#99CC33 ■　#99CC66	■　#00CC99 ■　#00CC66 ■　#009966 ■　#339966 ■　#66FF99 ■　#33FF99 ■　#33FF66 ■　#33CC66 ■　#33CC99 ■　#66CC99	■　#0099CC ■　#0066CC ■　#006699 ■　#336699 ■　#6699FF ■　#3399FF ■　#3366FF ■　#3366CC ■　#3399CC ■　#6699CC	■　#9900CC ■　#6600CC ■　#660099 ■　#663399 ■　#9966FF ■　#9933FF ■　#6633FF ■　#6633CC ■　#9933CC ■　#9966CC

SEO		[PR] 花おまとめローン Windows7 冷え性対策	動画掲示板レンタルサーバーライブチャット SEO

カラー