화면에서 색은 어떻게 표현될까?
디지털 화면의 모든 색은 빛의 삼원색인 빨강(R)·초록(G)·파랑(B)을 섞어서 만듭니다. 각 색은 보통 0부터 255까지 256단계로 표현되고, 세 가지가 모두 0이면 검정, 모두 255면 흰색이 됩니다. CSS에서 색을 적는 방법은 여러 가지가 있는데 가장 자주 쓰는 표기는 HEX, RGB, HSL 세 가지예요. 같은 색을 가리키더라도 적는 방법이 다르고, 각각이 특정 작업에 더 잘 맞습니다. 디자이너와 개발자가 색 코드를 다룰 때는 표기법 자체보다 어떤 상황에 어떤 코드가 더 편한지 아는 게 더 중요합니다.
HEX 코드 - 가장 흔한 표기법
HEX는 16진수 6자리로 RGB 값을 표기하는 방식입니다. 앞 두 자리가 빨강, 가운데가 초록, 마지막이 파랑이고, 각 채널은 00부터 FF(255)까지 들어갑니다. 예를 들어 #FF0000은 순수한 빨강, #00FF00은 초록, #FFFFFF는 흰색이에요. 짧고 복사하기 편해 디자인 도구·CSS·JSON에서 가장 많이 쓰이는 표기법이고, 디자이너가 시안에서 넘겨주는 색 값도 보통 HEX입니다. 단점은 사람이 보고 어떤 색인지 직관적으로 알기 어렵다는 점이에요. #4A90E2가 푸른색 계열이라는 건 익숙해져야 보입니다. 또 알파(투명도)를 넣으려면 #RRGGBBAA 8자리 표기를 써야 하는데 일부 옛 도구에서는 지원이 약합니다.
RGB - 빛의 삼원색을 그대로
RGB는 각 채널을 0~255 십진수로 직접 적는 방식입니다. CSS에서는 rgb(255, 0, 0) 또는 rgb(255 0 0)으로 적고, 투명도를 넣으면 rgba(255, 0, 0, 0.5)가 됩니다. 사람의 눈으로 보기에는 HEX보다 약간 더 직관적이지만, 여전히 어떤 색인지 한눈에 들어오지는 않아요. 빛 자체의 채널 값을 그대로 다루기 때문에 이미지 처리·셰이더·픽셀 연산처럼 수치 계산이 필요한 작업에서 RGB가 표준처럼 쓰입니다. 디자인 도구에서는 채널별로 슬라이더가 있어 미세 조정이 가능하지만, 색조를 바꾸려면 R/G/B 세 값을 동시에 움직여야 해서 직관적이지 않다는 한계가 있어요.
HSL - 사람의 직관에 가까운 표기
HSL은 색상(Hue)·채도(Saturation)·명도(Lightness)로 색을 표현합니다. 색상은 0~360도로 색환에서의 각도, 채도는 0~100%로 회색에서 선명한 정도, 명도는 0~100%로 검정에서 흰색까지의 범위예요. 예를 들어 hsl(0, 100%, 50%)는 가장 선명한 빨강, hsl(120, 100%, 50%)는 선명한 초록입니다. HSL의 가장 큰 장점은 사람이 색을 인식하는 방식과 가깝다는 점이에요. 같은 빨강을 더 어둡게 만들려면 명도(L)만 50%에서 30%로 낮추면 되고, 더 흐리게 만들려면 채도(S)만 100%에서 50%로 낮추면 됩니다. 디자인 시스템에서 색상 팔레트를 만들 때 HSL이 매우 편한 이유가 여기에 있어요.
어떤 상황에 어떤 코드를 쓸까?
세 표기법은 서로 변환 가능하니 정답은 없지만, 일반적인 가이드라인은 다음과 같아요.
- 디자인 시안·CSS 변수 정의: HEX. 짧고 표준 같은 위치라 가장 안전합니다.
- 이미지·픽셀 처리 코드: RGB. 수치 계산과 친합니다.
- 다크 모드·호버 상태 같은 색 변형: HSL. 명도(L)만 조정하면 자연스러운 호버 색이 나옵니다.
- 그라디언트·테마 팔레트 만들기: HSL. 색상(H)을 일정 간격으로 회전시키면 조화로운 팔레트가 만들어져요.
- 투명도가 필요한 오버레이: rgba 또는 #RRGGBBAA. HSLA도 가능합니다.
같은 프로젝트에서 한 가지로 통일하지 않아도 됩니다. 정의는 HEX로, 다크 모드 변형은 HSL로 쓰는 식으로 섞어 써도 자연스러워요.
자주 하는 색 선택 실수
색 코드 자체보다는 색을 고르는 안목이 더 중요합니다. 자주 하는 실수 몇 가지를 짚어볼게요.
- 너무 선명한 채도(100%) 를 본문에 사용: 눈이 피로해집니다. 글자 색은 채도 30~70% 정도가 편안해요.
- 명도 차이가 부족한 텍스트/배경: 접근성(WCAG) 기준 4.5:1 이상 명도비를 확보해야 합니다.
- 순수한 검정(#000) 을 글자 색으로 사용: 너무 강합니다. #1a1a1a 정도의 진한 회색이 더 부드럽게 읽혀요.
- 빨강·초록만으로 정보 구분: 적록 색맹에게 구분이 되지 않습니다. 모양·아이콘과 함께 표시하세요.
도구로 색 코드 변환하기
툴박스의 색상 도구는 HEX·RGB·HSL을 즉시 서로 변환하고, 팔레트를 시각적으로 보여줍니다. 디자이너가 보내준 HEX를 HSL로 옮겨 다크 모드 변형을 만들거나, 반대로 직접 고른 HSL을 HEX로 바꿔 디자인 시스템에 등록할 때 한 번만 들렀다 가면 됩니다. 색 자체를 잘 고르는 일은 경험과 안목이 필요하지만, 표기법 변환 같은 단순 작업은 도구에 맡기고 본질에 집중하는 게 좋아요.
