색상 선택기

Colour Picker

OKLCH 좌표판에서, 화면 스포이드로, 또는 업로드한 이미지에서 색을 고르고 원하는 표기법으로 복사합니다.

OKLCH 좌표로 색을 고릅니다. 위아래가 밝기, 좌우가 채도이고, 색상은 아래 띠입니다. 이 배치가 이 도구의 이유입니다. 익숙한 HSV 사각형에서는 "같은 색인데 채도만 조금 낮게"가 아무도 못 찾는 대각선 이동이지만, 여기서는 가로로 한 번 움직이면 됩니다. 브라우저가 허용하면 화면에서 바로 집을 수 있고, 이미지를 올려 찍는 방식은 어느 브라우저에서나 됩니다.

🔒 브라우저 안에서만 처리colorpickereyedropper

고르기

색상: 259.8°

위아래가 밝기, 좌우가 채도이고 색상은 아래 띠입니다. 빗금은 색은 존재하지만 sRGB가 표시하지 못한다는 뜻입니다.

지금 색

62.3

0.1880

259.8°

표기법

hex#3b82f6
rgbrgb(59 130 246)
hslhsl(217.22 91.22% 59.8%)
hwbhwb(217.22 23.14% 3.53%)
lablab(54.619% 8.763 -65.791)
lchlch(54.619% 66.372 277.59)
oklaboklab(62.308% -0.0332 -0.1851)
oklchoklch(62.308% 0.188 259.81)
named#3b82f6

이미지에서 집기

스크린샷이나 사진을 놓으세요

아무 데나 누르면 그 자리 픽셀을 가져옵니다.

전부 이 탭 안에서 처리합니다. EyeDropper API가 없는 브라우저에서 쓰면 됩니다. 대부분의 브라우저가 그렇습니다.

표기법을 한꺼번에 바꾸려면 색상 변환기가 해 줍니다. 이 색에서 팔레트 전체를 만들려면 팔레트 생성이 OKLCH에서 색상을 돌려 줍니다.

사용 방법

색상을 먼저 정하고 필드에서 움직입니다
띠에서 색상을 고르면, 그 색상에서 가능한 밝기와 채도가 필드에 전부 그려집니다. 순서를 반대로 하면 색상을 바꿀 때마다 필드가 다시 그려지므로 색을 쫓아다니게 됩니다.
또는 화면에서 집습니다
"화면에서 집기"를 누르면 브라우저 스포이드가 열리고 다른 프로그램을 포함해 화면의 아무 픽셀이나 읽습니다. 크로미움 계열 브라우저에만 있는 기능이고, 없는 브라우저에서는 조용히 실패하는 대신 그렇다고 알려 줍니다.
또는 스크린샷을 올려 누릅니다
아래쪽 이미지 영역에 그림을 올리면 누른 자리의 픽셀을 그대로 돌려줍니다. 모든 브라우저에서 되는 방법이고, 스포이드가 없을 때 쓰면 됩니다.
코드가 원하는 표기법으로 복사합니다
표기법이 한 번에 모두 나오고 각각 복사 버튼이 붙어 있습니다. 어디서나 동작해야 하는 스타일시트에는 16진수를, 호환성보다 색이 중요하면 `oklch()` 값을 가져가세요. 색이 sRGB 밖이면 16진수는 근사치로 옮긴 값입니다.
비교할 색은 저장해 둡니다
"이 색 저장"을 누르면 최대 열두 개까지 줄지어 남고 눌러서 되돌아갈 수 있습니다. 페이지 안에만 있어서 새로 고치면 사라집니다.

자주 묻는 질문

화면 스포이드 버튼이 왜 안 되나요?

EyeDropper API가 필요한데 크로미움 계열 브라우저에만 있습니다. Chrome, Edge, Arc, Brave에는 있고 Firefox와 Safari에는 없습니다. 화면 픽셀을 마음대로 읽는 것은 페이지가 스스로 얻을 수 없는 권한이라 대체 구현도 없습니다. 대신 스크린샷을 이미지 영역에 올려서 찍으면 같은 답이 나옵니다.

필드의 넓은 부분이 왜 빗금인가요?

그 밝기와 채도 조합은 OKLCH에는 있지만 그 색상에서 sRGB가 표시할 수 없습니다. 버그가 아니라 색 공간의 성질이라, 표시 가능한 가장 가까운 색으로 칠하는 대신 빗금을 칩니다. 거기를 색으로 채우면 화면이 낼 수 없는 색을 낼 수 있는 척하는 셈입니다. "sRGB 안으로"를 누르면 밝기와 색상은 두고 채도만 낮춰 안으로 들여보냅니다.

스포이드가 넓은 색역을 그대로 가져오나요?

아닙니다. API가 sRGB 16진수 문자열로 돌려주기 때문에, 화면의 Display P3 색은 이 페이지에 닿기 전에 이미 변환됩니다. 값을 알고 있는 P3 색이라면 색상 변환기에 `oklch()`나 `color(display-p3 ...)` 형태로 직접 입력하세요.