색상 변환기 무료 — HEX RGB HSL 색상코드 변환 완전 정리

웹 디자인이나 개발을 하다 보면 같은 색상을 HEX, RGB, HSL 등 다양한 형식으로 표현해야 하는 경우가 생깁니다. 포토샵에서 따온 색상 코드를 CSS에 적용하거나, 디자이너가 준 색상 값을 코드로 변환해야 할 때 색상 변환기가 필요합니다.

---

디지털 색상의 기초

컴퓨터 모니터는 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 빛의 조합으로 색상을 표현합니다. 이를 RGB 색상 모델이라고 합니다. 이 세 가지 빛의 강도를 조절해서 수백만 가지의 색상을 만들 수 있습니다.

왜 빛의 삼원색이 RGB인가?

인간의 눈에는 세 종류의 원뿔 세포가 있습니다. 각각 빨강, 초록, 파랑 파장에 가장 민감하게 반응합니다. 모니터는 이 세 가지 색의 빛을 조합해서 우리 뇌가 다양한 색상으로 인식하도록 합니다.

---

HEX 색상 코드

HEX(16진수) 색상 코드는 웹 개발에서 가장 많이 사용되는 색상 표현 방식입니다.

형식: #RRGGBB 또는 #RGB (단축형)

#FF5733 분석:
  FF = 빨강(255) → 최대
  57 = 초록(87)  → 중간
  33 = 파랑(51)  → 낮음
  → 주황빛이 강한 빨간색

16진수 이해하기:

16진수는 09, AF 16개의 기호를 사용합니다.

0 = 0
9 = 9
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15
FF = 15×16 + 15 = 255 (최댓값)
00 = 0 (최솟값)

단축형: #RGB는 #RRGGBB의 단축 표현입니다.

#F50 = #FF5500
#fff = #ffffff (흰색)
#000 = #000000 (검정)

---

RGB 색상

RGB는 빨강(Red), 초록(Green), 파랑(Blue) 각각 0~255 범위의 숫자로 표현합니다.

형식: rgb(R, G, B) 또는 rgba(R, G, B, A)

자주 쓰는 색상:
  흰색: rgb(255, 255, 255)
  검정: rgb(0, 0, 0)
  빨강: rgb(255, 0, 0)
  초록: rgb(0, 255, 0)
  파랑: rgb(0, 0, 255)
  노랑: rgb(255, 255, 0)
  청록: rgb(0, 255, 255)
  자홍: rgb(255, 0, 255)

RGBA의 A (Alpha): 투명도를 나타냅니다. 0은 완전 투명, 1은 완전 불투명입니다.

/* 반투명 검정 오버레이 */
background: rgba(0, 0, 0, 0.5);

---

HSL 색상

HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)로 색상을 표현하는 방식입니다. 인간이 색을 인식하는 방식과 가장 가깝습니다.

형식: hsl(H, S%, L%)

• H (Hue, 색조): 0~360도, 색상환에서의 위치
  • 0° = 빨강, 60° = 노랑, 120° = 초록
  • 180° = 청록, 240° = 파랑, 300° = 자홍
• S (Saturation, 채도): 0~100%, 색의 진함 정도
  • 0% = 회색(무채색), 100% = 순수한 색
• L (Lightness, 밝기): 0~100%, 밝고 어두운 정도
  • 0% = 검정, 50% = 정상, 100% = 흰색

hsl(0, 100%, 50%) = 순수한 빨강
hsl(0, 100%, 25%) = 어두운 빨강
hsl(0, 100%, 75%) = 밝은 분홍
hsl(0, 0%, 50%)   = 중간 회색

HSL이 유용한 이유: HSL을 사용하면 색상을 직관적으로 조절할 수 있습니다. 색조만 바꾸면 전체 색상 팔레트를 바꿀 수 있고, 밝기만 조절해서 같은 색의 밝고 어두운 버전을 쉽게 만들 수 있습니다.

---

색상 형식별 용도

형식	장점	주요 용도
HEX	짧고 표준적	CSS, 디자인 도구
RGB	직관적, 투명도 지원	CSS, 이미지 처리
HSL	인간 친화적	동적 색상 생성, 테마
CMYK	인쇄에 최적화	인쇄물, 출판

---

CSS에서 색상 사용하기

/* 모두 같은 색 (빨강) */
color: #FF0000;
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);

/* 반투명 */
color: rgba(255, 0, 0, 0.5);
color: hsla(0, 100%, 50%, 0.5);

---

가장 쉬운 방법 — 브라우저에서 바로

ToolZip 색상 변환기 바로가기 →

• 🎨 HEX ↔ RGB ↔ HSL 상호 변환
• 🖌️ 색상 피커(Color Picker) 포함
• 💰 완전 무료, 회원가입 불필요

---

사용 방법

1. toolzip.app/tools/color-converter 접속
2. 색상 값 입력 또는 색상 피커로 선택
3. HEX, RGB, HSL 값 즉시 확인
4. 원하는 형식으로 복사

---

자주 묻는 질문

Q. #fff와 #ffffff는 같은 색인가요?

네, 같습니다. HEX 단축형에서 각 자리를 반복한 것입니다. #fff = #ffffff (흰색)

Q. 투명한 색을 표현하려면?

RGBA나 HSLA를 사용하세요. rgba(0, 0, 0, 0)은 완전 투명한 검정입니다.

Q. CSS에서 어떤 색상 형식을 쓰는 게 좋나요?

HEX는 간결하고, RGB/HSL은 수정하기 쉽습니다. 동적으로 색상을 변경해야 한다면 HSL이 가장 직관적입니다.

---

정리

• ✅ HEX ↔ RGB ↔ HSL 상호 변환
• ✅ 색상 피커 포함
• ✅ 완전 무료, 회원가입 불필요

ToolZip 색상 변환기 바로가기 →

---

관련 도구: 이미지 색상 팔레트 추출기 · JSON 포맷터 · URL 인코더