개발
색상 변환기
HEX, RGB, HSL 색상을 서로 변환하고 바로 복사해요.
도구를 불러오는 중입니다.
도구 안내
HEX, RGB, HSL 색상값을 서로 변환
색상 변환기는 디자인 시안, CSS, 브랜드 가이드에서 받은 색상값을 HEX, RGB, HSL 형식으로 빠르게 바꿀 때 씁니다. 웹 개발, 디자인 QA, 접근성 점검 전 색상값을 맞춰 적기 좋습니다.
이럴 때 사용해요
- HEX 색상을 RGB/HSL로 변환
- CSS 색상값 형식 맞추기
- 디자인 가이드와 개발 코드 색상 비교
알아두면 좋아요
색상 공간과 화면 보정에 따라 실제 표시 색은 달라질 수 있습니다. 브랜드 색상은 공식 가이드의 기준값을 우선 사용하세요.
개발 작업에서 확인할 점
생성된 코드, 정규식, 메타 태그, 설정 파일은 초안으로 보고 실제 프로젝트의 런타임, 보안 정책, 배포 환경에서 다시 검증하세요.
처리 방식
입력한 값은 가능한 한 브라우저 안에서 계산하고 변환합니다. 중요한 결과는 원본과 한 번 더 비교하세요. 업데이트 기준일은 2026년 6월 30일입니다.
색상 변환 전 체크
입력 형식
- HEX, RGB, HSL 중 원본 형식을 정확히 확인
- 알파값이 있는 색상은 투명도 반영 여부를 보기
색상 비교
- 변환 후 미리보기 색이 원본과 같은지 확인
- 디자인 도구와 브라우저 색상 표현 차이를 고려
적용 전
- CSS 변수나 토큰 이름과 함께 관리
- 브랜드 색은 공식 가이드 값과 대조
HEX, RGB, HSL을 서로 바꿀 수 있나요?
색상 값을 입력하면 HEX, RGB, HSL 같은 자주 쓰는 형식으로 변환해 비교할 수 있습니다.
투명도 값도 확인할 수 있나요?
가능한 형식에서는 alpha 값을 함께 다뤄 RGBA나 HSLA 표현을 확인할 수 있습니다.
디자인 시스템에 바로 넣어도 되나요?
형식 변환에는 유용하지만 실제 브랜드 색상은 접근성, 대비, 배경 조합을 함께 확인하세요.