RGB와 HEX의 같은 점과 차이점
HEX는 16진법을 뜻하는 hexadecimal의 약자이다. rgb(255, 124, 224) 표기법을 16진수로 바꾼 것이 HEX 코드이다. 그러므로 RGB와 색상의 내용은 동일하고 표기법이 다르다.
참고: 이전 글
1) HEX 코드 (16진수 색상)
HEX 코드는 0~10의 숫자와 A~F까지의 문자 16개로 표시되며, RR(빨간색), GG(녹색), BB(파란색)의 조합이다. 앞에 #을 붙여 #RRGGBB로 정의된다. 모든 값은 00에서 FF 사이여야 한다. rgb(255, 0, 224)는 10진수이고, HEX 코드는 16진수이지만 표현할 수 있는 색의 수는 동일하다.
- rgb의 경우 나올 수 있는 색의 종류는 256 x 256 x 256 = 16,777,216 개다.
- 헥스 코드로 나타낼 수 있는 색상의 수는 총 16의 6승=16,777,216 개의 색상이다. 그러므로 색의 수는 같다.
#ff0000 값은 빨간색이 ff값(가장 높은 값)이다. 다른 구성 요소가 00으로 설정된다면 빨간색 외에는 아무 색도 렌더링 될 수 없는 구조이다. 그러니 #ff0000이 순수한 빨간색임이 틀림없다. #00ff00 값은 녹색이 ff값(가장 높은 값)이다. 다른 구성 요소가 00으로 설정된다면 녹색 외에는 아무 색도 렌더링 될 수 없는 구조이다. #0000ff0 값은 파란색이 ff값(가장 높은 값)이다. 다른 구성 요소가 00으로 설정된다면 파란색 외에는 아무 색도 렌더링 될 수 없는 구조이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#00ff00;">##00ff00</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#dd82ee;">#dd82eee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#5b5aee;">#5b5aee</h1>
</body>
</html>
2) 회색
앞 글(2021.10.23. RGB 색상, RGBA)에서 보았듯이 R, G, B 세 변수 모두 동일한 값이면 회색이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>흑백</title>
</head>
<body>
<h1 style="background-color:#404040;">#404040</h1>
<h1 style="background-color:#727272;">#727272</h1>
<h1 style="background-color:#a0a0a0;">#a0a0a0</h1>
<h1 style="background-color:#bcbcbc;">#bcbcbc</h1>
<h1 style="background-color:#dcdcdc;">#dcdcdc</h1>
<h1 style="background-color:#f9f9f9;">#f9f9f9</h1>
</body>
</html>
위의 예시를 보듯 R, G, B 각각의 값이 서로 동일할 때 회색이 나오는 것을 확인할 수 있다.
3) RGB에서 HEX로 바꾸는 방법
- 다음 QR코드를 스캔하면 구글의 RGB-HEX 페이지가 나온다.
- 이곳에 가면 하나의 색상 점으로 HEX, RGB, CMYK, HSV, HSL 값을 모두 알 수 있다.
QR코드 스캔하는 방법은 :