색상 변환 가이드 - HEX, RGB, HSL 색상 코드 변환하는 법
디자인과 개발에 필요한 색상 코드 변환 방법. HEX, RGB, HSL 차이점과 사용법 총정리.
🎨
색상 변환기 바로 사용하기
HEX, RGB, HSL 색상 코드를 실시간 변환
→
색상 코드의 종류와 차이점
웹과 디자인에서 사용하는 주요 색상 코드 형식은 세 가지입니다:
- HEX(헥스): #FF5733처럼 # 뒤에 6자리 16진수로 표현합니다. CSS에서 가장 널리 사용됩니다.
- RGB: rgb(255, 87, 51)처럼 빨강, 초록, 파랑 값을 0~255로 지정합니다. 프로그래밍에서 색상을 다룰 때 직관적입니다.
- HSL: hsl(14, 100%, 60%)처럼 색상(Hue), 채도(Saturation), 명도(Lightness)로 표현합니다. 색상 조합을 만들 때 유용합니다.
같은 색상이라도 사용 환경에 따라 다른 형식이 필요하기 때문에 색상 변환 도구가 필수입니다.
디자이너와 개발자의 색상 코드 활용
디자이너와 개발자는 작업 환경에 따라 다른 색상 형식을 사용합니다:
- Figma/Sketch: 기본적으로 HEX 코드를 사용합니다
- CSS 스타일링: HEX, RGB, HSL 모두 사용 가능하지만 HEX가 가장 흔합니다
- JavaScript: rgba() 형식으로 투명도 포함 색상을 다룰 때 유용합니다
- iOS/Android: 플랫폼마다 선호하는 색상 형식이 다릅니다
디자이너가 Figma에서 HEX로 전달한 색상을 개발자가 CSS에서 rgba로 변환해야 하는 경우가 흔합니다.
색상 조합과 배색 팁
HSL 형식을 이해하면 조화로운 색상 조합을 쉽게 만들 수 있습니다:
- 보색: Hue 값을 180도 반대로 설정 (예: 0 → 180)
- 유사색: Hue 값을 30도 간격으로 배치
- 삼각 배색: Hue 값을 120도 간격으로 배치
- 명도 변화: 같은 Hue에서 Lightness만 조절하면 같은 톤의 밝기 변형을 만들 수 있습니다
브랜드 컬러에서 밝은 버전이나 어두운 버전을 만들 때 HSL의 Lightness 값을 조절하는 것이 가장 자연스럽습니다.
Toolkio 색상 변환기 사용법
Toolkio의 색상 변환기를 사용하면 HEX, RGB, HSL 간 변환을 즉시 할 수 있습니다.
1. 아무 형식으로든 색상 코드를 입력
2. 나머지 형식으로 자동 변환 결과 확인
3. 색상 미리보기로 실제 색상 확인
4. 필요한 형식의 코드를 복사
컬러 피커도 제공되어 시각적으로 색상을 선택한 후 모든 형식의 코드를 한번에 얻을 수 있습니다.