색상 변환기

사용 방법 1. HEX, RGB, HSL 중 원하는 형식으로 색상값을 입력합니다. 2. 다른 형식의 결과가 자동으로 변환되어 표시됩니다. 3. 색상 미리보기로 실제 색을 확인합니다. 4. 각 형식 옆 복사 버튼으로 값을 가져가세요. 이런 분께 추천 CSS 색상을 디자인 툴 형식으로 변환해야 하는 개발자, 디자이너로부터 받은 색상값을 CSS에 적용하는 프론트엔드 엔지니어, 브랜드 컬러를 여러 형식으로 관리하는 디자이너에게 적합합니다. 핵심 기능 • HEX ↔ RGB ↔ HSL 삼방향 변환 • 알파(투명도) 채널 지원 (RGBA, HSLA) • 실시간 색상 미리보기 • 색상 피커로 직접 선택 가능 • 대소문자 구분 없이 HEX 입력 허용 자주 묻는 질문 Q. #FFF와 #FFFFFF는 같은 색인가요? A. 네, 3자리 HEX는 각 자리를 두 번 반복한 6자리와 동일합니다. #FFF = #FFFFFF(흰색). Q. HSL이 RGB보다 편리한 경우는? A. 색조(H)만 바꾸면 같은 채도/밝기의 다른 색을 쉽게 만들 수 있어 테마 색상 시스템 설계에 유리합니다. Q. CSS에서 어떤 형식을 권장하나요? A. 최신 CSS에서는 모두 지원되지만, 가독성 면에서 HSL이, 다른 툴과의 호환성 면에서 HEX가 많이 쓰입니다. 관련 팁 Tailwind CSS나 Figma에서 추출한 HEX 값을 HSL로 변환하면 색상 시스템을 체계적으로 관리하기 쉽습니다. CSS 변수(--primary-color)에 HSL 값을 저장하면 자바스크립트로 밝기·채도 조절이 편리합니다.