RGB 컬러 시스템

"RGB"는 Red, Green, Blue의 첫 글자를 따서 만든 이름으로, 빨강, 초록, 파랑 세 가지 기본 색을 혼합해서 다양한 색을 만듭니다.

RGB 색상이란?

모든 색은 RGB는 빨강(Red), 초록(Green), 파랑(Blue)의 세 가지 색을 조합해 만들 수 있습니다. 각 색상의 밝기는 0에서 255 사이의 숫자로 표현합니다.

CSS에서 RGB 사용하기

CSS에서는 rgb()라는 함수를 사용해 RGB 색상 값을 설정합니다.

괄호 안에 빨강(R), 초록(G), 파랑(B) 숫자 값을 차례대로 넣으면 원하는 색상을 표현할 수 있습니다.

/* 빨간색 텍스트 */
p {
  color: rgb(255, 0, 0);
}

/* 초록색 텍스트 */
h1 {
  color: rgb(0, 255, 0);
}

/* 파랑색 텍스트 */
h2 {
  color: rgb(0, 0, 255);
}

다양한 컬러 만들기

빨강, 초록, 파랑의 값을 조절해 다양한 컬러를 만들 수 있습니다. 예를 들어, 빨강과 파랑을 동일한 양으로 섞으면 보라색을 만들 수 있습니다.

/* 글자 색상 보라색으로 설정 */
div {
  color: rgb(255, 0, 255);
}

빨강, 초록, 파랑 모두 최대값인 255로 설정하면 흰색이 나오고, 모두 0으로 설정하면 검은색이 만들어집니다.

/* 흰색 글자 */
span {
  color: rgb(255, 255, 255);
}

/* 검은색 글자 */
a {
  color: rgb(0, 0, 0);
}