HTML/CSS에서 색상은 다양한 형식으로 표현돼요. 각 형식이 같은 색을 다른 방식으로 표현하지만 사용 목적은 다릅니다. 디자이너와 개발자 모두 알아 두면 좋은 가이드예요.
HEX - 가장 흔한 형식
HEX(헥사데시멀)는 #RRGGBB 형식으로 16진수 6자리로 색을 표현해요. 예: #FF5733은 빨강 255, 초록 87, 파랑 51을 의미합니다. 가장 짧고 간결해서 디자인 도구·CSS·HTML에서 가장 흔히 쓰여요. 컬러 코드 변환기에서 자동 변환이 가능해요.
RGB - 직관적인 색 조합
RGB는 "빨강(R)·초록(G)·파랑(B)"의 0~255 값을 명시적으로 보여 줍니다. 예: rgb(255, 87, 51). 같은 색을 표현하지만 "빨강이 얼마나 강한지"를 직관적으로 볼 수 있어 색 조합 작업에 유용해요. 또 RGBA로 투명도(alpha)를 추가할 수 있어 반투명 색상에 자주 쓰여요.
HSL - 디자이너 친화적
HSL(Hue, Saturation, Lightness)은 색조(0~360도), 채도(0~100%), 명도(0~100%)로 색을 표현해요. 예: hsl(11, 100%, 60%). HSL은 "같은 색계열에서 명도만 살짝 변경"하는 작업에 매우 편리합니다. 디자이너가 색상 팔레트를 만들 때 HSL이 가장 직관적이에요.
어떤 형식을 언제 쓸까?
HEX는 디자인 시안·CSS 작성 시. RGB는 색 조합·이미지 처리 시. HSL은 색상 팔레트·테마 디자인 시. 같은 프로젝트 안에서도 작업 단계별로 적절한 형식을 활용하면 효율이 올라가요.
투명도 - RGBA·HEX 8자리
투명도가 필요할 때는 RGBA(rgba(255,87,51,0.5)) 또는 HEX 8자리(#FF573380)를 사용해요. HEX 8자리의 마지막 두 자리가 알파(투명도) 값으로 00(완전 투명)~FF(완전 불투명)예요. 50% 투명은 80, 70% 투명은 B3 같이 변환합니다.
색상 팔레트 만들기
좋은 디자인은 "색상 5~7개로 구성된 일관된 팔레트"에서 나와요. 메인 컬러 1개, 서브 컬러 1~2개, 강조 컬러 1개, 회색 톤 2~3개로 구성하는 것이 일반적입니다. HSL을 활용하면 같은 색조에서 명도만 다른 "같은 계열 변형"을 쉽게 만들 수 있어요. 디자인·CSS 가이드에서 팔레트 도구도 확인할 수 있어요.
접근성 - 명도 대비
웹 접근성(WCAG)은 텍스트와 배경의 명도 대비가 4.5:1 이상이어야 한다고 권장해요. 검은 글자 + 흰 배경은 21:1로 가장 안전하고, 회색 글자 + 흰 배경은 대비가 부족할 수 있어요. "WebAIM Contrast Checker" 같은 도구로 미리 확인해 시각 약자를 위한 디자인을 만드세요.
CSS 변수와 색상 관리
큰 프로젝트는 색상을 CSS 변수로 관리해 일관성을 유지해요. :root { --primary: #FF5733; } 같이 정의하면 모든 컴포넌트에서 var(--primary)로 참조할 수 있어요. 다크 모드 전환 시에도 변수만 바꾸면 한 번에 적용됩니다.
색상 도구 - Coolors·Adobe Color
Coolors.co는 자동 팔레트 생성 도구로 무작위 팔레트를 빠르게 탐색할 수 있어요. Adobe Color는 색채 이론(보색·유사색·삼각색)을 기반으로 조화로운 팔레트를 만들어 줍니다. 모두 무료로 사용 가능하니 디자인 시작 단계에서 적극 활용해 보세요.
