색상 변환기

색상 코드란

HEX는 #1a73e8처럼 빨강·초록·파랑을 16진수 두 자리씩(00FF) 이어 쓴 형식입니다. RGB는 같은 세 채널을 10진수 0255로 적어 rgb(26, 115, 232)가 됩니다. HSL은 색상(0~360°)·채도·명도로 색을 나타내며 hsl(214, 82%, 51%)처럼 씁니다. 명도만 바꾸면 같은 계열의 밝고 어두운 색을 만들 수 있어 단계별 색상을 정할 때 편리합니다.

색 하나를 직접 변환해 보기

#1a73e8을 예로 듭니다. 16진수 두 자리가 한 채널이어서 1a = 26, 73 = 115, e8 = 232이고, RGB는 rgb(26, 115, 232)입니다.

HSL을 구하려면 각 채널을 0~1로 바꾸고 최댓값(0.910, 파랑)과 최솟값(0.102, 빨강)을 찾습니다.

• 명도 = (최대 + 최소) / 2 = 0.506 → 51%
• 채도 = (최대 − 최소) / (2 − 최대 − 최소) = 0.817 → 82% (명도가 50%보다 클 때 쓰는 식)
• 색상: 파랑이 가장 크므로 색상 = 60 × ((R − G) / (최대 − 최소) + 4) = 214.1 → 214

도구는 hsl(214, 82%, 51%)를 보여 줍니다. 공식은 CSS Color Module Level 4와 같습니다.

KRDS 색상으로 확인하기

KRDS 디자인 토큰 파일(npm 패키지 krds-uiux 1.1.0의 krds_tokens.css)에서 --krds-color-light-primary-50은 #256ef4입니다. HEX 입력창에 넣으면 rgb(37, 110, 244)와 hsl(219, 90%, 55%)가 나옵니다.

표시된 hsl(219, 90%, 55%)를 HSL 입력창에 다시 넣으면 HEX는 #256df4가 됩니다. 초록 채널이 1 줄어든 것은 HSL을 정수로 반올림했기 때문이므로, 코드로 옮길 때는 HEX를 쓰세요.

한 단계 진한 --krds-color-light-primary-60은 #0b50d0이고 rgb(11, 80, 208), hsl(219, 90%, 43%)입니다. 두 색의 HSL을 나란히 보면 색상과 채도는 같고 명도만 55%에서 43%로 내려갑니다.

--krds-color-light-danger-50은 #de3412, 곧 rgb(222, 52, 18), hsl(10, 85%, 47%)입니다.

입력창이 받는 형식

• HEX: 3자리 또는 6자리. #은 생략할 수 있고 대소문자를 구분하지 않습니다. 3자리나 6자리가 되면 다른 입력창이 갱신됩니다. 4자리·5자리를 입력하는 동안에는 다른 입력창에 직전 색이 남고, 7자리 이상은 무효입니다.
• RGB: 쉼표로 구분한 rgb(r, g, b)이며 각 채널은 0~255 정수입니다. rgba(...)도 읽지만 네 번째 값은 버립니다. 백분율(rgb(10%, 45%, 91%)), 소수, 공백으로 구분한 형식은 받지 않습니다.
• RGB와 HSL 뒤: 세 수 다음에는 투명도, 닫는 괄호, 공백만 올 수 있습니다. 끝의 ;와 값을 감싼 따옴표는 읽기 전에 지웁니다.
• HSL: 쉼표로 구분한 hsl(h, s%, l%). 소수를 쓸 수 있고 %는 생략할 수 있습니다. 색상은 360을 넘으면 한 바퀴 돌고, 채도와 명도는 0~100% 범위로 잘립니다(CSS Color 4 7절과 같은 처리). 214deg 같은 각도 단위와 음수 색상은 받지 않습니다.

rgb(37, 110, 244)px처럼 값 뒤에 문자가 남아 있으면 상태 표시줄에 “색상 형식이 올바르지 않습니다. 색상 값 뒤의 불필요한 문자를 지우세요.”가 나옵니다. 닫는 괄호를 아직 입력하지 않은 rgb(37, 110, 244는 입력 중인 값으로 보고 변환합니다.

CSS에서 복사해 끝에 ;가 남은 rgb(37, 110, 244);는 그대로 읽혀 #256ef4, hsl(219, 90%, 55%)가 됩니다.

입력은 NFKC 정규화로 반각으로 바꾼 뒤 읽습니다. 그래서 전각으로 입력한 ＃２５６ＥＦ４도 rgb(37, 110, 244), hsl(219, 90%, 55%)로 변환되고, 입력창에서 벗어나면 입력창의 문자도 반각 #256EF4로 바뀌어 그대로 복사할 수 있습니다.

한글 자모가 섞였을 때

#1ㅁ73ㄷ8처럼 16진수 자리에 한글 자모가 섞인 값은 HEX로 읽을 수 없습니다. 상태 표시줄에 “색상 형식이 올바르지 않습니다”가 나오고, 나머지 두 입력창은 비워집니다. 이전 색이 남은 채로 복사되는 일을 막기 위해서입니다. 자모는 NFKC 정규화로도 영문자가 되지 않으므로, 해당 자리를 16진수 문자(09, af)로 고쳐 입력하세요.

제한 사항

• 투명도를 지원하지 않습니다. 8자리 16진수(#1a73e880)는 무효로 처리되고, rgba(26, 115, 232, 0.5)의 투명도는 무시됩니다.
• HSL은 정수로 반올림됩니다. hsl(214, 82%, 51%)를 입력하면 #1a73e8이 아니라 #1c74e9가 나옵니다. 반올림한 값으로는 원래 색을 정확히 가리킬 수 없기 때문입니다. HEX 값을 기준으로 삼으세요.
• 세 가지 형식만 지원합니다: HEX(3자리 또는 6자리, #abc는 #aabbcc로 확장), RGB, HSL. HSB/HSV, HWB, OKLCH는 지원하지 않습니다.