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

Baseline넓은 지원

모든 주요 브라우저가 지원하는 기능입니다.

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	Safari WebView	Chrome	Android WebView	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