16進数のWebカラーで虹色CSS作ってみた

Web上の色は、RGBで指定します。

これは16進数の理屈で成り立っています。

今回は、Webカラーを数学的に説明して、CSSで虹色を作るコードを紹介してみました！

Webカラーのイメージ

RGBとHexのイメージ

• ● #000000：(R, G, B) = (0, 0, 0)
• ●#ffffff：(R, G, B) = (255, 255, 255)
• ●#ff0000：(R, G, B) = (255, 0, 0)
• ●#00f100：(R, G, B) = (0, 241, 0)
• ●#0000fa：(R, G, B) = (0, 0, 250)
• ●#ffff00：(R, G, B) = (255, 255, 0)
• ●#00ffff：(R, G, B) = (0, 255, 255)
• ●#6f3b4e：(R, G, B) = (111, 59, 78)

赤色の種類

#010000から#ff0000までの変遷を見てみましょう。

WebカラーのCSSコード

虹色のCSSコード

HTMLのタグはCSSで着色することができます。

p {
  background: linear-gradient(45deg, #9400D3, #4B0082, #0000FF, #00FF00, #FFFF00, #FFA500, #FF0000);
  height: 25vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

このコードは、HTMLの「段落」に虹を作るコードです！

きれいに作れました！