CSS 기초(2) 컬러이름/헥사코드/RGB/RGBA

1.컬러 이름

CSS가 기본적으로 제공하는 색 이름을 그대로 사용하는 방식

​

color: red;

background-color: blue;

border-color: pink;

​

2. 헥사 코드 HEX 색상코드

#RRGGBB 구조로 이루어진 16진수 색상 코드

​

color: #FF5733;

background-color: #FAFAFA;

border: 1px solid #222222;

​

#R R G G B B

​

fff 화이트 / 000 블랙

앞에ff 레드 ff0000

가운데 ff 그린 00ff00

마지막 2개 ff 블루 0000ff

ffff00 옐로우

​

2개 반복

#ff3300 = #f30

​

​

3. RGB (Red, Green, Blue)

0~255 사이 숫자로 색을 표현하는 방식

​

color: rgb(255, 0, 0); red

background: rgb(240, 240, 240);

​

4.RGBA (투명도 조절)

RGB + A(알파값 = 투명도)

​

background-color: rgba(0, 0, 0, 0.5);

​

* 반투명 검정 *

​

• 0 = 완전 투명
• 1 = 불투명(100%)

방식	예	장점	단점	주 사용처
컬러 이름	red	입력 쉽고 빠름	색 종류 적음	테스트용, 기초
HEX	#FFCC99	가장 많이 씀, 다양	숫자 암기 어려움	실무 대부분
RGB	rgb(255, 204, 153)	빛 기반 조절 쉬움	길다	UI/투명도 작업
RGBA	rgba(0,0,0,0.3)	투명 조절 가능	없음	그림자, 오버레이

​