색상을 선택하거나 원하는 형식으로 값을 입력하세요. 실시간 미리보기 스와치와 원클릭 복사 기능으로 HEX, RGB, HSL을 즉시 변환합니다.
색상은 웹에서 가장 강력한 디자인 요소 중 하나이며, CSS에 적합한 형식을 선택하면 작업 효율에 큰 차이를 만들 수 있습니다. 가장 널리 사용되는 세 가지 색상 형식인 HEX, RGB, HSL은 각각 1600만 개가 넘는 색상 스펙트럼을 나타내지만, 읽기와 조작의 직관성에서 크게 차이가 있습니다. #3b82f6와 같은 HEX 코드는 간결하고 CSS에서 어디서나 사용되며, rgb(59, 130, 246)와 같은 RGB 값은 화면이 색상을 표시하는 빨강, 초록, 파랑 채널에 직접 매핑됩니다.
HSL(색상, 채도, 밝기)은 디자이너들 사이에서 점점 더 선호되고 있습니다. 이는 인간이 색상을 자연스럽게 인식하는 방식과 일치하기 때문입니다. 추상적인 채널 값을 섞는 대신 색상 휠에서 색상(0-360도)을 선택하고, 채도(0-100%)로 강도를 설정하며, 밝기(0-100%)로 명도를 조절합니다. 이렇게 하면 조화로운 팔레트를 쉽게 만들 수 있습니다: 색상을 고정하고 채도와 밝기를 변형하여 동일한 색상의 색조, 명도, 톤을 만들 수 있습니다. 최신 CSS 커스텀 속성은 HSL과 특히 잘 어울리며, 기본 색상을 정의하고 전체 팔레트를 파생시킬 수 있습니다.
보기 좋은 색상을 선택하는 것만으로는 충분하지 않으며, 접근성도 확보해야 합니다. 웹 콘텐츠 접근성 가이드라인(WCAG 2.1)은 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트의 경우 최소 3:1의 대비 비율을 요구합니다. 남성의 약 8%, 여성의 0.5%가 색각 이상을 겪고 있어 색상만으로 정보를 전달하는 것은 흔한 접근성 함정입니다. 항상 대비 검사 도구와 함께 색상을 선택하고, 색각 이상 시뮬레이션 필터에서 디자인이 어떻게 보이는지 고려하세요. 이 변환기는 색상 값을 빠르게 반복해볼 수 있게 도와주어 다양한 조합을 테스트하고 미학과 가독성 사이의 완벽한 균형을 찾을 수 있습니다.