JavaScript의 RGB 색상 모델

CSS의 color 속성은 요소의 색상을 나타내며 RGB, HSL, LCH, HWB, Color 키워드 등과 같이 다양한 방식으로 정의할 수 있습니다. 색상을 나타내는 다양한 방법은 https://en.wikipedia.org/wiki/Color_theory에서 의미합니다.

RGB는 모든 브라우저에서 지원되는 인기 있는 색상 모델입니다. RGB는 기본 색상이라고도 하는 빨강, 파랑 및 녹색을 나타냅니다. 이러한 기본 색상의 다양한 비율은 더 많은 색조를 생성합니다.

RGB 큐빅 모델은 X축에 빨간색, Y축에 녹색, Z축에 파란색을 나타냅니다. 세 좌표가 모두 0에서 만나면 검정 색상을 나타내고 255는 흰색 색상을 나타냅니다.

‘RGB’ 색상은 기능적 방식과 16진법 방식의 두 가지 방식으로 정의할 수 있습니다.

기능 표기법은 산술, 백분율, 채널당 디지털 8비트, 채널당 디지털 12비트, 채널당 디지털 16비트 및 채널당 디지털 24비트 색상 형식을 허용합니다. 16진수 표기법은 6자리 또는 3자리를 사용하여 두 가지 방법으로 정의할 수 있습니다.

JavaScript의 rgb() 색상 구문

rgb($red, $green, $blue);
rgba($red, $green, $blue, $alpha);
#RRGGBB[AA]
#RGB[A]

JavaScript의 rgb() 색상 매개변수

• $red: 최종 색상에서 red shed의 강도를 정의하는 필수 매개변수입니다. 범위는 기능적으로 0-255이고 16진수 표기법에서 0-9, A-F입니다.
• $green: 최종 색상에서 녹색 셰드의 강도를 정의하는 필수 매개변수입니다. 범위는 기능적으로 0-255이고 16진수 표기법에서 0-9, A-F입니다.
• $blue: 최종 색상에서 파란색 셰드의 강도를 정의하는 필수 매개변수입니다. 범위는 기능적으로 0-255이고 16진수 표기법에서 0-9, A-F입니다.
• $alpha: 색상의 투명도를 정의하는 선택적 매개변수입니다. 백분율, 부동 소수점 값으로 값을 취합니다.

예제 코드:

<div id="demo">
  <h1>Hello world!</h1>
  <p>Welcome to RGB tutorial</p>
</div> 

div {
    color: rgb(12, 45, 255, 0.7);
    padding: 20px;
}

<script>
const tag = document.getElementById("demo");
tag.style.color = "rgb(255, 45, 255, 0.7)";
</script>

출력: