HEX · RGB · OKLCH · HSL (변환 & 색상 추출)

색은 하나입니다

before 와 after 는 같은 색을 두 형식으로 보는 창입니다. 어느 쪽을 만져도 반대쪽이 따라옵니다. 둘을 같은 형식으로 두어도 됩니다 — 그때는 표기만 바꾸는 셈이 됩니다.

값을 치는 것과 눈으로 고르는 것은 다른 일이라 형식마다 둘 다 있습니다. 입력란은 형식을 가리지 않습니다 — HEX 칸에 oklch(...) 를 넣어도 읽습니다. 어디서 복사해 온 값인지는 붙여넣는 사람이 고를 수 있는 일이 아니기 때문입니다.

형식마다 다른 피커

같은 슬라이더를 돌려쓰지 않습니다. 형식마다 다루는 것이 다르기 때문입니다.

• HEX — 채도×명도 사각 판 + 색상 축. HEX 는 색 공간이 아니라 sRGB 의 표기라 "HEX 다운 축" 이 없습니다. 그래서 값을 모르는 채로 시작할 때 필요한 것, 즉 눈으로 찍는 화면을 둡니다
• RGB — 축 셋. 트랙에는 나머지 두 축을 지금 값으로 고정한 채 그 축만 훑은 색을 칠합니다. 빨강 트랙이 언제나 검정→빨강이면 지금 색과 아무 상관이 없어 눈대중이 되지 않습니다
• HSL — 색상환 + 채도·명도. H 는 각도라서 슬라이더에 펴 놓으면 양 끝이 같은 빨강인데도 가장 멀어 보입니다. 원으로 두면 그 이음매가 사라집니다
• OKLCH — 세 축 + sRGB 경계 표시

OKLCH 의 L 은 눈에 보이는 밝기입니다

HSL 의 L 은 hsl(60 100% 50%)(노랑)과 hsl(240 100% 50%)(파랑)을 같은 50% 라고 합니다. 하지만 둘은 전혀 다르게 밝습니다 — 노랑은 눈이 부시고 파랑은 어둡습니다.

OKLCH 는 사람 눈이 느끼는 밝기에 맞춰 만들어진 축이라 그 둘을 다르게 적습니다. 그래서 L 만 고정한 채 색상을 돌리면 밝기가 실제로 유지됩니다. 팔레트를 만들 때 이것이 필요합니다.

sRGB 를 벗어나는 구간

OKLCH 는 화면이 낼 수 있는 색보다 넓습니다. 그래서 값을 올리다 보면 어느 지점부터 화면에 없는 색이 됩니다.

그 경계는 L 과 H 마다 다릅니다. 고정된 상한을 그을 수 없어서 매번 찾아 슬라이더 위에 빗금으로 그립니다. C 축만이 아니라 L·H 축에도 그립니다 — 채도를 그대로 둔 채 밝기나 색상만 움직여도 담을 수 없게 되는 자리가 있기 때문입니다.

빗금 안의 값을 HEX·RGB·HSL 로 내보내면 잘린 색이 나옵니다. 견본과 결과에 그 사실을 함께 적습니다.

표기를 고를 수 있습니다

같은 색이라도 프로젝트가 쓰는 표기는 정해져 있습니다. 쉼표를 쓰는 곳에 공백 표기를 붙여 넣으면 리뷰에서 되돌아옵니다.

after 쪽에서 표기를 고릅니다. before 는 손대지 않습니다 — 바꾸려는 대상이지 결과가 아니기 때문입니다.

#fff 는 세 채널이 모두 두 자리 반복일 때만 쓸 수 있습니다. 그럴 수 없는 색에서는 그 선택지가 아예 나타나지 않습니다.

투명도

네 형식 모두 알파를 다룹니다. 불투명하면 적지 않습니다 — rgb(0 0 0 / 1) 이라고 쓰는 사람은 없습니다.

형식마다 적는 법이 다릅니다.

• HEX 는 여덟 자리가 됩니다 — #1a2b3c80. 줄일 수 있으면 #fff8
• 공백 표기는 슬래시로 붙입니다 — rgb(26 43 60 / 0.5)
• 쉼표 표기는 이름까지 바뀝니다 — rgb() 가 아니라 rgba(), hsl() 이 아니라 hsla()

화면에서 집고, 쓴 색은 남습니다

스포이드는 화면 아무 곳의 색을 집습니다. 브라우저 밖의 창도 됩니다. EyeDropper API 를 구현한 브라우저에서만 단추가 나타납니다 — 지금은 Chrome 과 Edge 뿐입니다.

결과를 복사하면 그 색이 최근 목록에 남습니다. 피커를 만지는 동안이 아니라 복사한 때입니다 — 실제로 쓴 색만 남기기 위해서입니다. 열 개까지 담고 같은 색은 한 번만 담으며, 이 브라우저에만 저장됩니다.