색을 정의하는 총 7가지의 다양한 방법!

CSS 색상표현

CSS에서는 총 3가지 [색상 이름으로 표현/RGB 섹상값으로 표현/16진수 색상값으로 표현] 로 나뉘는데 각 표현에 대하여 배워보곘습니다.

---

색상의 이름으로 표현하는 방법

색상의 고유 이름으로 표현이 가능하며 대소문자를 구별하지 않으며, w3c에서 정의한 총 16개의 HTML4 표준 색상 이름은 아래와 같습니다.

color: gray

color: aqua

color: black

color: blue

color: fuchsia

color: green

color: lime

color: maroon

color: navy

color: olive

color: purple

color: red

color: silver

color: teal

color: yellow

color: white

---

RGB 색상값으로 표현하는 방법

출력기기 중 하나인 모니터는 빨간색, 녹색, 파란색을 혼합하여 색을 표현하는데 HTML에서도 이 3가지 색을 이용해 표현하는 방식이 있으며 RGB 색상의 기본색은 0부터 255까지의 범위를 지닙니다.

color: rgb(0,0,255)

color: rgb(0,128,0)

color: rgb(192,192,192)

---

16진수 색상값으로 표현하는 방법

16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다. 따라서 RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가진다.

color: #0000FF

color: #008000

color: #C0C0C0

---

CSS3의 새롭게 추가된 방식

CSS3에서는 총 4가지 방법이 추가되었으며, 그 방법은 [RGBA 색상값으로 표현/HSL 색상값으로 표현/HSLA 색상값으로 표현/opacity 속성] 이렇게 나뉘는데 각 표현에 대하여 배워보곘습니다.

---

RGBA 색상값으로 표현

RGBA 방식은 기존 RGBA 색상값에 알파 채널 값을 더한 색상입니다.

color: rgba(0, 110, 255, 0.6)

color: rgba(0, 110, 255, 0.4)

color: rgba(0, 110, 255, 0.2)

---

HSL 색상값으로 표현

HSL 색상값에서 HSL은 각각 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미하며,
색상은 0부터 360 사이의 값을 가지며, 색상환(color wheel)의 각도를 나타낸다. 색상 값이 0 또는 360이면 빨간색(red)이 되며, 120이면 녹색(green), 240이면 파란색(blue)이 된다.

color: hsl(0, 100%, 50%);

color: hsl(90, 100%, 50%)

color: hsl(180, 100%, 50%)

---

HSLA 색상값으로 표현

HSLA 색상값은 HSL 색상값에 알파 채널 값을 더한 색상값이다.

color: hsla(0, 100%, 50%, 1);

color: hsla(0, 100%, 50%, 0.6)

color: hsla(0, 100%, 50%, 0.2)

---

opacity 속성?

opacity 속성은 색상에 대한 투명도를 설정해주는데, opacity 속성값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가지게 됩니다.

color: rgb(0,255,0); opacity:1;

color: rgb(0,255,0); opacity:0.6

color: rgb(0,255,0); opacity:0.2

---