CSS의 색상

CSS에서 색과 관련된 값은 일반적으로 3가지 방법입니다.

• 키워드
• RGB
• hex code

키워드

키우드는 색을 지정하는 가장 간단한 방법으로 브라우저에 140가지의 색상이 존재합니다. 다른 방식에 비해 제한적인 편입니다.
색상 확인 링크

 .box {
	 width: 200px; 
	 height: 100px;
   background-color: blue;
}

RGB

빛의 3원색인 빨간색(Red), 초록색(Green), 파란색(Blue)을 혼합하여 색을 표현하는 방식이다. RGB는 0~255사이의 값으로 표현한다.

 .box {
	 width: 200px; 
	 height: 100px;
   background-color: rgb(102, 205,170)
}

HEX code

HEX 값은 16진수 6자리 코드로 색상을 표현하는 방식입니다. 6자리 중 각각 2자리씩 빨간색(RED), 녹색(Green), 파란색(Blue)에 대한 값을 표현합니다.

예를 들어 빨간색은 #FF0000, 보락색은 #800080으로 표현합니다.

Alpha

HEX code와 RGB 에는 alpha라는 값이 존재한다 이는 흔히 투명도라고 하는 것이다.

RGB alpha

RGB는 rgba를 통해서 표현하며 alpha값은 0~1사이의 값으로 결정되며 투명도는 0~100%와 같다.

.box {
	width: 200px; 
	height: 100px;
	background-color: rgba(102, 205, 170, 0.5); 
}

HEX code alpha

HEX code에서 alpha 값은 00~FF사이의 16진수 숫자로 결정되며 투명도 0~100%와 같다.

.box {
	width: 200px; 
	height: 100px;
	background-color: #F0808055;
}

출처)

groom-edu

해당 내용은 k-digital credit 구름 강의 내용을 보고 정리한 내용입니다.