인쇄 팔레트를 웹으로 가져올 땐 HSL이 더 쉬워: 잉크 혼합을 hue, saturation, lightness로 표현하면 순식간에 호버 상태, 틴트, 쉐이드를 만들 수 있어.
CMYK에서 HSL로 어떻게 변환되는지
- CMYK 퍼센트를 Coated FOGRA39 프로파일로 0에서 255 사이의 sRGB 채널로 변환합니다.
- 채널들을 255로 나누고 최대값과 최소값을 구해.
- 최댓값과 최솟값의 평균이 광도 L이고, 그 차이가 채도 S를 결정해.
- 최댓값을 가진 채널이 색상환에서의 H(도)를 결정해.
작동 예시
CMYK cmyk(66%, 82%, 0%, 0%)=HSL hsl(276, 37%, 43%)
CMYK에서 RGB로의 단계는 표준 Coated FOGRA39 프로파일을 사용하므로, 다른 CMYK 프로파일(예: 인쇄소의 프로파일)은 다른 값을 냅니다. HSL 값은 정수로 반올림합니다.
CMYK과(와) HSL 설명
CMYK이(가) 무엇인가요?
CMYK는 인쇄에서 쓰이는 4색 잉크 모델로 시안, 마젠타, 옐로우, 블랙(key)을 각 0–100% 비율로 나타냅니다. 잉크는 빛을 흡수(감산)하므로 화면보다 재현 가능한 색 영역이 좁아 밝은 화면 색상이 인쇄되면 다소 탁해 보일 수 있습니다.
- 구문:
- cmyk(C%, M%, Y%, K%)
- 범위:
- 잉크별 0–100%
- 적합한 용도:
- 인쇄, 패키지, 인쇄용 작품 준비
HSL이(가) 무엇인가요?
HSL은 색을 색상(색환상의 0–360°), 채도(얼마나 채색된지, 0–100%), 명도(밝기, 0–100%)로 나눕니다. 사람이 색을 설명하는 방식과 유사하기 때문에 HSL은 색조, 쉐이드, 일관된 팔레트를 수작업이나 코드로 만들 때 가장 다루기 쉽습니다.
- 구문:
- hsl(H, S%, L%)
- 범위:
- 0–360°, 0–100%, 0–100%
- 적합한 용도:
- 팔레트, 틴트와 쉐이드, 테마 작업
CMYK to HSL 참조표
가장 흔한 CSS 색상들을 CMYK에서 HSL로 변환한 표입니다.
| 색상 | CMYK | HSL |
|---|---|---|
| black | cmyk(89%, 78%, 62%, 97%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 95%, 92%, 0%) | hsl(1, 79%, 51%) |
| lime | cmyk(64%, 0%, 100%, 0%) | hsl(93, 60%, 44%) |
| blue | cmyk(93%, 75%, 0%, 0%) | hsl(224, 56%, 39%) |
| yellow | cmyk(9%, 0%, 96%, 0%) | hsl(57, 100%, 48%) |
| orange | cmyk(0%, 43%, 94%, 0%) | hsl(37, 93%, 53%) |
| teal | cmyk(83%, 27%, 48%, 12%) | hsl(180, 87%, 27%) |
| purple | cmyk(63%, 100%, 4%, 1%) | hsl(299, 58%, 31%) |
| gray | cmyk(48%, 39%, 39%, 21%) | hsl(30, 1%, 50%) |
자주 묻는 질문
CMYK 퍼센트를 Coated FOGRA39 프로파일로 0에서 255 사이의 sRGB 채널로 변환합니다. 채널들을 255로 나누고 최대값과 최소값을 구해. 최댓값과 최솟값의 평균이 광도 L이고, 그 차이가 채도 S를 결정해. 최댓값을 가진 채널이 색상환에서의 H(도)를 결정해.
CMYK에서 RGB로의 단계는 표준 Coated FOGRA39 프로파일을 사용하므로, 다른 CMYK 프로파일(예: 인쇄소의 프로파일)은 다른 값을 냅니다. HSL 값은 정수로 반올림합니다.
HSL은 색을 색상(색환상의 0–360°), 채도(얼마나 채색된지, 0–100%), 명도(밝기, 0–100%)로 나눕니다. 사람이 색을 설명하는 방식과 유사하기 때문에 HSL은 색조, 쉐이드, 일관된 팔레트를 수작업이나 코드로 만들 때 가장 다루기 쉽습니다.
예. 입력 옆의 교체 버튼을 누르면 HSL → CMYK 변환기로 이동하며 작동 방식은 똑같습니다. 양 방향 모두 같은 공식을 사용하되 적용 순서만 반대입니다.
HSL로 왔다면 인쇄에서의 hue는 유지하고 웹 버전에는 광도만 조절해. 브랜드 색을 알아보게 유지하면서 화면 대비 요구사항도 맞출 수 있어.