색상 코드 추출 — 화면의 색을 정확히 알아내는 법

색을 읽는 세 가지 방법 — 정확한 순서대로

페이지에서 직접 읽는다. 그 색이 웹 페이지의 일부라면 브라우저 개발자 도구를 열고 요소를 고른 뒤 계산된 스타일을 봅니다. 이것은 화소를 떠온 표본이 아니라 실제로 적힌 값입니다. 안티에일리어싱도 투명도도 이미지 압축도 끼어들지 않습니다. 원본을 돌려주는 유일한 방법입니다.

브라우저의 스포이드를 쓴다. 크로미움 계열 브라우저는 개발자 도구의 색 견본 안에 색 선택기를 두고 있고, 화면 어디서든 빨아들일 수 있습니다. 이미지에도, 스타일이 걸리지 않은 것에도 쓸 수 있고 설치할 것이 없습니다.

화면을 찍어서 확대한다. 가장 느리고 가장 어디서나 통합니다. 찍고, 아무 이미지 편집기로 열고, 화소가 보일 때까지 키우고, 원하는 한 점의 색을 읽습니다. 다른 앱 안의 색, 영상의 한 장면, 선택기가 없는 기기에서는 이것입니다.

순서에 뜻이 있습니다. 아래로 갈수록 값이 달라질 수 있는 단계가 하나씩 늘어납니다.

HEX·RGB·HSL은 같은 색의 세 가지 표기다

HEX는 열여섯 진수 여섯 자리를 두 자리씩 — 빨강·초록·파랑 — 끊은 것이고, 각 쌍은 0에서 255까지의 수를 십육진으로 적은 것입니다. 짧고, 디자인 도구가 대개 이 모양으로 건네줍니다.

RGB는 같은 세 수를 십진으로 적은 것입니다. 계산으로 다루기 쉽고, 투명도를 붙일 때 씁니다.

HSL은 같은 색을 색상·채도·명도로 다시 짠 것입니다. 정밀도가 올라가지는 않지만 조정이 훨씬 쉬워집니다 — 「색감은 그대로 두고 조금만 밝게」가 HSL에서는 숫자 하나이고, HEX에서는 세 숫자를 발맞춰 움직이는 일입니다.

셋 사이의 변환에서 잃는 것은 없습니다. 같은 공간의 같은 점을 가리키기 때문입니다. 변환했더니 색이 달라졌다면 바꾼 것은 변환이 아닙니다 — 다음 절입니다.

같은 색인데 값이 둘 나오는 이유

여기가 함정입니다. 화면에서 뽑은 색은 표시된 것의 측정값이고, 적힌 값과 화소 사이에는 여러 단계가 있습니다.

색 프로파일. 요즘 화면은 sRGB 바깥의 색도 낼 수 있고, 시스템이 패널로 보내는 도중에 값을 변환합니다. 화면 캡처에 sRGB가 아니라 그 디스플레이의 프로파일이 붙기도 하는데, 그러면 「똑같아 보이는 색」이 찍은 프로그램과 연 프로그램에 따라 다른 숫자가 됩니다.

겹침. 빨아들이는 것은 최종 합성 결과입니다. 위에 반투명한 것이 얹혀 있으면 — 오버레이, 그림자, 어두운 모드의 덮개 — 읽고 있는 것은 섞인 색이지 뜻한 층이 아닙니다.

압축. JPEG는 색을 밝기보다 성기게 저장하므로 사진 속 경계 부근의 화소는 몇 단계 어긋날 수 있습니다. PNG나 PNG로 찍은 화면 캡처에는 이 문제가 없습니다.

정확해야 한다면 첫 번째 방법으로 돌아가 적힌 값을 읽으세요.

가장자리와 그러데이션 — 빨아들이면 안 되는 자리

안티에일리어싱이란 글자의 윤곽과 곡선의 가장자리를 일부러 중간색으로 만드는 것입니다. 글자꼴 안쪽 한 화소는 글자색과 배경색이 섞인 것이고, 누가 고른 색이 아닙니다. 넓고 평평한 면의 한가운데에서 뽑으세요.

그러데이션에는 정의상 하나의 값이 없습니다. 그래도 필요하다면 어느 쪽 색을 원하는지 정해 충분히 안쪽에서 뽑거나, 양 끝을 읽어 두 색으로 다루세요.

그림자·번짐·유리 느낌의 효과도 모양만 다른 같은 문제입니다. 뒤에 있는 것을 가지고 계산한 결과라, 배경이 바뀌면 숫자도 바뀝니다.

쓰기 전에 할 확인 두 가지

글자를 얹는다면 대비. 이 기준은 떠도는 말이 아닙니다. W3C 권고인 WCAG 2.2가 달성기준 1.4.3에서 본문 4.5 대 1, 큰 글자 3 대 1로 정해 둔 값입니다. 내 화면에서 충분해 보이는 배색이 어두운 화면에서는 크게 떨어질 수 있습니다. 인상이 아니라 그 조합으로 확인하세요.

색만 정보를 지고 있지 않은지. 빨강이 오류이고 초록이 성공인데 다른 표시가 없다면, 그 두 색상을 가르기 어려운 사람에게는 뜻이 닿지 않습니다. 남성 열두 명 중 한 명꼴입니다. 낱말이든 기호든 모양 차이든 하나를 더하세요. 우리 색각·색 감각 페이지가 실제로 어떻게 보이는지 확인하는 데 쓸모가 있습니다.

둘 다 일 분도 안 걸립니다. 그리고 색이 쉰 군데에 퍼진 뒤에 하는 것보다 지금 하는 쪽이 훨씬 쌉니다.

그 숫자로는 안 되는 자리

인쇄에서는 HEX가 애초에 다른 공간의 이야기입니다. 화면은 빛을 내어 빨강·초록·파랑을 섞고, 잉크는 빛을 먹어 청록·자홍·노랑·검정을 섞습니다. 둘 사이에 고정된 환산은 없습니다 — 종이와 잉크와 인쇄기가 답을 바꿉니다. 그래서 인쇄소는 HEX가 아니라 CMYK 값이나 별색 번호를 묻습니다.

브랜드 색이라면 사이트의 로고에서 빨아들이지 말고 지정 값을 물어보세요. 공표된 값이 원본이고, 뽑은 화소는 그 내보내기를 통과해 나온 무언가일 뿐입니다.

그냥 같은 색을 계속 쓰고 싶은 것뿐이라면, 쓰는 도구의 표기로 한 번만 적어 두고 이후에는 거기서 변환하세요. 다시 뽑을 때마다 숫자가 어긋날 기회가 하나씩 늘어납니다.