閉じる

WEBカラーチャート

Webセーフカラー

CSSの色、WebセーフカラーはHTML作成において、色指定のベースとされてきました。
もともとはOSが変わっても、HTML内のカラーが変わらないものとしてネットエスケープ社が保証した色です。

以下はRGBを6段階にわけ、216種類の色を表現したものですが、現在はほとんど、このカラーのみに縛られる事はありません。

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

基本カラーコード

  • #000000
  • #c0c0c0
  • #808080
  • #ff0000
  • #008000
  • #008080
  • #00ffff
  • #000080
  • #800000
  • #800080
  • #808000
  • #00ff00
  • #ffff00
  • #ff00ff
  • #ffffff
  • #0000ff

基本カラーコードRGB

  • rgb(0, 0, 0)
  • rgb(192, 192, 192)
  • rgb(128, 128, 128)
  • rgb(255, 0, 0)
  • rgb(0, 128, 0)
  • rgb(0, 128, 128)
  • rgb(0, 255, 255)
  • rgb(0, 0, 128)
  • rgb(128, 0, 0)
  • rgb(128, 0, 128)
  • rgb(128, 128, 0)
  • rgb(0, 255, 0)
  • rgb(255, 255, 0)
  • rgb(255, 0, 255)
  • rgb(255, 255, 255)
  • rgb(0, 0, 255)

基本カラーコードRGBA

  • rgba(0, 0, 0, 1)
  • rgba(192, 192, 192, 1)
  • rgba(128, 128, 128, 1)
  • rgba(255, 0, 0, 1)
  • rgba(0, 128, 0, 1)
  • rgba(0, 128, 128, 1)
  • rgba(0, 255, 255, 1)
  • rgba(0, 0, 128, 1)
  • rgba(128, 0, 0, 1)
  • rgba(128, 0, 128, 1)
  • rgba(128, 128, 0, 1)
  • rgba(0, 255, 0, 1)
  • rgba(255, 255, 0, 1)
  • rgba(255, 0, 255, 1)
  • rgba(255, 255, 255, 1)
  • rgba(0, 0, 255, 1)

 

CSSをpタグに直接CSSを記載した例

<p style="color:#CC3366;">CSSの色を変更</p>

CSSの色を変更

文字の色が赤に変わりました。

フォーム作成で使えるHTMLサンプル

ピックアップ記事

  1. エックスサーバー株式会社がサービスを提供していた「X2サーバー(エックスツーサーバー)」がサービスを…
  2. Google アシスタントの機能が進化しています。新しいGOOGLEのスマホ、Pixel 2…
  3. GOOGLE
    FIREFOXやGoogle ChromeでHTTPSで暗号化されていないサイトに接続保護されていな…
ページ上部へ戻る