색상 변환기
이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
예제 색상
색상 선택
rgba(59, 130, 246, 1)
RGB 채널
HSL
미리보기
HEX, RGB, HSL, HSV 색상 코드를 상호 변환합니다.
활용하기
디자인 도구와 코드 사이의 색상 변환
색상 코드 변환은 디자인 도구와 실제 코드 사이의 다리 역할을 합니다. 디자이너는 Figma·포토샵에서 HEX를 쓰지만, CSS에서 투명도를 다루려면 RGBA가 필요하고, 명도·채도를 미세하게 조정하려면 HSL이 직관적입니다. 본 도구로 HEX ↔ RGB ↔ HSL ↔ HSV를 즉시 오가며 같은 색을 상황에 맞는 형식으로 바꿔 쓸 수 있습니다.
특히 HSL은 색을 다룰 때 강력합니다. 색상(H)은 그대로 두고 명도(L)만 낮추면 같은 계열의 어두운 버전을, 채도(S)만 낮추면 차분한 톤을 만들 수 있어 호버 상태나 다크 모드 색을 체계적으로 파생시키기 좋습니다. 브랜드 색 하나에서 일관된 색 단계를 만들 때 HEX로 일일이 찍기보다 HSL로 명도만 조절하면 조화로운 팔레트를 얻을 수 있습니다.
자주 묻는 질문
HEX, RGB, HSL 색상 형식의 차이는?
HSL과 HSV(HSB)의 차이는?
CSS에서 색상을 어떻게 표현하나요?
투명도(Alpha)는 어떻게 표현하나요?
Figma에서 색상 코드를 복사하면 어떤 형식인가요?
oklch는 기존 색상 표현과 어떻게 다른가요?
색상 변환 시 오차가 생기는 이유는?
JSON 포매터 사용법: API 응답 데이터를 깔끔하게 정리하는 방법
JSON 포매터(JSON Formatter)로 압축된 JSON을 보기 좋게 정리하고, JSON 유효성 검사 및 데이터 구조를 분석하는 방법을 소개합니다.
29분 읽기관련
관련 도구
읽을거리
관련 글
JWT 완벽 가이드: 구조·클레임·서명 알고리즘 총정리
JWT(JSON Web Token)의 Header·Payload·Signature 구조부터 HS256 vs RS256 비교, 보안 취약점까지 실무 중심으로 정리합니다.
21분 읽기CSS box-shadow 완벽 가이드: 문법부터 실전 예시까지
CSS box-shadow 문법, offset·blur·spread·inset 옵션, 레이어드 쉐도우까지 실무 예시와 함께 정리했습니다. 박스 쉐도우 생성기로 코드를 즉시 추출하세요.
17분 읽기CSV ↔ JSON 변환 가이드: 엑셀을 API로 바꾸는 법
CSV·JSON 형식 차이, 상호 변환 방법, 한글 인코딩(EUC-KR vs UTF-8) 문제, 쉼표·줄바꿈 이스케이프, 대용량 처리, JSON Lines까지 실무 노하우를 정리합니다.
29분 읽기