디자인 도구에서 "255, 107, 53"처럼 쉼표로 구분된 값만 복사될 때가 있습니다. CSS에서 바로 쓰려면 형식을 맞춰야 합니다.
rgb() 함수 사용
color: rgb(255, 107, 53); 형태로 감싸면 됩니다. 공백이 있어도 상관없습니다. rgb(255,107,53)도 rgb(255, 107, 53)도 모두 유효합니다.
CSS 최신 문법
CSS Color Level 4에서는 쉼표 없이 rgb(255 107 53)처럼 쓸 수 있습니다. 투명도도 / 0.5처럼 슬래시로 추가합니다. 모던 브라우저는 모두 지원합니다.
HEX로 변환
색상 변환기에 RGB 값을 입력하면 HEX로 변환됩니다. #FF6B35처럼 더 짧은 형태로 쓸 수 있습니다.
자동화 팁
VS Code에서 Color Highlight 확장을 쓰면 rgb 값 위에 마우스를 올려 다른 형식으로 변환할 수 있습니다. 수동으로 바꾸는 수고를 덜 수 있습니다.
CSS 최신 색상 문법
CSS Color Level 4에서는 쉼표 없이 rgb(255 107 53)처럼 작성할 수 있습니다. 투명도는 슬래시로 구분합니다: rgb(255 107 53 / 0.8). 이 문법은 모던 브라우저에서 모두 지원됩니다. 색상 변환기에서 값을 확인하고 원하는 형식으로 작성하세요.
rgba() vs rgb()
최신 문법에서 rgba()는 불필요합니다. rgb(255 107 53 / 0.5)처럼 rgb() 안에서 투명도를 지정할 수 있습니다. 하지만 레거시 브라우저 지원이 필요하면 rgba(255, 107, 53, 0.5) 형식을 사용해야 합니다. 프로젝트의 브라우저 지원 범위에 따라 선택하세요.
값 형식 선택
rgba()와 rgb()를 상황에 따라 선택하세요. 투명도가 필요 없으면 rgb()가 더 간결합니다. 최신 CSS 문법을 사용하면 rgb(255 107 53 / 0.8)처럼 한 함수로 투명도까지 표현할 수 있습니다.