ただいま

です。

背景色と文字色チェック表

ホームページ内で背景色と文字色の関係をどうするか悩むところ。カラーRBG順色表示に色の一覧を作ってみたが、背景色と文字色を同時に検討できるページをつくってみた。色コードを示す文字はその色で示してあるので、背景色をまず決めて文字色の一覧の見方を検討すればよいことになる。


使い方
 1.色コードの後ろのラジオボタンをクリックして背景色を選ぶ。
 2.背景色に合う文字色として適当なものを選ぶ。
 3.カラーコードはコピーして利用してください。

色のコードをコピーしたいときは、そのコードが表示されている枠のところで 「Ctrl」+「左クリック」で選択状態になるので、選択された状態(反転されている)から「右クリック」のメニューでコピーを選んでください。

 4.<BODY bgcolor='#3366FF'>などのようにタグに記述すると、ページの背景色を設定できます。

慣用色名の欄に英語表記をしているものはその名前で表示できる。

赤色で文字を指定したい時は
<font color="red">赤色</font>と記述すると赤色となる。(タグの<>は半角にすること。ここでは簡単に示すため全角で記述しています。)

<B style="color:blue">太字の青文字</B>と記述すると、青色で太字太字の青文字となる。


基本16色

コード色名コード色名コード色名コード色名
#000000Black #808080Gray #C0C0C0Silver #FFFFFFWhite
#FF0000Red #FFFF00Yellow #00FF00Lime #00FFFFAqua
#0000FFBlue #FF00FFFuchsia #800000Maroon #808000Olive
#008000Green #008080Teal #000080Navy #800080Purple

216色

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

カラーのリンク集

  • (2017,6,13)カラーコード変換ツール Ver3 カラーコード(RGB、Hex、CMYK、HSV)を変換できるツール。#D36015,rbg(211,96,21),Brown, rgba(0, 0, 0, 0.2),etcを変換し色を表示させ、明暗の調整も可能
  • (2006,1,28)Rainbow Color Chart このページはラジオボタンによって、背景色、テキスト色、リンク色、既読リンク色、アクティブ色を選択してから、中央に配置された192色カラーパレットで色を見ながら、選び変更していくことができる。
  • (2006,1,28)カラーパレット このページはラジオボタンによって、背景色、テキスト色を選択してから、上部に配置されたフルカラーパレットで色を見ながら、選び変更していくことができる。カラーコードはクリックボタンによってコピーできる。
  • (2006,1,28)カラーパレット [セーフカラー] このページはラジオボタンによって、背景色、テキスト色を選択してから、上部に配置されたセーフカラーパレットで色を見ながら、選び変更していくことができる。
  • (2006,1,28)イメージ別にホームページの配色をシミュレート このページは、Top,Left,Right,bottonを、甘い配色とかクールな配色などに分類してラジオボタンによって色をシュミレーションすることができる。