CSS HEX Colors

16진수 색상은 #RRGGBB로 지정된다. 여기서 RR(빨간색), GG(녹색) 및 BB(파란색) 16진수 정수는 색상의 성분을 지정한다.

16진수 색상값

CSS에서 색은 16진수 값을 사용하여 다음과 같은 형식으로 지정할 수 있다:

#tgbb

여기서 rr(빨간색), gg(녹색) 및 bb(파란색)는 00과 ff 사이의 16진수 값이다(10진수 0-255와 동일).

예를 들어, #ff0000은 빨간색으로 표시된다. 빨간색은 가장 높은 값(ff)으로 설정되고 다른 값은 가장 낮은 값(00)으로 설정되기 때문이다.

검은색으로 표시하려면 모든 값을 00으로 설정합니다. #000000과 같이 설정한다.

흰색을 표시하려면 #fffffff와 같이 모든 값을 off로 설정한다.

<!DOCTYPE html>
<html>
<body>

<h1>HEX 값을 사용하여 색상 지정</h1>

<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

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

<!DOCTYPE html>
<html>
<body>

<h1>회색 음영</h1>

<p>빨강, 초록, 파랑에 동일한 값을 사용함으로써, 당신은 다른 음영의 그라를 얻을 것입니다y:</p>

<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#616161;">#616161</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#f9f9f9;">#f9f9f9</h2>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS 3자리 16진수 색상값

때때로 CSS 소스에서 3자리 16진수 코드를 보게 될 것이다.

3자리 16진수 코드는 일부 6자리 16진수 코드의 약자이다.

3자리 16진수 코드의 형식은 다음과 같다:

#rgb

여기서 r, g 및 b는 0과 f 사이의 값을 가진 빨간색, 녹색 및 파란색 성분을 나타낸다.

3자리 16진수 코드는 각 구성 요소에 대한 두 값(RR, GG 및 BB)이 동일한 경우에만 사용할 수 있다. 그래서 만약 우리가 #ff00cc를 가지고 있다면, 그것은 다음과 같이 쓸 수 있다: #f0c.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #fc9; /* same as #ffcc99 */
}

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

p {
  color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>

<h1>CSS 3자리 16진수 색상코드</h1>
<p>단락.</p>

</body>
</html>

위의 코드를 실행한 결과가 아래 그림과 같다.

지금까지 CSS 16진수 색상값에 대해 살펴보았다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 배경(CSS Background) (0)	2023.07.06
CSS HSL 색상 (0)	2023.07.05
CSS RGB색상(CSS RGB Colors) (0)	2023.07.03
CSS 색상(CSS Colors) (0)	2023.07.02
CSS 주석(CSS Comments) (0)	2023.07.01