[CSS] 색상, RGB, HEX, HSL

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

CSS 색상 이름

• CSS / HTML은 140개의 표준 색상 이름을 지원합니다.
• CSS에서 미리 정의된 색상 이름을 사용하여 색상을 지정할 수 있습니다.

https://www.w3schools.com/css/css_colors.asp

CSS Background Color

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

https://www.w3schools.com/css/css_colors.asp

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color

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

https://www.w3schools.com/css/css_colors.asp

# Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS 테두리 색상

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

https://www.w3schools.com/css/css_colors.asp

# Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS 색상 값

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

 

색상이름 "tomato"와 동일:

https://www.w3schools.com/css/css_colors.asp

색상 이름 "Tomato"와 동일하지만 50% 투명:

https://www.w3schools.com/css/css_colors.asp

<h1 style="background-color:rgb(255, 99, 71);")>...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

 

CSS RGB 색상

• CSS에서 색상은 다음 공식을 사용하여 RGB 값으로 지정할 수 있습니다. RGB(빨강, 초록, 파랑)
• 각 매개변수(빨간색, 녹색 및 파란색)는 0에서 255 사이의 색상 강도를 정의합니다.
• 예를 들어, rgb(255, 0, 0)는 빨간색이 가장 높은 값(255)으로 설정되고 나머지는 0으로 설정되기 때문에 빨간색으로 표시됩니다.
• 검은색을 표시하려면 rgb(0, 0, 0)와 같이 모든 색상 매개변수를 0으로 설정합니다. 
• 흰색을 표시하려면 rgb(255, 255, 255)와 같이 모든 색상 매개변수를 255로 설정합니다.

https://www.w3schools.com/css/css_colors_rgb.asp

• 회색 음영은 3가지 광원 모두에 대해 동일한 값을 사용하여 정의되는 경우가 많습니다

https://www.w3schools.com/css/css_colors_rgb.asp

RGBA Value

• RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널이 있는 RGB 색상 값의 확장입니다.
• RGBA 색상 값은 다음과 같이 지정됩니다.
• rgba(빨강, 녹색, 파랑, 알파) 알파 매개변수는 0.0(완전 투명)에서 1.0(전혀 투명하지 않음) 사이의 숫자입니다.
• 아래 RGBA 값을 혼합하여 실험합니다.

https://www.w3schools.com/css/css_colors_rgb.asp

 

CSS 16진수 색상

• 16진수 색상은 #RRGGBB로 지정됩니다. 
• 여기서 RR(빨간색), GG(녹색) 및 BB(파란색) 16진수 정수는 색상 구성 요소를 지정합니다.

16진수 값

• CSS에서 색상은 다음 형식의 16진수 값을 사용하여 지정할 수 있습니다. ##rrggbb
• 여기서 rr(발간색), gg(녹색) 및 bb(파란색)는 00과 ff 사이의 16진수 값입니다(10진수 0~255와 동일).
• 예를 들어 #ff0000는 빨간색이 가장 높은 값(ff)으로 설정되고 나머지는 가장 낮은 값(00)으로 설정되기 때문에 빨간색으로 표시됩니다.
• 검은색을 표시하려면 #000000과 같이 모든 값을 00으로 설정합니다.
• 흰색을 표시하려면 #fffff와 같이 모든 값을 ff로 설정합니다.

3자리 HEX 값

• 때때로 CSS 소스에서 3자리 16진수 코드를 볼 수 있습니다.
• 3자리 16진수 코드는 일부 6자리 16진수 코드의 약어입니다.
• 3자리 16진수 코드의 형식은 다음과 같습니다. #rgb
• 여기서 r, g 및 b는 0과 f 사이의 값을 가진 빨강, 녹색 및 파랑 구성 요소를 나타냅니다.
• 3자리 16진수 코드는 각 구성 요소에 대해 두 값(RR, GG 및 BB)이 동일한 경우에만 사용할 수 있습니다.
• 따라서 #ff00cc가 있으면 #f0c와 같이 작성할 수 있습니다.

body {
	background-color: #fc9; /* same as #ffcc99 */
    }

h1 {
	color: #f0f; /* same as #ff00ff */
    }
p {
	color: #b58; /* same as #bb5588 */
    }

 

CSS HSL 색상

HSL은 색조, 채도 및 밝기를 나타냅니다.

 

HSL Value

• CSS에서 색상은 다음 형식의 HSL(색조, 채도 및 밝기)을  사용하여 지정할 수 있습니다.
• hsl(색조, 채도, 밝기)
• 색조는 0에서 360까지의 색상환의 정도입니다.
• 0은 빨간색, 120은 녹색, 240은 파란색입니다.
• 채도는 백분율 값이고 0%는 회색 음영을 의미하고 100%는 전체 색상을 의미합니다.
• 밝기도 백분율이고 0%는 검정색, 50%는 밝거나 어둡지 않음, 100%는 흰색입니다.

https://www.w3schools.com/css/css_colors_hsl.asp

채도

• 채도는 색상의 강도를 설명할 수 있습니다.
• 100%는 회색 음염이 없는 순수한 색상입니다.
• 50%는 50% 회색이지만 여전히 색상을 볼 수 있습니다.
• 0%는 완전히 회색이며 더 이상 색상을 볼 수 없습니다.

https://www.w3schools.com/css/css_colors_hsl.asp

 

밝기

• 색상의 밝기는 색상에 부여하고 싶은 빛의 양으로 설명할 수 있습니다.
• 여기서 0%는 빛이 없음(검은색), 
• 50%는 50%(어둡지도 밝지도 않음)을 의미 하고
• 100%는 완전한 밝기(흰색)을 의미합니다.

https://www.w3schools.com/css/css_colors_hsl.asp

 

회색 음영

• 회색 음영은 종종 색조와 채도를 0으로 설정하고 명도를 0%에서 100%로 조정하여 더 어둡거나 더 밝은 음영을 얻음으로써 정의됩니다.

https://www.w3schools.com/css/css_colors_hsl.asp

 

 

HSLA 값

• HSLA 색상 값은 색상의 불투명도를 지정하는 알파 채널이 있는 HSL 색상 값의 확장입니다.
• HSLA 색상 값은 다음과 같이 지정됩니다.
• hsla(색조, 채도, 밝기, 알파)
• 알파 매개변수는 0.0(완전 투명)에서 1.0(전혀 투명하지 않음) 사이의 숫자입니다.
• 아래의 HSLA 값을 혼합하여 실험하십시오.

 

 

 

 

REFERENCE

https://www.w3schools.com/css/css_colors.asp

CSS Colors

https://www.w3schools.com/css/css_colors_rgb.asp

CSS RGB and RGBA Colors

https://www.w3schools.com/css/css_colors_hex.asp

CSS HEX Colors

https://www.w3schools.com/css/css_colors_hsl.asp

CSS HSL Colors