사용법
- 색상 선택기를 클릭해 원하는 색을 고르세요.
- HEX·RGB·HSL 코드가 자동으로 표시됩니다.
- 복사 버튼으로 원하는 형식을 바로 사용하세요.
🎯 이럴 때 씁니다
- CSS 스타일 작성 시 색상 코드 확인
- 디자인 시안의 색상 값 추출
- 브랜드 컬러 코드 변환(HEX↔RGB↔HSL)
입력 · 출력 예시
입력
HEX #2554e0
출력
rgb(37, 84, 224) hsl(225, 75%, 51%)
HEX 코드 #2554e0을 선택하면 같은 색을 RGB(37, 84, 224)와 HSL(225°, 75%, 51%) 표기로 즉시 변환해 보여줍니다.
자주 묻는 질문
- 이미지에서 색상을 추출할 수 있나요?
- 현재는 색상 선택기(팔레트)로 직접 고르는 방식만 지원합니다.
- HSL은 무엇을 의미하나요?
- 색상(Hue)·채도(Saturation)·명도(Lightness)로 색을 표현하는 방식으로, 색조를 유지하며 밝기·채도만 조절할 때 유용합니다.
- 선택한 색상이 서버로 전송되나요?
- 전송되지 않습니다. 브라우저 안에서만 변환됩니다.
🎨 더 알아보기: HEX RGB HSL 색상 코드 변환하는 방법
세 가지 색상 표기법의 차이와 변환법
다른 코딩 도구
📘
JSON 포맷터
JSON 정리·검증·압축
🗓️
타임스탬프 변환
유닉스 타임스탬프 ↔ 날짜 변환
🧩
JSON 인코딩·디코딩
텍스트 ↔ JSON 문자열 리터럴 변환
✨
JavaScript/CSS 포맷팅
JS·CSS 코드 들여쓰기 정리
✂️
JavaScript/CSS 압축(Minify)
주석·공백 제거로 용량 줄이기
🧽
HTML 코드 포맷팅
HTML 태그 구조 들여쓰기 정리
🧹
XML 포매팅
XML 태그 구조 들여쓰기 정리
🗃️
SQL 문 정렬
SQL 절 단위로 줄바꿈 정렬
🔣
HTML 엔티티 인코드·디코드
특수문자 ↔ HTML 엔티티 변환
📊
Excel → TABLE TAG 변환
엑셀 표를 HTML TABLE로 변환
⛓️
링크(href, src) 추출
HTML에서 href·src 링크 추출
🐘
PHP 구문 검사기
괄호·문자열 짝 검사(실용 검사기)
🗄️
MySQL 구문 검사기
괄호·따옴표 짝 검사(실용 검사기)
🔍
HTML5 검증기
태그 짝·중복id·alt누락 검사
✍️
온라인 HTML 에디터
시각적으로 HTML 작성·편집