Web セーフカラー

cf. CSS辞典第5版 P.473

#ffffff を基準とした Web セーフカラーの色相環

#ffff00

#ffcc00

#ccff00

#ff9900

#ffff33

#99ff00

#ff6600

#ffcc33

#ccff33

#66ff00

#ff3300

#ff9933

#ffff66

#99ff33

#33ff00

#ff0000

#ff6633

#ffcc66

#ccff66

#66ff33

#00ff00

#ff3333

#ff9966

#ffff99

#99ff66

#33ff33

#ff0033

#ff6666

#ffcc99

#ccff99

#66ff66

#00ff33

#ff3366

#ff9999

#ffffcc

#99ff99

#33ff66

#ff0066

#ff6699

#ffcccc

#ccffcc

#66ff99

#00ff66

#ff3399

#ff99cc

#ffffff

#99ffcc

#33ff99

#ff0099

#ff66cc

#ffccff

#ccffff

#66ffcc

#00ff99

#ff33cc

#ff99ff

#ccccff

#99ffff

#33ffcc

#ff00cc

#ff66ff

#cc99ff

#99ccff

#66ffff

#00ffcc

#ff33ff

#cc66ff

#9999ff

#66ccff

#33ffff

#ff00ff

#cc33ff

#9966ff

#6699ff

#33ccff

#00ffff

#cc00ff

#9933ff

#6666ff

#3399ff

#00ccff

#9900ff

#6633ff

#3366ff

#0099ff

#6600ff

#3333ff

#0066ff

#3300ff

#0033ff

#0000ff

#cccccc を基準とした Web セーフカラーの色相環

#cccc00

#cc9900

#99cc00

#cc6600

#cccc33

#66cc00

#cc3300

#cc9933

#99cc33

#33cc00

#cc0000

#cc6633

#cccc66

#66cc33

#00cc00

#cc3333

#cc9966

#99cc66

#33cc33

#cc0033

#cc6666

#cccc99

#66cc66

#00cc33

#cc3366

#cc9999

#99cc99

#33cc66

#cc0066

#cc6699

#cccccc

#66cc99

#00cc66

#cc3399

#cc99cc

#99cccc

#33cc99

#cc0099

#cc66cc

#9999cc

#66cccc

#00cc99

#cc33cc

#9966cc

#6699cc

#33cccc

#cc00cc

#9933cc

#6666cc

#3399cc

#00cccc

#9900cc

#6633cc

#3366cc

#0099cc

#6600cc

#3333cc

#0066cc

#3300cc

#0033cc

#0000cc

#999999 を基準とした Web セーフカラーの色相環

#999900

#996600

#669900

#993300

#999933

#339900

#990000

#996633

#669933

#009900

#993333

#999966

#339933

#990033

#996666

#669966

#009933

#993366

#999999

#339966

#990066

#996699

#669999

#009900

#993399

#666699

#339999

#990099

#663399

#336699

#009999

#660099

#333399

#006699

#330099

#003399

#000099

#666666 を基準とした Web セーフカラーの色相環

#666600

#663300

#336600

#660000

#666633

#006600

#663333

#336633

#660033

#666666

#006633

#663366

#336666

#660066

#333366

#006666

#330066

#003366

#000066

#333333 を基準とした Web セーフカラーの色相環

#333300

#330000

#003300

#333333

#330033

#003333

#000033

#000000 を基準とした Web セーフカラーの色相環

#000000

/* 六角形B */
.hexagonB {
  margin: -10px 35px;;
  width: 44px;
  height: 77px;
  display: inline-block;
  position: relative;
  z-index: 0;
  background: #ddd;
  text-align: center;
  border-radius: 3px;
}
.hexagonB-s {
  width: 36px;
  height: 61px;
}
.hexagonB:before,
.hexagonB:after {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background: inherit;
  border-radius: 1px;
}
.hexagonB:before {
    transform: rotate(60deg);
}.hexagonB:after {
    transform: rotate(-60deg);
}
.hexagonB .figure-name{
 top: 40%;
 left: -20%;
}

COPY

/* 集合部 */
.hex {
  margin: -19.5px;
  text-align: center;
}
.hexagonB span	{
  font-size: 13px;
  margin-left: -5px;
  vertical-align: middle;
}
.hex-colorchart .hex1 span,
.hex-colorchart .hex2 span,
.hex-colorchart .hex3 span {
  margin-left: -2px;
}
.hex-colorchart-3 span,
.hex-colorchart-4 span,
.hex-colorchart-5 span,
.hex-colorchart-6 span {
  margin-left: -8px;
}
.hex-colorchart .hex16 span,
.hex-colorchart-2 .hex1 span,
.hex-colorchart-2 .hex2 span,
.hex-colorchart-2 .hex3 span,
.hex-colorchart-2 .hex4 span,
.hex-colorchart-2 .hex5 span {
  color: #444;
}

COPY

.hex-colorchart .hex17 span,
.hex-colorchart .hex18 span,
.hex-colorchart .hex19 span,
.hex-colorchart .hex20 span,
.hex-colorchart .hex21 span,
.hex-colorchart-2 .hex11 span,
.hex-colorchart-2 .hex12 span,
.hex-colorchart-2 .hex13 span,
.hex-colorchart-2 .hex14 span,
.hex-colorchart-2 .hex15 span,
.hex-colorchart-2 .hex16 span,
.hex-colorchart-2 .hex17 span,
.hex-colorchart-3 span,
.hex-colorchart-4 span,
.hex-colorchart-5 span,
.hex-colorchart-6 span {
  color: white;
}

COPY

1-12.Web セーフカラー

#ffffff を基準とした Web セーフカラーの色相環

#cccccc を基準とした Web セーフカラーの色相環

#999999 を基準とした Web セーフカラーの色相環

#666666 を基準とした Web セーフカラーの色相環

#333333 を基準とした Web セーフカラーの色相環

#000000 を基準とした Web セーフカラーの色相環