CSS CSS 색상

CSS 색상

이름_<named-color>

  • 색의 이름을 직접 적어서 사용합니다.

<button style="color: red;">N</button>
<button style="color: orange;">N</button>
<button style="color: tan;">N</button>
<button style="color: rebeccapurple;">N</button>

헥스코드_<hex-color>

  • 16진법으로 3자리 or 6자리로 표현합니다.

<button style="color: #090;">HEX</button>
<button style="color: #009900;">HEX</button>
<button style="color: #090a;">HEX</button>
<button style="color: #009900aa;">HEX</button>

알지비_<rgb()>, <rgba()>

  • rgb(red green blue)은 빨강, 초록, 파랑으로 색을 표협합니다.
  • rgba(red green blue alpha)은 빨강, 초록, 파랑, 투명도로 색을 표협합니다.
  • 최댓값은 255이고 최솟값은 0입니다.
  • 투명도(alpha)은 좌측의 곱하여 표현합니다.

<button style="color: rgb(255, 90, 190, 0.6);">RGB</button>
<button style="color: rgba(255, 90, 190, 0.6);">RGB</button>
<button style="color: rgb(255 90 190 / 0.6);">RGB</button>
<button style="color: rgba(255 90 190 / 0.3);">RGB</button>
<button style="color: rgb(255 90 190 / 60%);">RGB</button>
<button style="color: rgba(255 90 190 / 30%);">RGB</button>

<hsl()>, <hsla()>

  • hsl(hue saturation lightness)은 색상, 채도, 명도로 색을 표협합니다.
  • hsla(hue saturation lightness alpha)은 색상, 채도, 명도, 불투명도로 색을 표협합니다.
  • 색상은 최댓값:360, 최솟값:0이고 red:0, green:120, blue:240 입니다.
  • 채도와 명도는 백분율로 나타냅니다.
    •  

    <button style="color: hsl(30, 100%, 50%, 0.6);">HSL</button>
<button style="color: hsla(30, 100%, 50%, 0.6);">HSL</button>
<button style="color: hsl(30 100% 50% / 0.6);">HSL</button>
<button style="color: hsla(30 100% 50% / 0.6);">HSL</button>
<button style="color: hsl(30 100% 50% / 60%);">HSL</button>
<button style="color: hsla(30 100% 50% / 60%);">HSL</button>