디자이너가 보내준 #3B82F6, 나는 어떻게 CSS에 넣어야 하나 — HEX·RGB·HSL 색상 코드 변환 완전 정복

디자이너한테 피그마 링크 받았는데 버튼 색이 #3B82F6이에요. CSS에 그냥 붙여넣으면 되나 싶었더니, 백엔드 개발자가 'RGB 값으로 주세요'라고 하고, 브랜드 팀은 'HSL도 필요해요'라고 합니다. 같은 파란색인데 포맷이 세 개나 나왔어요. 처음 겪으면 당황스럽죠. 저도 그랬거든요.

HEX, RGB, HSL — 뭐가 다른 건데요?

세 포맷 모두 '화면에 표시되는 색'을 표현하는 방식이에요. 다만 사고방식이 달라요. HEX는 웹 브라우저가 1990년대부터 써온 16진수 표기법. RGB는 빛의 삼원색을 각각 얼마나 섞을지 수치로 말하는 방식. HSL은 색상환 위치(Hue), 선명도(Saturation), 밝기(Lightness) — 그림 그리는 사람 관점에서 색을 설명하는 방식이에요.

HEX: 웹 표준이 된 이유가 있어요

#3B82F6을 분해하면 이렇게 돼요. 3B는 빨강 채널(10진수로 59), 82는 초록(130), F6는 파랑(246). 16진수 두 글자가 0~255 사이 숫자 하나를 표현해요. 그래서 여섯 글자면 RGB 세 채널을 모두 담을 수 있고요.

#FFF처럼 세 글자 축약형도 있어요. #FFF는 #FFFFFF와 완전히 같은 색이에요. 각 글자를 두 번 반복하는 방식이거든요. 투명도는 HEX로 표현하기 좀 어색해요. 8자리 HEX(#3B82F6CC)를 쓰거나, 아니면 RGBA로 전환하는 게 낫습니다.

RGB: 개발자가 실제로 선호하는 이유

RGB는 프로그래밍할 때 훨씬 다루기 편해요. 빨간 채널을 20 줄이고 싶다? 숫자에서 그냥 빼면 돼요. 자바스크립트에서 색을 동적으로 바꾸고 싶다? RGBA의 네 번째 숫자(알파값)를 조절하면 투명도가 바뀌어요. HEX로 이걸 하려면 문자열 파싱이 필요한데, RGB는 숫자 세 개니까 계산이 직관적입니다.

/* HEX — 간결하고 범용적 */
.button { background: #3B82F6; }

/* RGB — 숫자 조작이 쉬움 */
.button { background: rgb(59, 130, 246); }

/* RGBA — 반투명 오버레이 */
.overlay { background: rgba(59, 130, 246, 0.15); }

/* CSS 변수 + HSL — 디자인 시스템에서 가장 유지보수 편함 */
:root { --brand-hue: 217; }
.button { background: hsl(var(--brand-hue), 91%, 60%); }
.button:hover { background: hsl(var(--brand-hue), 91%, 50%); }

HSL: 디자이너가 제일 좋아하는 포맷

HSL은 사람이 색을 인식하는 방식과 가장 비슷해요. Hue는 색상환에서 어디에 있는지(0°=빨강, 120°=초록, 240°=파랑), Saturation은 얼마나 선명한지(0%=무채색, 100%=원색), Lightness는 얼마나 밝은지(0%=검정, 100%=흰색, 50%=본래 색) 나타내요.

디자인 시스템 만들 때 HSL이 빛나는 이유가 있어요. 브랜드 블루의 밝은 버전이 필요하다? Hue랑 Saturation 고정하고 Lightness만 올리면 돼요. 호버 상태가 좀 더 어두웠으면 한다? Lightness를 10 내리면 끝. HEX 계산 없이, 감으로 조절할 수 있어요.

세 포맷 간 변환 — 직접 하는 법

HEX에서 RGB 변환은 비교적 쉬워요. 두 글자씩 끊어서 16진수를 10진수로 바꾸면 돼요. #3B82F6 → (0x3B, 0x82, 0xF6) → (59, 130, 246). 계산기에서 16진수 모드로 바꾸면 바로 나오죠.

RGB에서 HSL은 좀 복잡해요. 값을 0~1 범위로 정규화하고, 최댓값·최솟값 차이로 명도를 구하고, 거기서 채도를 계산하고, 최댓값이 어느 채널인지에 따라 색상각을 구해요. 공식이 4단계 이상이라 실수하기 쉬워요. 도구 쓰는 게 훨씬 현명합니다.

실무에서 쓸 수 있는 팔레트 만들기

프로젝트 하나에 색이 하나면 충분하지 않아요. 배경색, 테두리, 비활성 상태, 호버, 텍스트용 색이 따로 필요하죠. HSL로 이걸 하면 Hue와 Saturation을 고정하고 Lightness만 바꿔서 전체 스케일을 만들 수 있어요.

• 50: hsl(217, 91%, 97%) — 페이지 배경, 아주 연한 틴트
• 100: hsl(217, 91%, 93%) — 카드 배경, 서브 섹션
• 200: hsl(217, 91%, 85%) — 테두리, 구분선
• 300: hsl(217, 91%, 75%) — 비활성 상태, 플레이스홀더
• 400: hsl(217, 91%, 65%) — 보조 액션, 덜 중요한 요소
• 500: hsl(217, 91%, 60%) — 프라이머리 브랜드 색 (#3B82F6 기준)
• 600: hsl(217, 91%, 50%) — 호버 상태
• 700: hsl(217, 91%, 40%) — 프레스 상태, 강조
• 800: hsl(217, 91%, 30%) — 다크 배경, 반전 텍스트
• 900: hsl(217, 91%, 20%) — 최대 대비, 다크 모드 프라이머리

실제 프로젝트에서 어떤 포맷을 쓸까

상황마다 맞는 포맷이 달라요. 디자인 핸드오프 문서나 HTML 속성에는 HEX가 깔끔하고 범용적이에요. CSS 커스텀 프로퍼티나 Tailwind 설정 파일에는 HSL이 변수 조합이 쉬워서 좋고요. 자바스크립트에서 색상을 계산하거나 동적으로 바꿀 때는 RGB/RGBA가 편해요. SVG fill 속성이나 HTML 이메일 템플릿에는 HEX가 제일 안전합니다.