작업 목적에 맞는 색상 코드를 고르세요.
HEX·RGB·HSL·HSV·CMYK·OKLCH의 차이와 CSS 그라데이션, 인쇄용 변환 주의점.
HEX와 RGB는 같은 sRGB 색상을 표현합니다
6자리 HEX는 빨강·초록·파랑의 값을 2자리씩 나타냅니다. 각 값은 00부터 FF입니다. 예를 들어 #FF0000은 rgb(255, 0, 0)과 같습니다. 3자리 #369는 각 숫자를 반복한 #336699의 줄임 표기입니다.
변환기는 # 유무와 관계없는 HEX, rgb() 숫자 또는 퍼센트, 채도·명도를 퍼센트로 쓴 hsl(), 화면에 제공된 CSS 색상 이름을 받습니다. 투명도, 넓은 색 영역의 color() 문법, var() 같은 표현식은 입력 대상이 아닙니다. 범위를 벗어나거나 잘못된 입력은 그대로 표시해 수정할 수 있게 합니다.
HSL과 HSV는 조작하기 편한 모델입니다
HSL은 색조·채도·명도로 표현하며 색조는 360도 원을 순환합니다. HSV는 HSL 명도 대신 Value를 사용하고, 관련 프로그램에서 참고하도록 출력값으로 제공합니다. HSL 명도가 같아도 다른 색조가 똑같이 밝게 보이는 것은 아닙니다.
명도별 색상 기능은 색조와 채도를 유지하고 HSL 명도를 단계적으로 바꿉니다. 배경과 텍스트용 변형을 만드는 시작점이며, 자동으로 접근성을 만족하는 디자인 시스템은 아닙니다. 실제 함께 쓰는 색상 쌍을 대비 검사에서 확인하세요.
OKLCH는 지각적 관계를 표현합니다
OKLCH는 Oklab 기반의 밝기·색도·색조입니다. PaletteTidy는 입력된 sRGB 값을 OKLCH로 변환해 화면과 JSON에 제공합니다. 임의의 OKLCH 입력을 받거나 sRGB 밖으로 색 영역을 확장하는 기능은 아닙니다. 중성색은 색도가 매우 작아 색조의 의미가 약해집니다.
실제 CSS에 OKLCH를 사용할 때는 대상 브라우저와 색 영역을 확인하세요. 이미지, UI와 스크린샷에도 일관된 색상 관리가 필요합니다. 같은 코드만으로 모든 화면의 발색을 동일하게 만들 수는 없습니다.
CMYK에는 인쇄 조건이 필요합니다
화면의 CMYK는 ICC 프로파일을 사용하지 않는 간단한 수학적 근사값입니다. 실제 인쇄는 프린터, 용지, 잉크와 ICC 프로파일의 영향을 받습니다. 이 값을 인쇄 확정 사양이나 Pantone 대응값으로 사용하지 마세요.
인쇄 작업은 색상 관리 프로그램에서 인쇄 업체가 요청한 프로파일을 사용하고, 소프트 프루프 및 필요한 실물 교정을 확인하세요. 브라우저 팔레트는 디지털 sRGB 기준으로 활용하는 것이 적합합니다.
그라데이션도 확인한 그대로 가져가세요
2~5개 색상 지점을 선택하고 선형 또는 원형을 고르세요. 선형에는 방향 각도가 있고 원형은 중앙 원을 사용합니다. 색상 지점은 균등한 간격으로 배치되며 출력 CSS에도 위치 퍼센트가 포함됩니다.
팔레트 적용을 누르면 현재 팔레트의 처음 최대 다섯 색상을 가져옵니다. 미리보기는 브라우저 CSS로 그려 출력 문법과 연결됩니다. 복잡한 그라데이션 위의 글자는 불투명 배경을 추가하거나 글자가 놓인 전체 영역에서 가장 낮은 대비를 확인하세요.