11.HTML Colors

 

 

---

HTML 색상은 미리 정의된 색상 이름 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정됩니다.

---

색 이름

---

HTML에서는 색상 이름을 사용하여 색상을 지정할 수 있습니다.

 

See the Pen 01.Color Names by heunho (@heunho) on CodePen.

 

 

배경색

---

HTML 요소의 배경색을 설정할 수 있습니다.

See the Pen 02.Background Color by heunho (@heunho) on CodePen.

 

 

글씨 색

---

텍스트 색상을 설정할 수 있습니다.

 

See the Pen 3.Text Color by heunho (@heunho) on CodePen.

 

 

테두리 색

---

테두리 색상을 설정할 수 있습니다.

 

See the Pen 4.Border Color by heunho (@heunho) on CodePen.

 

 

색상 값

---

HTML에서는 RGB 값, HEX 값, HSL 값, RGBA 값 HSLA 값을 사용하여 색상을 지정할 수도 있습니다.

 

색상 이름 "Tomato"와 동일합니다.

 

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

색상 이름 "Tomato"와 동일하지만 투명도 50%를 줄 경우

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

예제

 

See the Pen 5.Color Values by heunho (@heunho) on CodePen.

 

 

RGB 값

---

HTML에서는 다음 수식을 사용하여 색상을 RGB 값으로 지정할 수 있습니다.

rgb(red, green, blue)

각 매개 변수(red, green, blue)는 0에서 255 사이의 색상 강도를 정의합니다.

 

예를 들어, 빨간색은 가장 높은 값 (255)로 설정되고 다른 값은 0으로 설정되므로 rgb(255,0,0)는 빨간색으로 표시됩니다.

색상을 검은색으로 표시하려면 모든 색상 매개 변수를 다음과 같이 0으로 설정해야 합니다. rgb(0,0,0)

 

흰색을 표시하려면 모든 색상 매개 변수를 rgb(255,255,255)와 같이 설정해야합니다.

 

See the Pen 6. RGB Value by heunho (@heunho) on CodePen.

회색 음영은 3개의 광원에 대해 동일한 값을 사용하여 정의됩니다.

 

See the Pen 6. RGB Value2 by heunho (@heunho) on CodePen.

 

 

HEX 값

---

HTML에서는 다음 형식의 16 진수 값을 사용하여 색상을 지정할 수 있습니다.

#rrggbb

여기서 rr(빨강), gg(녹색) 및 bb(파랑)은 00에서 ff사이의 16진수 값입니다. (10진수 0-255와 동일)

예를 들어, 빨간색은 가장 높은 값(ff)으로 설정되고 다른 값은 가장 낮은 값(00)으로 설정되므로 #ff0000은 빨간색으로 표시됩니다.

 

See the Pen 7.HEX Values1 by heunho (@heunho) on CodePen.

회색 음영은 3개의 광원에 대해 동일한 값을 사용하여 정의됩니다.

 

See the Pen 7.HEX Value2 by heunho (@heunho) on CodePen.

 

 

HSL 값

---

HTML에서는 색상, 채도 및 명도 (HSL)를 사용하여 다음과 같은 형식으로 색상을 지정할 수 있습니다.

hsl(색상, 채도, 명도)

 

색상은 0에서 360까지 있으며, 0은 빨간색, 120은 녹색, 240은 파란색입니다.

채도는 백분율 값이고 0%는 회색의 음영을 의미하며, 100%는 전체 색상입니다.

명도도 백분율이며, 0%는 검은색, 50%는 밝거나 어두움, 100%는 흰색입니다.

 

See the Pen 08.HSL Value by heunho (@heunho) on CodePen.

 

 

채도

---

채도는 색상의 강도를 설명할 수 있습니다.

100%는 순수한 색상, 회색 음영 없음

50%는 50% 회색이지만 여전히 색상을 볼 수 있습니다.

0%는 완전한 회색이며 더 이상 지정한 색상을 볼 수 없습니다.

 

See the Pen 09.saturation by heunho (@heunho) on CodePen.

 

명도

---

명도는 색상을 지정하려는 빛의 양으로 표시할 수 있습니다. 0%는 빛이 없음을 의미하고 50%는 50%의 빛을 의미합니다. (어두운 것도 밝은 것도 없음) 100%는 완전한 밝기 (흰색)를 의미합니다.

 

See the Pen 10.lightness by heunho (@heunho) on CodePen.

HSL 색상의 경우 회색 음영은 채도를 0%로 설정하고 회색 색상이 어둡거나 밝은 정도에 따라 밝기를 조정하여 이루어집니다.

 

See the Pen 10.lightness2 by heunho (@heunho) on CodePen.

 

 

RGBA 값

---

RGBA 색상 값은 알파 채널이 있는 RGB 색상 값의 확장으로서, 색상에 대한 불투명도를 지정합니다.

RGBA 색상 값은 다음과 같이 지정됩니다.

rgba(red, green, blue, alpha)

알파 파라미터는 0.0(완전 투명)에서 1.0(전혀 투명하지 않음) 사이의 숫자로 지정할 수 있습니다.

 

See the Pen 11.RGBA Value by heunho (@heunho) on CodePen.

 

 

HSLA 값

---

HSLA 색상 값은 알파 채널이 있는 HSL 색상 값의 확장으로서, 색상의 불투명도를 지정할 수 있습니다.

HSLA 색상 값은 다음과 같이 지정됩니다.

hsla(색상, 채도, 명도, alpha)

알파 파라미터는 0.0(완전 투명)에서 1.0(전혀 투명하지 않음) 사이의 숫자로 지정할 수 있습니다.

 

See the Pen 12.HSLA Value by heunho (@heunho) on CodePen.

 

 

---

틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.

질문도 올려주시면 아는 선에서 답변해드리겠습니다.

---

대부분의 내용의 저작권은 w3schools에 있습니다.

HTML Colors