CSS rgb() 함수형 표기: RGB 색 구문

rgb() 함수형 표기는 sRGB 색공간의 색을 적색(red), 녹색(green), 청색(blue) 성분으로 표현합니다. 선택적으로 알파 성분이 색의 투명도를 나타냅니다.

rgba() 함수형 표기는 rgb()의 별칭으로서 서로 완전히 동일합니다. rgb()를 사용하는 걸 권장합니다.

#color {
  background-color: rgb(255 213 0);
  /* background-color: rgb(71 133 102); */
  /* background-color: rgb(173 204 51 / 70%); */
  /* background-color: rgb(51 255 0 / 25%); */
}

#color {
  width: 100px;
  height: 100px;
}

<div id="color"></div>

불러오는 중...

구문

/* 절대 값 */
rgb(255 255 255)
rgb(255 255 255 / 50%)

/* 상대 값 */
rgb(from green r g b / 0.5)
rgb(from #0000FF calc(r + 40) calc(g + 40) b)
rgb(from hwb(120deg 10% 20%) r g calc(b + 200))

/* 구형 'rgba()' 별칭 */
rgba(255 255 255 / 50%)

/* 구형 구문 */
rgb(255, 255, 255)
rgb(255, 255, 255, 50%)

이전 명세와의 호환을 위해, 웹 API는 rgb() 색을 직렬화할 때 알파 값이 정확히 1이면 rgb()로, 그렇지 않을 땐 rgba()로 바꿉니다. 또한 구형 쉼표 구분 구문을 사용하므로 CSS에서 rgb(255 0 0 / 0.5)를 사용했다면 rgba(255, 0, 0, 0.5)가 됩니다.

값

절대 값 구문

rgb(R G B[ / A])

R, G, B

각각 색의 적, 녹, 청색 성분을 나타내는 0 이상 255 이하의 <number>, 0% 이상 100% 이하의 <percentage>, 또는 키워드 none (0%와 같음) 값입니다.

A (선택사항)

색의 알파 채널을 나타내는 <alpha-value> 값입니다. 0은 0% (완전 투명), 1은 100% (완전 불투명)입니다. none을 사용해 알파 채널이 없음을 명시할 수도 있습니다.

A 값을 생략하면 100%와 같습니다. 생략하지 않을 경우 앞의 세 값과 /로 구분해야 합니다.

상대 값 구문

rgb(from <color> R G B[ / A])

from <color>

상대 색의 기준색을 나타내는 <color> 값입니다. 앞의 from까지 포함해야 합니다. 기준색으로는 다른 상대색을 포함한 아무 <color> 값이나 사용할 수 있습니다.

R, G, B

각각 색의 적, 녹, 청색 성분을 나타내는 0 이상 255 이하의 <number>, 0% 이상 100% 이하의 <percentage>, 또는 키워드 none (0%와 같음) 값입니다.

A (선택사항)

A 값을 생략하면 100%와 같습니다. 생략하지 않을 경우 앞의 세 값과 /로 구분해야 합니다.

가시광선의 스펙트럼 전체를 표현하기 위해, rgb() 상대 값은 color(srgb)로 직렬화됩니다. HTMLElement.style 속성이나 CSSStyleDeclaration.getPropertyValue() 메서드로 출력 색상 값을 조회하면 color(srgb ...) 값을 반환합니다.

명세

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`rgb()` (RGB color model)
Alpha parameter
Float values in parameters
Mix `<percentage>` and `<number>` in parameters
Relative RGB colors
Space-separated rgb() parameters