개발 도구 (Development Tools)/HTML & CSS

#11. CSS의 색상 이해

BiCute 2023. 4. 26. 08:00
반응형


CSS(Cascading Style Sheets)에서 색상을 표현하는 방법에는 여러가지가 있습니다. 

아래에서는 각 방법에 대한 간략한 설명입니다.

 

1. Hexadecimal (hex)

  Hexadecimal은 16진수 표기법으로 사용되는 색상 표현 방식입니다.

  # 문자와 6자리의 16진수 코드로 표현됩니다.

  예를 들어 #FF0000은 빨강색을 나타냅니다.

 

 

2. RGB (Red, Green, Blue)

  RGB는 색상을 표현하는 가장 기본적인 방식입니다.

  RGB 코드는 red, green, blue 세 가지 색상 요소의 값으로 표현됩니다.

  각 요소의 값은 0~255 사이의 값으로 표현됩니다.

  예를 들어 RGB(255, 0, 0)은 빨강색을 나타냅니다.

 

 

3. RGBA (Red, Green, Blue, Alpha)

  RGBA는 RGB에 alpha 채널을 추가한 방식입니다.

  Alpha 채널은 투명도를 나타내며 0~1 사이의 값으로 표현됩니다.

  RGBA(255, 0, 0, 1)은 불투명한 빨강색을 나타냅니다.

 

 

4. HSL(Hue, Saturation, Lightness)

  HSL은 색상 표현 방식 중 하나입니다.

  HSL은 색상(hue), 채도(saturation), 명도(lightness)를 기준으로 색상을 표현합니다. 

  Hue: 색상을 표현하는 각도 값으로 0도부터 360도까지의 값으로 표현됩니다.

    0도는 빨강, 120도는 녹색, 240도는 파랑을 나타냅니다.
  Saturation: 색상의 진한 정도를 나타내는 값으로 0%에서 100%까지의 값으로 표현됩니다.

    0%일수록 회색, 100%일수록 진한 색상을 나타냅니다.
  Lightness: 밝기를 나타내는 값으로 0%에서 100%까지의 값으로 표현됩니다.

    0%일수록 어두운 색상, 100%일수록 밝은 색상을 나타냅니다.

 

 

5. HSLA (Hue, Saturation, Lightness, Alpha)

  HSLA는 HSL에 alpha 채널을 추가한 방식입니다.

  Alpha 채널은 투명도를 나타내며 0~1 사이의 값으로 표현됩니다.

  HSLA(0, 100%, 50%, 1)은 불투명한 빨강색을 나타냅니다.

반응형