·2분 읽기
HEX RGB 색상 변환 가이드 — 디자이너와 개발자 모두를 위한
HEX 색상 코드와 RGB 값을 서로 변환하는 방법을 정리했습니다. HSL 변환, 색상 팔레트 만들기, 실무 활용 팁까지 담았어요.
🎨
색상 변환기 바로 사용하기
HEX, RGB, HSL 색상 코드를 실시간 변환
→
HEX와 RGB, 뭐가 다를까?
같은 색상을 표현하는 두 가지 방식이에요.
- HEX: #FF5733 — 웹에서 가장 많이 쓰이는 6자리 16진수 코드
- RGB: rgb(255, 87, 51) — 빨강, 초록, 파랑 각각 0~255 값
둘 다 같은 색을 나타내지만 사용하는 상황이 달라요. CSS에서는 HEX를 주로 쓰고, JavaScript나 디자인 도구에서는 RGB를 많이 써요. 디자이너가 피그마에서 RGB 값을 주면 개발자는 HEX로 바꿔서 CSS에 넣어야 하거든요.
HEX → RGB 변환 원리
HEX 코드 #FF5733을 RGB로 바꾸는 원리는 간단해요.
6자리를 2자리씩 끊으면 돼요.
- FF → 빨강: 255
- 57 → 초록: 87
- 33 → 파랑: 51
16진수를 10진수로 변환하는 거예요. F는 15, FF는 15x16+15 = 255. 이런 계산을 매번 할 수는 없으니 Toolkio 색상 변환기에 HEX 코드를 넣으면 RGB 값이 바로 나와요.
HSL도 알아두면 좋은 이유
HSL은 Hue(색조), Saturation(채도), Lightness(명도)로 색을 표현해요.
- H: 0~360 (0=빨강, 120=초록, 240=파랑)
- S: 0~100% (0%=회색, 100%=순색)
- L: 0~100% (0%=검정, 100%=흰색)
HSL이 좋은 이유는 색상 팔레트를 만들기 쉽기 때문이에요. 같은 H 값에서 S와 L만 바꾸면 자연스러운 그라데이션이 만들어져요. 브랜드 컬러의 밝은 버전, 어두운 버전을 만들 때 정말 편하거든요.
Toolkio 색상 변환기에서 HEX, RGB, HSL 세 가지를 동시에 확인할 수 있어요.
실무에서 색상 변환이 필요한 순간
**1. 피그마 → CSS 코딩**
디자이너가 준 RGB 값을 CSS의 HEX로 변환할 때
**2. 다크모드 구현**
HSL에서 L(명도)만 조절하면 라이트/다크 모드 색상을 쉽게 만들 수 있어요
**3. 투명도 적용**
HEX 8자리(예: #FF573380)의 마지막 2자리가 투명도예요. 80은 약 50% 투명
**4. 브랜드 가이드 색상 통일**
같은 색인데 HEX, RGB, CMYK 등 여러 형태로 표기해야 할 때
Toolkio 색상 변환기에 아무 형식으로 넣으면 나머지 형식을 모두 보여줘요.