·2분 읽기
색상 코드 변환 완벽 가이드 - RGB, HEX, HSL 한번에 변환하기
RGB, HEX, HSL 색상 코드를 서로 변환하는 방법을 정리했습니다. 디자이너와 개발자를 위한 색상 변환 실전 가이드예요.
🎨
색상 변환기 바로 사용하기
HEX, RGB, HSL 색상 코드를 실시간 변환
→
색상 코드, 왜 이렇게 종류가 많을까?
웹 개발하다 보면 HEX 코드를 써야 할 때가 있고, 디자인 툴에서는 RGB를 쓰고, CSS에서는 HSL을 쓰기도 하잖아요. 같은 색인데 표현 방식이 다른 거예요.
HEX는 #FF5733처럼 16진수로 표현하는 방식이에요. 웹에서 가장 많이 쓰이죠.
RGB는 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 빛의 조합으로 rgb(255, 87, 51)처럼 표현해요.
HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 hsl(14, 100%, 60%)처럼 표현하고요. 색 조합을 만들 때 가장 직관적이에요.
각 방식의 장점이 다르기 때문에 상황에 맞게 변환해서 써야 해요.
HEX와 RGB 변환 원리
HEX 코드는 사실 RGB를 16진수로 표현한 거예요. #FF5733을 분해하면 FF(빨강 255), 57(초록 87), 33(파랑 51)이 돼요.
변환 공식은 간단해요. HEX 두 자리를 10진수로 바꾸면 RGB 값이 나오거든요. FF는 15x16+15 = 255, 57은 5x16+7 = 87이에요.
반대로 RGB를 HEX로 바꿀 때는 각 값을 16진수로 변환하면 돼요. 255를 16진수로 바꾸면 FF가 되는 거죠.
직접 계산하기 번거로우니까 [Toolkio 색상 변환기](/color-converter)를 쓰면 값을 넣는 즉시 모든 형식으로 변환해줘요.
HSL이 디자인에서 유용한 이유
HSL은 사람이 색을 인식하는 방식과 가장 비슷해요. H(색상)은 0~360도 색상환, S(채도)는 0~100%, L(명도)은 0~100%로 표현하거든요.
예를 들어 빨간색 계열로 밝은 색부터 어두운 색까지 만들고 싶으면, H를 0으로 고정하고 L만 바꾸면 돼요. RGB로는 이런 작업이 직관적이지 않거든요.
버튼 호버 색상을 만들 때도 HSL이 편해요. 기본 색상의 L값만 10% 낮추면 자연스러운 어두운 변형이 되거든요.
실전에서 색상 코드 활용하기
CSS에서는 세 가지 형식 모두 사용 가능해요. background-color: #FF5733, rgb(255,87,51), hsl(14,100%,60%) 전부 같은 결과가 나와요.
Figma에서 색상을 복사하면 HEX로 나오는데, CSS에서 투명도가 필요하면 rgba로 변환해야 해요. rgba(255, 87, 51, 0.8)처럼 네 번째 값이 투명도예요.
인쇄물이라면 CMYK 변환도 필요해요. 화면용 RGB 색상과 인쇄용 CMYK 색상은 색 영역이 다르기 때문에 변환 후 색이 달라 보일 수 있어요.
[색상 팔레트 조합 가이드](/blog/color-palette-combination-guide)에서 조화로운 색 조합을 만드는 방법도 확인해보세요.