Color(顏色) | CSS

CSS 在顏色上可以使用 Hex、RGB和文字，我們這邊會用案例介紹這3種的使用方式。

在網頁設計領域中，色彩學關乎你的視覺設計和品牌印象，但我們這邊主要是討論CSS中顏色的使用方式。 CSS 提供了強大的工具，如 Hex、RGB和文字。掌握 CSS 顏色使用方式將使你能夠為你的網站注入迷人的色彩

CSS 顏色一覽表
CSS 顏色色碼

See the Pen 015-CSS-Color by lenrich (@lenrich) on CodePen.

範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS顏色</title>
    <style>
      /* https://html-color-codes.info/chinese/ */
      /* https://color-hex/com/ */
      h1 {
        /* 字體顏色 */
        /* 顏色命名 */
        color: blueviolet;
      }
      h2 {
        /* RGB三原色搭配 */
        /* red */
        color: rgb(255, 0, 0);
        /* green */
        color: rgb(0, 255, 0);
        /* blue */
        color: rgb(0, 0, 255);
        /* white */
        color: rgb(255, 255, 255);
        /* black */
        color: rgb(0, 0, 0);
      }
      h3 {
        /* 16進制色碼 Hex  */
        /* red */
        color: #ff0000;
        /* white */
        color: #ffffff;
        /* black */
        color: #000000;
        /* green */
        color: #00ff00;
        /* blue */
        color: #0000ff;
        /* white 如果其中有0的話，可以進行刪減 */
        color: #fff;
        /* gray white mix */
        color: #f4f4f4;
      }
    </style>
  </head>
  <body>
    <h1>標題1</h1>
    <h2>標題2</h2>
    <h3>標題3</h3>
  </body>
</html>