HEX, RGB, HSL 색상코드를 서로 변환
--color: #4A90D9;
같은 색을 상황에 따라 다른 방식으로 적어야 할 때가 있습니다. 디자인 도구에서는 HEX 로 받았는데 코드에서는 RGB 가 필요하거나, 색을 조금 더 어둡게 조정하려면 HSL 이 편한 식입니다. 이 도구는 세 가지 표기를 서로 바꿔 줍니다.
색상 선택기로 직접 고르거나 값을 입력하면 나머지 표기가 즉시 함께 갱신됩니다.
#FF5733 형태로, 빨강·초록·파랑을 각각 16진수 두 자리로 적습니다. 짧아서 CSS 와 디자인 도구에서 가장 널리 쓰입니다.rgb(255, 87, 51) 형태로, 각 색을 0~255 숫자로 적습니다. 값을 계산하거나 프로그램에서 다룰 때 편합니다.hsl(9, 100%, 60%) 형태로, 색상·채도·명도로 나눠 적습니다. 사람이 색을 인식하는 방식에 가까워 미세 조정에 유리합니다.버튼의 기본색과 마우스를 올렸을 때의 색을 만든다고 해 봅시다. HEX 로는 어떤 숫자를 얼마나 바꿔야 자연스럽게 어두워질지 감이 오지 않습니다. HSL 이라면 명도(L) 값만 10% 정도 낮추면 같은 계열의 어두운 색이 바로 나옵니다.
같은 원리로 채도(S)만 낮추면 비활성 상태의 흐린 색을, 색상(H)만 옮기면 같은 톤의 다른 색 계열을 만들 수 있습니다. 색을 여러 단계로 나눠 쓰는 디자인 시스템에서 특히 유용합니다.
배경과 글자의 밝기 차이가 충분하지 않으면 읽기 어려운 화면이 됩니다. 웹 접근성 기준(WCAG)에서는 본문 글자와 배경의 명도 대비를 4.5 대 1 이상으로 권장하며, 큰 제목은 3 대 1 이상을 요구합니다.
연한 회색 글씨는 디자인 시안에서는 세련돼 보여도 밝은 화면이나 시력이 낮은 이용자에게는 잘 보이지 않습니다. HSL 의 명도 값을 기준으로 배경과 글자를 충분히 벌려 두시기 바랍니다.
표기 방식만 다르고 나타내는 색은 같습니다. HEX 는 #FF5733 처럼 16진수로 적어 CSS 에서 간결하게 쓰기 좋고, RGB 는 빨강·초록·파랑 값을 따로 적어 프로그램에서 계산하기 좋습니다.
색을 조금씩 조정할 때 편합니다. 색상(H)은 그대로 두고 명도(L)만 낮추면 같은 계열의 어두운 색을 쉽게 얻을 수 있어, 버튼의 기본색과 눌렀을 때 색을 만들 때 자주 쓰입니다.
이 도구는 불투명한 색상값만 다룹니다. 투명도가 필요하면 CSS 에서 rgba() 나 8자리 HEX(#RRGGBBAA) 형태로 직접 지정하시면 됩니다.
지원하지 않습니다. CMYK 변환은 잉크와 용지 특성에 따라 결과가 달라져 단순 계산으로는 정확한 값을 얻기 어렵기 때문입니다. 인쇄물은 인쇄소에서 제공하는 색상표를 기준으로 삼으시기 바랍니다.
저장되지 않습니다. 변환은 브라우저 안에서 이뤄지며 어떤 값도 서버로 전송되지 않습니다.