팔레트
온라인으로 색상을 조절하거나 HEX, RGB, HSL 중 하나를 입력하면 나머지 색상 코드 형식이 즉시 동기화됩니다.
팁: #RGB / #RRGGBB, rgb(...), hsl(...) 형식을 붙여넣을 수 있습니다.
온라인 색상 선택기
색상 선택기 또는 RGB 슬라이더를 움직이면 색상 코드가 실시간 동기화됩니다- 온라인 색상 선택기로 색을 고르거나 RGB 슬라이더로 미세 조정합니다.
- 또는 HEX, RGB, HSL 중 아무 입력칸에 색상 코드를 직접 붙여넣습니다.
- 어느 한 칸을 수정하면 나머지 형식도 실시간으로 동기 변환됩니다.
- "HEX 복사", "RGB 복사", "HSL 복사" 버튼으로 코드를 클립보드에 복사할 수 있습니다.
팁:#RGB, #RRGGBB, rgb(...), hsl(...) 입력 형식을 지원하며 "랜덤 색상"으로 아이디어를 얻을 수 있습니다.
언제 사용하나요?
- 디자인 핸드오프, 프런트엔드 작업, 브랜드 색 정리 과정에서 HEX, RGB, HSL을 빠르게 오가고 싶을 때.
- 색을 미세 조정하고 싶은데 어떤 수치 형식으로 만지는 것이 가장 편한지 고민될 때.
- 색상 코드를 CSS, 디자인 도구, 발표 자료, 문서에 바로 붙여 넣고 싶을 때.
HEX, RGB, HSL의 차이는 무엇인가요?
HEX는 코드와 디자인 전달에 편하고, RGB는 빨강·초록·파랑 채널 값을 직접 보여 주며, HSL은 색상·채도·명도로 이해하기 쉬운 형식입니다. 표현 방식만 다를 뿐 같은 색을 가리킬 수 있습니다.
색상 조정에는 어떤 형식을 쓰는 것이 좋나요?
코드에 바로 붙이려면 HEX가 편하고, 채널 값을 직접 만지려면 RGB가 직관적이며, 밝기나 톤 변화를 체계적으로 조정하려면 HSL이 유리합니다. 실무에서는 여러 형식을 오가며 쓰는 경우가 많습니다.
입력 중인데 형식 오류가 뜨는 이유는 무엇인가요?
현재 입력이 완전한 색상 코드로 해석 가능한지 즉시 검사하기 때문입니다. 아직 다 입력되지 않은 상태라면 끝까지 입력하면 정상 동기화되는 경우가 많습니다.
랜덤 색상 기능은 어디에 유용한가요?
영감이 필요할 때, 빠르게 시안을 돌려볼 때, 늘 비슷한 색 범위만 쓰는 습관에서 벗어나고 싶을 때 유용합니다. 마음에 드는 색을 찾은 뒤 다른 입력칸에서 세밀하게 다듬으면 효율적입니다.
이 도구로 색 대비나 접근성도 확인할 수 있나요?
이 페이지는 색 선택과 형식 변환에 초점을 둡니다. 텍스트와 배경의 가독성까지 확인하려면 사이트의 contrast-checker를 함께 사용하는 것이 좋습니다.
소셜 콘텐츠 이미지 편집 가이드: 규격, 비주얼 일관성, 내보내기 설정
소셜 콘텐츠의 완성도는 아이디어만으로 결정되지 않습니다. 이미지 크기, 구도, 브랜드 일관성, 출력 설정까지 재사용 가능한 편집 워크플로를 정리했습니다.
색상 코드 완전 가이드：RGB·HEX·HSL 변환 원리와 디자인 활용
RGB, HEX, HSL은 모두 같은 색을 표현하지만 방식이 전혀 다릅니다. 각 색상 모델의 설계 논리, 변환 수학, 사용 기준부터 WCAG 접근성 대응까지 완벽하게 정리합니다.