색상 변환기

기능

HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

시각적 색상 선택기

실시간 미리보기

CSS 변수로 출력

사용 방법

1. 색을 선택하세요 (스테이지 클릭, HEX 붙여넣기, 스포이드, 스페이스 키 랜덤도 가능).

2. HEX · RGB · HSL · OKLCH 모든 형식이 양방향으로 실시간 변환됩니다.

3. 값 하나만 복사하거나 CSS 변수 블록 전체를 복사하세요. 배경을 바꿔 흰색·회색·짙은색 위에서 색을 확인할 수 있습니다.

이 도구에 대하여

디자이너는 눈으로 색을 고르고, CSS에는 문자열이 필요하며, 도구마다 쓰는 형식도 다릅니다. 이 변환기는 하나의 색을 HEX, RGB, HSL, OKLCH 사이에서 동기화합니다. 어떤 칸을 바꾸든 색상 선택기를 쓰든 나머지 형식이 즉시 갱신됩니다. HEX와 RGB는 빨강·초록·파랑 채널을, HSL은 색상·채도·명도를 나타내 손으로 조정하기 쉽고, OKLCH는 CSS Color Level 4의 새로운 지각 기반 형식으로 명도를 같은 만큼 바꾸면 눈에도 고르게 보여 일관된 팔레트를 만들기에 좋습니다. 값 하나만 복사하거나 CSS 사용자 정의 속성 묶음을 복사할 수 있고, 흰색·회색·어두운 배경에서 색을 미리 확인한 뒤 사용할 수 있습니다.

자주 묻는 질문

CSS에서는 어떤 형식을 써야 하나요?

HEX와 rgb()는 어디서나 작동해 고정된 색에 적합합니다. 명도나 채도를 손으로 조정하고 싶다면 hsl()이 편리합니다. oklch()는 현재 브라우저에서 지원되며 명도가 지각적으로 균일해 체계적인 팔레트에 가장 좋습니다.

HSL 명도가 모두 50%인데 밝기가 크게 달라 보이는 이유는 무엇인가요?

HSL은 RGB를 수학적으로 재배열한 것일 뿐 인간 시각의 모델이 아니어서, 50% 노랑이 50% 파랑보다 훨씬 밝아 보입니다. OKLCH의 명도는 지각되는 밝기에 맞춰 설계되어 디자인 시스템에서 점점 더 많이 쓰입니다.

변환했다가 되돌리면 값이 조금 달라지는 이유는 무엇인가요?

HEX와 RGB는 0–255의 정수로 저장하고 HSL과 OKLCH는 소수를 씁니다. 변환 중 반올림으로 한 채널이 한 단계 달라질 수 있지만 눈으로는 구별되지 않습니다.

화면의 다른 곳에서 색을 추출할 수 있나요?

데스크톱용 Chrome이나 Edge처럼 EyeDropper API를 지원하는 브라우저에서는 스포이트 버튼으로 화면의 어떤 픽셀이든 색을 가져올 수 있습니다. 그 밖의 브라우저에서는 기본 색상 선택기가 표시됩니다.

CSS 변수 묶음에는 무엇이 들어 있나요?

같은 색을 여러 형식의 사용자 정의 속성으로 나열한 것으로, 예를 들어 --color-hex, --color-rgb, --color-hsl, --color-oklch가 있습니다. :root에 붙여넣고 코드에 필요한 형식을 참조하면 됩니다.

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구