색상 선택기·변환기 — RGB, HEX, HSL
화면 어디서든 색상을 추출하거나 HEX, RGB, HSL 간에 즉시 변환하세요.
팁: Chrome이나 Edge에서는 여기에 "화면에서 색상 추출" 스포이트가 나타납니다. 브라우저 밖을 포함해 화면의 어떤 픽셀이든 추출할 수 있습니다.
#071E93rgb(7, 30, 147)hsl(230, 91%, 30%)HEX(#RGB 또는 #RRGGBB), rgb(), hsl() 또는 "r, g, b"만 입력. 최대 500줄까지 가능합니다. 각 줄이 HEX, RGB, HSL로 표시되며, 색상이 아닌 줄은 표시만 하고 나머지는 그대로 변환합니다.
문제를 발견하셨거나 개선할 점이 있나요? 모든 메시지를 읽고 빠르게 고칩니다.
HEX, RGB, HSL 간에 어떤 색상이든 즉시 변환하세요. 색상을 눈으로 고르거나, HEX 코드를 붙여 넣거나, RGB·HSL 값을 입력하거나, 화면 스포이트로 다른 앱을 포함해 디스플레이 어디서든 픽셀을 추출할 수 있습니다. 모든 형식이 함께 동기화되며, 각각 CSS에 바로 쓸 수 있는 문자열을 복사할 수 있습니다.
팔레트 전체를 변환해야 하나요? 일괄 입력란에 색상 목록을 한 줄에 하나씩 붙여 넣으면 모든 줄이 HEX, RGB, HSL로 변환되어 CSV로 다운로드할 수 있는 표 하나에 정리됩니다.
사용 방법
- 시각적 선택기로 색상을 고르거나, HEX·RGB·HSL 입력란에 직접 입력하거나, “화면에서 색상 추출”을 클릭한 뒤 브라우저 밖을 포함해 디스플레이의 아무 픽셀이나 클릭하세요.
- 다른 모든 형식이 즉시 업데이트됩니다.
- 필요한 형식 옆의 복사를 클릭하세요. CSS에 바로 붙여 넣을 수 있는 값입니다.
- 여러 색상을 변환하려면 변환기 아래의 일괄 입력란에 한 줄에 하나씩 붙여 넣고 표를 CSV로 다운로드하세요.
자주 묻는 질문
HEX, RGB, HSL의 차이는 무엇인가요?
같은 색상을 다른 방식으로 표현합니다. HEX(#071E93)는 간결하며 웹에서 가장 흔한 표기법입니다. RGB(rgb(7, 30, 147))는 빨강, 초록, 파랑 성분을 나타내며 rgba()로 투명도를 더할 때 유용합니다. HSL(hsl(229, 91%, 30%))은 색상, 채도, 명도를 나타내며, 더 밝게 하거나 차분하게 하는 등 색상을 조정할 때 가장 직관적입니다.
CSS에서 HSL은 언제 써야 하나요?
색상 변형이 필요할 때 HSL을 쓰세요. 색상과 채도를 고정하고 명도만 바꾸면 브랜드 색상의 일관된 밝은 톤과 어두운 톤을 얻을 수 있어 HEX 값을 어림짐작하는 것보다 훨씬 쉽습니다.
3자리 HEX 코드를 지원하나요?
네. #fff나 #1a9 같은 단축 표기는 자동으로 6자리 형식(#ffffff, #11aa99)으로 확장됩니다.
RGB→HEX 변환은 정확한가요?
네. HEX는 RGB를 16진수로 쓴 것일 뿐이므로 둘 사이의 변환은 양방향 모두 정확합니다. HSL 왕복 변환은 반올림 때문에 값이 ±1만큼 바뀔 수 있지만, 실제로는 눈으로 구별할 수 없습니다.
여러 색상을 한 번에 변환할 수 있나요?
네. “일괄 변환” 입력란에 최대 500개 색상을 한 줄에 하나씩 붙여 넣으세요. HEX(#fff 또는 #071E93), rgb(), hsl(), 또는 “r, g, b” 숫자 세 개 모두 됩니다. 각 줄이 HEX, RGB, HSL 값과 색상 견본과 함께 표에 표시되고, 색상이 아닌 줄은 표시만 하고 나머지는 계속 처리하며, “CSV 다운로드”로 표 전체를 저장할 수 있습니다.
화면 스포이트는 어떻게 작동하나요?
브라우저의 기본 EyeDropper API를 사용합니다. 버튼을 클릭하면 커서가 돋보기로 바뀌고, 이 페이지든 다른 탭이든 완전히 다른 애플리케이션이든 아무 픽셀이나 클릭하면 그 정확한 색상을 가져옵니다. 아무것도 기록하거나 업로드하지 않으며, API는 클릭한 색상 하나만 돌려줍니다. Chrome과 Edge에서 지원되며, Firefox와 Safari는 아직 지원하지 않습니다.
빠른 참조: 세 가지 색상 표기법
• HEX(#071E93) — 채널당 두 자리씩 16진수 여섯 자리. 가장 간결한 표기법이며 대부분의 디자인 도구와 CSS 코드베이스의 기본값입니다.
• RGB(rgb(7, 30, 147)) — 각 채널 0–255. 알파 투명도가 필요하면 rgba()나 최신 rgb(r g b / a) 문법을 쓰세요.
• HSL(hsl(229, 91%, 30%)) — 색상환의 색상(0–360°), 채도, 명도. 사람이 편집하기 가장 쉬운 표기법으로, 숫자 하나만 바꾸면 같은 색상의 더 밝거나 어둡거나 차분한 버전을 얻을 수 있습니다.
실용적인 작업 방식: 브랜드 색상은 HEX로 정의하고, HSL로 조정하며(명도를 움직여 밝은 톤과 어두운 톤 만들기), 라이브러리나 canvas API가 숫자 채널을 요구할 때는 RGB를 쓰세요.