색상 코드 변환
브라우저 처리색상 코드 변환은 같은 색을 HEX, RGB, HSL 등 서로 다른 표기 형식으로 바꿔 주는 도구입니다.
사용 전 확인
- 파일·이미지·문서 처리 도구는 브라우저 안에서 처리되더라도 원본에 개인정보나 민감 정보가 포함될 수 있습니다. 공유·제출 전 원본과 결과를 한 번 더 확인하세요.
도구 실행입력 후 결과 확인
색상 코드 변환 샘플 실행
브라우저 처리
색상 코드 변환은 같은 색을 HEX, RGB, HSL 등 서로 다른 표기 형식으로 바꿔 주는 도구입니다. 디자인 시안에서는 HEX(#FF5733)로 받았는데 코드에서는 rgb(255, 87, 51)이나 hsl 값이 필요한 상황처럼, 형식만 달라 매번 손으로 환산하던 번거로움을 줄여 줍니다.
샘플 결과
색상 코드 변환 샘플 결과 입력값을 분석한 뒤 복사 가능한 결과, 오류 안내, 다음 작업 힌트를 이 영역에 표시합니다.
자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.
색상 코드 변환 사용 안내
색상 코드 변환은 같은 색을 HEX, RGB, HSL 등 서로 다른 표기 형식으로 바꿔 주는 도구입니다. 디자인 시안에서는 HEX(#FF5733)로 받았는데 코드에서는 rgb(255, 87, 51)이나 hsl 값이 필요한 상황처럼, 형식만 달라 매번 손으로 환산하던 번거로움을 줄여 줍니다.
한쪽 형식에 값을 입력하면 나머지 형식이 동시에 계산되어 표시되므로, 어떤 형식을 받든 원하는 표기로 바로 옮겨 쓸 수 있습니다. HSL 값을 보면 색의 색조·채도·명도를 직관적으로 이해할 수 있어, 색을 미세하게 조정할 때도 도움이 됩니다.
사용 방법
- 변환하려는 색상 값을 알고 있는 형식의 입력란에 넣습니다. 예를 들어 HEX 코드를 #4A90E2 형태로 입력합니다.
- 값을 입력하면 RGB, HSL 등 다른 형식의 값이 자동으로 함께 계산되어 표시됩니다.
- 미리보기 영역에서 실제 색이 의도한 색과 일치하는지 눈으로 확인합니다.
- 필요한 형식의 값을 복사해 CSS, 디자인 도구, 코드 등에 붙여넣습니다.
이럴 때 사용하세요
- 색상 코드 변환로 UI에 적용하기 전 시각 값을 빠르게 미리보기
- 색상 코드 변환 결과를 컬러 믹서 작업 전후에 비교하며 디자인 시스템에 넣을 토큰이나 CSS를 정리하기
- 색상 코드 변환 결과를 확인한 뒤 컬러 믹서 또는 색상 팔레트 생성기에서 다음 작업을 이어갈 수 있습니다.
문제가 생겼을 때
색상 코드 변환: 미리보기와 실제 화면이 다름
부모 요소 크기, 상속 스타일과 선택자 우선순위를 확인하세요.
색상 코드 변환: 입력 형식을 인식하지 못하거나 오류 위치가 달라 보임
색상 코드 변환에서 가장 작은 샘플부터 괄호, 따옴표, 구분자와 인코딩을 순서대로 확인하세요.
활용 팁
- 디자이너에게 HEX로 전달받은 색을 RGBA로 바꿔 투명도를 적용해야 할 때, 여기서 RGB 값을 확인한 뒤 알파 값만 더하면 됩니다.
- HSL은 명도(L)와 채도(S)를 숫자로 다루기 때문에, 같은 색조에서 조금 더 밝거나 어두운 톤을 만들고 싶을 때 값을 미세 조정하기 편합니다.
- 브랜드 색상을 문서·코드·디자인 도구마다 다른 형식으로 관리해야 할 때, 한 번 변환해 각 형식의 값을 정리해 두면 일관성을 유지하기 좋습니다.