아티클
웹을 위한 색상 도구: hex, 팔레트, 접근성
웹사이트의 색을 고르는 일은 간단해 보이지만, 같은 것을 서로 다른 방식으로 나타내는 hex 코드, RGB 세 값, HSL 각도와 마주하면 이야기가 달라집니다. 이 글에서는 이러한 형식들이 어떻게 연결되는지, 하나의 브랜드 색상을 쓸 만한 팔레트로 바꾸는 방법, 그리고 색을 다르게 보는 사람에게도 결과가 읽기 쉽게 남도록 확인하는 방법을 설명합니다.
hex, RGB, HSL은 같은 색을 나타낸다
화면의 색은 빨강, 초록, 파랑 빛을 섞어 만듭니다. hex 표기는 이 세 채널을 #2563eb 같은 여섯 글자 코드로 적으며, 각 두 글자 쌍이 00에서 ff까지의 한 채널입니다. RGB는 같은 세 숫자를 0에서 255까지의 십진수로 적는데, 읽기 쉬울 뿐 더 알려 주는 것은 없습니다. HSL은 다른 관점을 취합니다. 색을 색상(컬러 휠에서 0에서 360도까지의 위치), 채도(얼마나 선명한지), 명도(흰색이나 검은색에 얼마나 가까운지)로 나타냅니다. 명도를 올리거나 색상을 옮기는 것이 서로 묶인 세 숫자가 아니라 하나의 직관적인 변경으로 끝나기에, 색을 살짝 다듬고 싶을 때 디자이너가 찾는 형식이 HSL입니다. 변환기를 쓰면 이 셋 사이를 오갈 수 있어, 한 형식으로 읽은 값을 다른 형식으로 쓸 수 있습니다.
하나의 색을 팔레트로 바꾸기
브랜드 색상 하나만으로는 부족할 때가 많습니다. 제대로 된 팔레트에는 보통 주 색상, 한두 개의 강조색, 그리고 글자와 배경에 쓸 중성적인 회색 한 묶음이 필요합니다. 색끼리의 관계는 컬러 휠 위의 단순한 규칙을 따릅니다. 보색은 서로 마주 보고, 유사색은 차분한 느낌을 위해 나란히 놓이며, 트라이어드 배색은 세 색을 고르게 펼쳐 충돌 없이 대비를 만듭니다. 배색 도구는 이 규칙들을 출발 색에 적용해 맞는 hex 코드를 알려 주므로, 각도를 손으로 계산할 필요가 없습니다. 분위기가 마음에 드는 이미지가 이미 있다면, 팔레트 추출 도구가 그 안에서 주된 색들을 읽어 냅니다. 사진이나 로고를 바탕으로 사이트를 꾸리는 빠른 방법입니다.
대비와 색각 이상
내 화면에서 보기 좋은 팔레트라도 읽는 사람에게는 통하지 않을 수 있습니다. 대략 남성 열두 명 중 한 명, 여성 이백 명 중 한 명이 어떤 형태든 색각 결함을 지니며, 가장 흔한 것은 빨강과 초록을 구분하기 어려운 경우입니다. 오류를 알리는 유일한 신호가 초록 버튼 위의 빨간 글자뿐이라면 그런 독자는 그것을 놓칩니다. 해결책은 색을 피하는 것이 아니라 색에만 의존하지 않는 것입니다. 아이콘, 라벨, 모양과 함께 쓰고, 글자와 그 배경 사이에 충분한 명도 대비를 유지하세요. 색각 시뮬레이터는 흔한 색각 유형에서 팔레트가 어떻게 보이는지 보여 주므로, 항의가 들어온 뒤가 아니라 배포하기 전에 문제를 잡아낼 수 있습니다.
이 모든 것을 브라우저에서 하기
이 단계들 중 어느 것도 서버가 필요하지 않습니다. hex 코드 변환, 배색 생성, 이미지에서 색 읽기, 색각 이상 시뮬레이션은 모두 브라우저가 즉시 처리하는 작은 계산입니다. 이는 추출 대상 이미지가 공개되지 않은 디자인이거나 고객의 로고일 때 중요합니다. 여기 있는 도구에서는 파일이 내 기기에 남고 아무것도 업로드되지 않습니다. 작업물을 넘기지 않고도 온라인 서비스에서 얻을 결과와 같은 결과를 얻습니다. 색상 변환기, 배색 생성기, 팔레트 추출 도구, 색각 시뮬레이터는 모두 로컬에서 실행되며, 페이지가 로드된 뒤에는 오프라인에서도 같은 방식으로 작동합니다.
OKLCH와 더 넓은 색 공간
Hex, RGB, HSL은 모두 수년간 화면에서 사용해온 sRGB 색역 안의 색을 표현합니다. 최신 디스플레이는 더 넓은 색을 표현할 수 있으며, CSS에서는 이제 color() 함수와 Display P3 공간을 통해 그 범위에 도달할 수 있습니다. Display P3는 sRGB로 표현할 수 없는 선명한 녹색과 빨간색을 추가합니다. 더 근본적인 변화는 OKLCH입니다. OKLCH는 밝기(lightness), 채도(chroma), 색상(hue)으로 색을 표현하며, 사람 눈이 실제로 밝기를 인식하는 방식을 반영합니다. HSL에서는 같은 50% 밝기라도 노란색과 파란색이 전혀 다르게 보입니다. 노란색은 밝아 보이고, 파란색은 어두워 보입니다. OKLCH에서는 밝기 값을 고정하고 색상만 바꾸면 인지되는 밝기가 일정하게 유지됩니다. 이 덕분에 각 색을 일일이 손으로 조정하는 대신, 값 하나만 고정하여 모든 색조가 동일한 명암 대비 목표를 충족하는 팔레트를 만들기가 훨씬 수월해집니다.
이 아티클의 도구
자주 묻는 질문
hex와 RGB의 차이는 무엇인가요?
둘 다 같은 색을 적는 두 가지 방식입니다. hex는 빨강, 초록, 파랑 채널을 16진수 여섯 글자 코드로 묶고, RGB는 같은 세 채널을 0에서 255까지의 십진수로 나열합니다. #ff0000과 rgb(255, 0, 0)은 똑같은 빨강입니다. hex는 간결하고 CSS와 디자인 파일에서 흔히 쓰이며, RGB는 한눈에 읽기 쉽고, 둘 사이의 변환은 색 자체를 전혀 바꾸지 않습니다.
내 색상이 색각 이상 사용자에게 읽기 쉬운지 어떻게 알 수 있나요?
팔레트를 색각 시뮬레이터에 통과시키세요. 흔한 각 색각 유형을 가진 사람이 보게 될 모습으로 색을 다시 그려 줍니다. 같은 색조로 뭉개지는 짝, 특히 빨강과 초록을 잘 살피세요. 가장 안전한 습관은 색을 유일한 단서로 쓰지 않는 것입니다. 글자, 아이콘, 무늬로 뒷받침하고 전경과 배경 사이에 분명한 명도 차이를 유지하면, 색상이 전달되지 않아도 의미는 남습니다.