CSS 색상 코드 지정

1. CSS 색상 코드 표현하기.

1-1. 색상 이름

• 색상 자체의 이름으로 사용 가능하다.

<style>
  * {
    color: red;
    color: green;
  }
</style>

1-2. 16진수 표현

• #을 사용하여 16진수로 나타낼 수 있다.
  • #뒤의 16진수를 2개씩 3개로 나누어 각각 red, green, blue를 뜻한다.
    
    • 10 진수: 0 ~ 9, 10 ~ 19, ....
    • 16 진수: 0 ~ 9 10 = a, 11 = b, ..., 15 = f
    • 16 진수 10은 10진수로 16
    • 16 진수 15는 10진수로 21 

<style>
  * {
    color: #ffffff;
    color: #00ff00;
    color: #aba; /* color:#aabbaa */
  }
</style>

1-3. rgb, rgba

rgb(), rgba() 함수를 통해 사용할 수 있다.

 

• red, green, blue 각각의 값이 0 ~ 255 값을 가질 수 있다.
• 빛의 세기를 뜻한다.
• rgba()의 경우 투명도까지 설정할 수 있다.
• 투명도는 0 ~ 1(소수점 가능)으로 설정 가능하다.

<style>
  * {
    color: rgb(255, 0, 0);
    color: rgb(255, 255, 100);
  
    color: rgba(255, 0, 0, 0); /* 투명도가 0이므로 아무것도 안보임 */
    color: rgba(255, 255, 0, 1); /* 색이 그대로 나옴. */
    color: rgba(255, 255, 0, 0.5); /* 반투명한 색이 나옴. */
 }
</style>

1-4. hsl, hsla

HSL은 색상, 채도, 명도를 나타낸다.

 

• 색상(Hue)
  
  • Hue는 360도의 색상환으로 나타낸다.
  • 0도는 빨강, 120도는 초록, 240은 파랑이다.
• 채도(Saturation)
  • 채도(Saturation)은 0~100%로 표현된다.
  • 0일수록 채도가 낮고, 100이 채도가 가장 높다.
• 명도(Lightness)
  • 명도(Lightness)는 0~100%로 표현한다.
  • 0은 검정, 100은 흰색이다.

 

RGBA와 마찬가지로 알파값을 옵션으로 추가할 수 있다.

 

• 불투명도(Alpha, Opacity)
  • 0.0~1.0까지의 값을 가진다.
  • 0은 0% 불투명, 0.5는 50% 불투명, 1은 100% 불투명을 의미한다.

<style>
  * {
    background-color: hsl(120, 100%, 50%);
    background-color: hsl(0, 100%, 50%, 0.5);
  }
</style>