HEX, RGB, HSL은 같은 색을 서로 다른 방식으로 적는 표현입니다. 웹 개발자는 HEX를 CSS나 디자인 토큰에 자주 기록하고, 화면 조정 과정에서는 RGB 채널이나 HSL의 색조·채도·밝기를 보고 싶어 할 수 있습니다. 세 값이 화면에 조금씩 다르게 보인다고 해서 반드시 변환이 실패한 것은 아닙니다. 표시 과정에서 정수 반올림이 일어날 수 있기 때문입니다.
SpinFlow 색상 코드 변환기는 한 화면에서 HEX, RGB, HSL 입력과 색상 미리보기를 제공합니다. 다만 현재 구현의 입력 범위와 알파값 처리에는 분명한 한계가 있으므로, 변환 결과를 그대로 원본으로 덮어쓰지 않는 것이 좋습니다. 이 글에서는 값을 계산하고 검산한 뒤 CSS나 QR 같은 다음 작업으로 넘기는 흐름을 다룹니다.
HEX 색상을 원본 값으로 고정하기
색상 변환을 시작할 때는 먼저 원본 표현을 하나 정합니다. 디자인 문서에 `#3B82F6`이 기준으로 적혀 있다면 이 문자열을 원본으로 보존하고, RGB와 HSL은 파생 표시로 취급합니다. 반대로 브랜드 가이드가 RGB 값을 기준으로 한다면 RGB를 기록하고 HEX를 출력용 표현으로 둡니다. 변환 결과를 다시 원본에 저장하면 반올림된 값이 누적될 수 있습니다.
현재 HEX 입력은 여섯 자리 채널을 받는 형태입니다. 첫 번째 두 자리는 빨강, 가운데 두 자리는 초록, 마지막 두 자리는 파랑을 뜻합니다. `#`을 제외한 입력창에 6자리 16진수를 넣으면 미리보기와 RGB·HSL 상태가 갱신됩니다. 입력 중간에 자릿수가 부족하거나 문자가 잘못되면 변환이 완료되지 않을 수 있으므로, 복사 전에 전체 형식을 확인해야 합니다.
원본 기록에는 대문자·소문자보다 숫자 자체가 중요하지만, 팀 문서에서는 표기 규칙을 통일하는 편이 좋습니다. 예를 들어 모든 HEX를 대문자로 기록하면 `#3b82f6`과 `#3B82F6`을 서로 다른 색으로 오해하는 일을 줄일 수 있습니다. 색상 이름, 사용 위치, 대비 검토 여부도 함께 적어 두면 단순한 코드 목록보다 관리하기 쉽습니다.
#3B82F6을 RGB와 HSL로 변환하기
색상 코드 변환기의 기본값인 `#3B82F6`을 채널별로 읽어 보겠습니다. 16진수 `3B`는 십진수 59, `82`는 130, `F6`은 246입니다. 따라서 RGB는 rgb(59, 130, 246)이 됩니다. 각 채널은 0부터 255까지이며, 0은 해당 빛의 채널이 없고 255는 최대값을 뜻합니다.
이 RGB 값을 HSL로 변환하면 화면에는 대략 hsl(217, 91%, 60%)이 표시됩니다. 색조 217도는 색상환에서 파란 계열에 해당하고, 채도 91%는 거의 선명한 색이며, 밝기 60%는 검정과 흰색의 중간 기준에서 비교적 밝은 편입니다. HSL 숫자는 사람이 색상 방향을 조절할 때 이해하기 쉽지만, 실제 계산은 RGB를 0~1 범위로 정규화한 뒤 진행됩니다.
변환을 검산할 때는 한 방향만 믿지 말고 채널과 미리보기를 함께 확인합니다. HEX의 `3B`, `82`, `F6`을 다시 RGB로 읽었을 때 59, 130, 246이 나오는지 확인하고, 미리보기 박스가 입력한 색으로 바뀌는지 봅니다. HSL을 수정했다면 다시 RGB와 HEX가 어떤 값으로 변했는지 확인해 원본 색과 조정 색을 구분합니다.
순수한 빨강 `#FF0000`은 `rgb(255, 0, 0)`이며 HSL로는 `hsl(0, 100%, 50%)`가 됩니다. 이런 경계값은 변환 규칙을 이해하는 테스트 샘플로 좋습니다. 중간 색상만 테스트하면 채널 순서를 거꾸로 읽는 오류를 발견하기 어렵기 때문에 빨강·초록·파랑·회색 샘플을 각각 한 번씩 넣어 보세요.
HSL의 정수 표시에서 반올림이 생기는 이유
RGB 채널은 0부터 255까지의 정수로 저장되지만, HSL 계산 중간에는 0과 1 사이의 소수값이 사용됩니다. 색조는 0~360도, 채도와 밝기는 백분율로 바꾸는 과정에서 소수점이 생깁니다. 화면에서는 읽기 쉽게 H·S·L을 정수로 반올림해 보여 주므로, 표시된 HSL을 다시 입력하면 처음 HEX와 한 자리 정도 달라질 수 있습니다.
예를 들어 어떤 파란색의 실제 밝기 계산값이 59.6%라면 화면에는 60%로 표시될 수 있습니다. 60%를 다시 입력하면 원래의 59.6%와 완전히 같은 계산값이 아니라 새로운 입력으로 변환됩니다. 사람이 보기에는 거의 같은 색이지만 문자열 비교나 픽셀 단위 검증에서는 다른 HEX가 나올 수 있습니다.
따라서 디자인 토큰을 저장할 때는 기준 형식과 정밀도를 정합니다. 화면에 보이는 HSL을 문서에 복사하더라도 원본 HEX를 옆에 함께 남기고, ‘표시용 반올림’이라는 메모를 붙이는 것이 좋습니다. 색상 차이가 중요한 브랜드 작업이나 이미지 합성에서는 화면의 유사성만으로 동일하다고 판단하지 마세요.
반올림은 변환 오류와 다른 문제입니다. 입력 채널이 잘못되었거나 범위를 벗어난 경우에는 별도 검증이 필요하지만, 유효한 색상을 모델 간에 변환하면서 표시 숫자가 반올림되는 것은 표현 방식의 차이입니다. 원본과 파생 값을 분리하면 이 둘을 쉽게 구분할 수 있습니다.
RGB 입력 범위와 HSL 입력 범위 확인하기
RGB 입력은 각 채널을 0부터 255 사이로 제한합니다. 코드에서는 값을 정수로 읽고 범위를 벗어나면 0 또는 255에 맞춰 자릅니다. 예를 들어 300을 넣으면 255 쪽으로 제한되고, 음수를 넣으면 0으로 제한됩니다. 이런 자동 보정은 실수를 줄이지만, 사용자가 의도하지 않은 값이 조용히 바뀔 수 있으므로 결과를 한 번 더 확인해야 합니다.
HSL의 색조는 0부터 360, 채도와 밝기는 0부터 100 범위입니다. 색조 360은 0도와 같은 색상 방향으로 돌아오지만 표시 숫자는 다르게 보일 수 있습니다. 채도 0은 색상이 없는 회색 계열이 되고, 밝기 0은 검정, 100은 흰색에 가까워집니다. 슬라이더가 없는 입력 화면에서는 숫자 범위와 단위를 직접 확인하세요.
입력창에 문자를 지우는 중에는 일시적으로 유효하지 않은 값이 될 수 있습니다. HEX는 6자리 검사가 통과해야 RGB와 HSL이 갱신되고, RGB·HSL은 빈 입력을 0으로 해석할 수 있습니다. 최종 값이 확정되기 전에 다른 필드가 잠시 바뀌는 것은 정상적인 편집 과정일 수 있으므로, 복사 버튼은 입력을 마친 뒤 누르는 편이 안전합니다.
색상 코드가 유효해도 웹에서 읽기 쉬운 색상이라는 뜻은 아닙니다. 배경과 글자의 대비, 포커스 표시, 색각 이상 사용자의 구분 가능성은 이 변환기에서 계산하지 않습니다. 변환은 형식 변환이고 접근성 검토는 별도의 디자인 검수입니다.
회색과 경계값에서 색상 모델 확인하기
회색은 RGB의 세 채널이 모두 같은 색입니다. 예를 들어 `#808080`은 `rgb(128, 128, 128)`이고, HSL 표시에서는 색조 0, 채도 0%, 밝기 약 50%가 됩니다. 회색에는 특정 색조가 없지만 계산 화면은 하나의 기준값으로 0을 표시할 수 있습니다. 이를 오류로 보고 다른 색조를 억지로 넣으면 원래의 무채색 의미가 바뀝니다.
검정 `#000000`은 RGB가 모두 0이고 밝기가 0이며, 흰색 `#FFFFFF`는 RGB가 모두 255이고 밝기가 100%입니다. 이 두 값과 순수 빨강·초록·파랑을 경계 샘플로 사용하면 채널 순서, 범위 제한, HSL 변환 방향을 빠르게 점검할 수 있습니다. 테스트 결과는 색상명과 코드로 함께 기록하세요.
색상 입력을 디자인 토큰으로 옮길 때는 의미 있는 이름을 붙입니다. `primary-blue`처럼 역할을 나타내면 값이 변경되어도 사용 위치를 추적할 수 있습니다. HEX·RGB·HSL 세 표현을 모두 여러 파일에 따로 적으면 불일치가 생길 수 있으므로, 한 가지를 정본으로 두고 나머지는 변환 결과로 관리합니다.
알파값과 8자리 HEX 지원 여부를 확인하기
투명도가 필요한 색상은 RGB나 HSL에 알파 채널이 추가된 RGBA·HSLA, 또는 8자리 HEX 같은 표현을 사용할 수 있습니다. 그러나 개념적으로 가능한 형식과 현재 도구가 실제로 처리하는 형식은 구분해야 합니다. 현재 입력 검사는 6자리 HEX 중심이고 RGB 입력도 세 채널이며, 화면의 변환 로직에는 알파를 별도 상태로 보관하는 흐름이 없습니다.
따라서 `#RRGGBBAA`를 그대로 넣거나 `rgba(59,130,246,0.5)`를 입력해 알파까지 변환된다고 기대하지 마세요. 투명도가 필요한 경우 원본 색상과 불투명도 값을 별도 필드로 기록하고, CSS 작성 단계에서 합치는 편이 안전합니다. 사이트 설명에 알파 지원 문구가 있더라도 실제 입력창과 변환 결과를 직접 확인해야 합니다.
알파값을 보존해야 하는 디자인에서는 `#3B82F6`과 0.5를 각각 저장하고, 최종 구현에서 rgba(59, 130, 246, 0.5)처럼 표현할 수 있습니다. 이때 색상 변환기는 RGB 채널 검산에 사용하고, 투명도와 배경 위에서의 실제 대비는 별도로 테스트합니다. 반투명 파란색은 배경에 따라 보이는 색이 달라지므로 미리보기 박스 하나만으로 결정하지 마세요.
변환 결과를 CSS와 다음 작업에 넘기는 법
변환을 마친 뒤에는 원본, 변환 결과, 사용 위치를 한 줄로 묶어 기록합니다. 예를 들어 `primary: #3B82F6 / rgb(59,130,246) / HSL 표시 217,91%,60% / 버튼 배경`처럼 적을 수 있습니다. 나중에 HSL을 조정했을 때 어떤 화면이 영향을 받는지 확인하기 쉬워지고, 반올림 때문에 원본과 출력이 달라진 이유도 설명할 수 있습니다.
CSS 그림자 생성기로 넘어갈 때는 그림자 색상과 요소 배경의 대비를 함께 확인하세요. 그림자 색상을 어둡게 만드는 것과 글자 색상을 읽기 쉽게 만드는 것은 별개의 문제입니다. CSS 복사 전에 HEX가 6자리 유효값인지, RGB 채널이 원하는 값인지 확인합니다.
QR 코드처럼 색상이 인식률에 영향을 주는 결과물을 만들 때는 QR 코드 생성기에서 전경색과 배경색을 고대비로 조합합니다. 예쁜 색상 조합이 카메라 인식에 항상 좋은 것은 아니며, 실제 인쇄·스캔 테스트가 필요합니다. 색상 변환기는 코드 형식을 맞추는 단계이고, 사용 환경 검증은 다음 단계입니다.
색상 변환의 목표는 숫자를 많이 얻는 것이 아니라 하나의 기준 색을 잃지 않고 다른 형식으로 전달하는 것입니다. `#3B82F6`의 채널을 직접 검산하고, HSL 반올림을 파생 값으로 이해하고, 알파와 대비를 별도로 관리하면 디자인·개발 사이의 작은 색상 차이를 설명 가능한 상태로 유지할 수 있습니다.