CSS 색상 표현법

CSS 색상 표현 방법

CSS 색상 표현법에는 3가지 방법이 있습니다.
1. 색상 이름으로 표현하기
2. RGB 속성 값으로 표현하기
3. 16진수 색상 값으로 표현하기

CSS3 에서 새롭게 추가된 방법이 있습니다.
4. RGBA 색상값으로 표현하기
5. HSL 색상값으로 표현하기
6. HSLA 색상값으로 표현하기
7. opacity 속성으로 표현하기

---

1. 색상 이름으로 표현하기

/* 일상생활에서 사용하는 색상 이름으로 색을 표현합니다. */
p {color : red;}
.container {background : silver;}

---

2. RGB 속성 값으로 표현하기

/* RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 갖고, 이 수치들을 조절해서 색을 표현합니다. */
p {color: rgb(0,0,255);}
.container {background : rgb(192,192,192);}

---

3. 16진수 색상 값으로 표현하기

/* 16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것 입니다. 따라서 RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위에서 수치를 갖습니다. */
p {color: #0000FF;}
.container {background : #C0C0C0;}

---

4. 16진수 색상 값으로 표현하기

/* RGBA 색상값은 RGB 색상값에 알파(투명도) 채널 값을 더한 색상값 입니다. */
p {background-color: rgba(0,255,0,0);}
.container {background-color: rgba(0,255,0,1);} /* 투명도 0.1 */

---

반응형

5. HSL 색상값으로 표현하기

/* HSL 색상값은 빛의 삼원색으로 색을 표현하는 RGB 색상값과는 달리 색상, 채도, 명도를 사용해서 색을 표현하는 방식입니다. */
/* HSL 색상값에서 HSL은 각각 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미합니다. */ p {background-color: hsl(0, 100%, 50%);}
.container {background-color: hsl(360, 100%, 50%);} /* 색상 값이 0 또는 360이면 빨간색(red)이 되며, 120이면 녹색(green), 240이면 파란색(blue)이 된다. */

---

6. HSLA 색상값으로 표현하기

/* 1HSLA 색상값은 HSL 색상값에 알파(투명도) 채널 값을 더한 색상값이겠죠?*/
p {background-color: hsla(0, 100%, 50%, 0);}
.container {background-color: hsla(0, 100%, 50%, 1);}

---

7. opacity 속성으로 표현하기

/* opacity 속성은 색상에 대한 투명도를 설정해 줍니다. opacity 속성값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가진다.*/
p {background-color: rgb(0,255,0); opacity:0}
.container {background-color: rgb(0,255,0); opacity:1}

---

그럼 opacity와 alpha 값을 조절하는 차이는 무엇일까?

opacity 속성은 투명도를 설정했을 때 설정한 요소의 모든 자식(child) 요소까지 전부 같은 투명도로 설정합니다. 하지만 알파 채널은 투명도를 설정한 요소에만 투명도를 설정한다는 차이점이 존재하죠.