12色相

実行結果

12色相を表現しました。

バックカラーカラーコードフォントカラー
赤	橙	黄橙	黄
"#ff0000"	"#ffa500"	"#ffd200"	"#ffff00"
red	orange	Yellow-orange	Yellow
黄緑	緑	緑青	青緑
"#9acd32"	"#008000"	"#005455"	"#002aaa"
Yellow-green	green	green Blue	Blue green
青	青紫	紫	赤紫
"#0000ff"	"#4000a0"	"#800080"	"#a00040"
blue	Blue-purple	purple	Red-purple

表での色指定

表の中のviolet色はCSSで下記のようにstyleを指定しました。
th:nth-of-type(1){background-color:violet}
tr:nth-of-type(6) > td:nth-of-type(3) {background-color:violet}

実行結果

a	b	c	d
1
2
3
4
5
6
7
8
9

プログラム

HTML
<table border="1">
  <tr><th>a</th><th>b</th><th>c</th><th>d</th></tr>
  <tr><td>1</td><td></td><td></td><td></td></tr>
  <tr><td>2</td><td></td><td></td><td></td></tr>
  <tr><td>3</td><td></td><td></td><td></td></tr>
  <tr><td>4</td><td></td><td></td><td></td></tr>
  <tr><td>5</td><td></td><td></td><td></td></tr>
  <tr><td>6</td><td></td><td></td><td></td></tr>
  <tr><td>7</td><td></td><td></td><td></td></tr>
  <tr><td>8</td><td></td><td></td><td></td></tr>
  <tr><td>9</td><td></td><td></td><td></td></tr>
</table>

/*CSS*/
th:nth-of-type(1){background-color:violet}

tr:nth-of-type(6) > td:nth-of-type(3)
　　　　　　　　　　 {background-color:violet}

その他の色

実行結果

バックカラー
gold	silver	pink	Salmon
violet	lime	brown	gray

グラデーション

実行結果

円形グラデーション

線形グラデーション

横に線形グラデーション

間隔を狭めた線形グラデーション

斜めのグラデーション

プログラム

  HTML

<p class="p1">


/*CSS*/
.p1{
  width:15vw;
  height:10vw;
  background: content-box 
              radial-gradient(crimson, skyblue);
  border: double 5px #000;
}

HTML

<p class="p2">


/*CSS*/
.p2{
 width:15vw;
 height:10vw;
 background: content-box
 linear-gradient(yellow, skyblue);
}

  HTML

<p class="p3">


/*CSS*/
.p3{
  width:15vw;
  height:10vw;
  background: content-box
   linear-gradient(to left,yellow, skyblue);
}

  HTML

<p class="p4">


/*CSS*/
.p4{
  width:15vw;
  height:10vw;
background-color: #80ffff;
background-image:
 linear-gradient(0deg, #fff 50%, transparent 50%);
background-size: 5px 5px;
}

  HTML

<p class="p5">


/*CSS*/
.p5{
  width:15vw;
  height:10vw;
  background-color: #ff8040;
  background-image:
repeating-linear-gradient
(45deg,#fff, #fff 2px,transparent 0, transparent 3px);
}