100%

화면용으로 CMYK 잉크 값을 RGB로 바꿉니다. R = 255 × (1 − C) × (1 − K)이고, G는 M, B는 Y로 같은 방식입니다. cmyk(0%, 80%, 60%, 10%)은 rgb(230, 46, 92)가 됩니다. 결과를 RGB, HEX, HSL로 복사해 웹에 쓰세요.

사용법

  1. 큰 색상 견본을 눌러 컬러 피커를 열거나, 스포이트로 화면의 색을 추출하거나, 각 입력란에 직접 입력합니다.
  2. #hex, rgb(), hsl(), hwb(), oklch(), lab(), 색 이름 등 CSS 색상을 입력란이나 페이지 아무 곳에 붙여 넣을 수 있습니다.
  3. 각 형식 옆의 복사 버튼으로 코드를 복사합니다. 불투명도 슬라이더로 투명도를 더할 수 있습니다.
  4. 팔레트에서 견본을 누르면 현재 색이 되고, 길게 누르면(오른쪽 클릭) HEX가 복사됩니다. 명도 대비 탭에서 글자색과 배경색을 정하고, 기준에 못 미치면 제안 색을 눌러 고칩니다.
  • WCAG 2.1은 일반 글자에 4.5:1(AA), AAA에 7:1을 요구합니다. 큰 글자(24 px 또는 굵은 18.66 px)는 AA 3:1, AAA 4.5:1이며 UI 요소와 그래픽은 3:1이 필요합니다.
  • 제안 색은 색상과 채도를 유지하고 명도(OKLCH)만 바꿔 기준을 통과하는 가장 가까운 값을 찾습니다.
  • 반투명 색은 배경과 합성한 뒤 대비율을 계산합니다.
  • CMYK 값은 단순 변환입니다. 인쇄용이라면 인쇄소의 색상 프로파일을 사용하세요.
  • 최근 사용한 색은 이 브라우저에만 저장됩니다.

색상 코드 형식

HEX는 CSS와 디자인 툴에서 쓰는 여섯 자리 코드로, #1E88E5는 빨강 1E(30), 초록 88(136), 파랑 E5(229)를 뜻합니다. RGB는 같은 값을 0~255 십진수로 적은 것입니다. HSL은 색상(0~360°), 채도, 명도로 나타내 색을 어둡게 하거나 부드럽게 바꾸기 쉽습니다. HSV는 대부분의 색상 선택 사각형이 쓰는 모델입니다.

OKLCH는 지각적으로 균일한 Oklab 색 공간을 바탕으로 한 새로운 CSS 형식으로, 명도를 같은 폭으로 바꾸면 눈에도 같은 차이로 보입니다. 단계별 색 만들기나 접근성 좋은 팔레트에 잘 맞습니다. CMYK는 인쇄 잉크 양을 나타내는데, 여기 값은 프로파일 없는 단순 변환이므로 정확한 인쇄 색은 인쇄소 프로파일을 쓰세요.

직접 변환하는 방법

HEX를 RGB로 바꾸려면 코드를 두 자리씩 세 쌍으로 나눠 16진수에서 변환합니다. #FF6347은 255, 99, 71입니다. RGB에서 CMYK는 K = 1 − max(R, G, B) / 255, C = (1 − R/255 − K) / (1 − K)이고 M과 Y도 같은 방식입니다. 순수한 주황 rgb(255, 165, 0)은 cmyk(0%, 35%, 100%, 0%)입니다. 이 도구는 이 모든 계산을 즉시 하고, 색 이름과 rgb(), hsl(), hwb(), lab(), oklch() 입력도 받습니다.

팔레트 만들기

흰색을 섞은 밝은 톤과 검은색을 섞은 어두운 톤으로 배경, 테두리, 마우스 오버 색에 쓸 단계를 만들 수 있습니다. 배색 팔레트는 색상을 돌려 만듭니다. 보색(180°), 유사색(±30°), 3색 배색(120°), 4색 배색(90°씩)이 있습니다. 최근 색은 이 브라우저에만 저장됩니다.

자주 묻는 질문

HEX를 RGB로 바꾸려면?

HEX 코드를 아무 칸에나 붙여 넣고 RGB 값을 복사하세요. 직접 하려면 코드를 두 자리씩 나눠 16진수에서 변환합니다. #1E88E5는 rgb(30, 136, 229)입니다.

화면에 보이는 색을 추출하려면?

스포이트를 누르고 화면 아무 곳이나 클릭하세요. 데스크톱 Chrome, Edge처럼 EyeDropper API를 지원하는 브라우저에서 됩니다.

OKLCH는 무엇이고 왜 쓰나요?

OKLCH는 Oklab 모델을 바탕으로 명도, 채도(크로마), 색상으로 나타내는 CSS 색 형식입니다. 명도만 바꾸면 색상이 유지된 고른 단계가 나오는데, HSL로는 이렇게 되지 않습니다.

CMYK 값을 인쇄에 그대로 써도 되나요?

색 프로파일 없는 계산 값입니다. 인쇄 결과는 종이, 잉크, 인쇄기에 따라 달라지니 브랜드 색처럼 중요한 색은 인쇄소 프로파일의 CMYK 값을 쓰세요.

투명도를 넣을 수 있나요?

네. 불투명도를 움직이면 모든 형식이 바뀌어 HEX에는 알파 두 자리(#RRGGBBAA)가, CSS 함수에는 알파 값이 붙습니다.

색 기록이 저장되나요?

최근 색은 사용하는 기기의 이 브라우저에만 저장됩니다. 서버로는 아무것도 보내지 않습니다.

함께 쓰는 도구

사용법

순서

  1. 큰 색상 견본을 눌러 컬러 피커를 열거나, 스포이트로 화면의 색을 추출하거나, 각 입력란에 직접 입력합니다.
  2. #hex, rgb(), hsl(), hwb(), oklch(), lab(), 색 이름 등 CSS 색상을 입력란이나 페이지 아무 곳에 붙여 넣을 수 있습니다.
  3. 각 형식 옆의 복사 버튼으로 코드를 복사합니다. 불투명도 슬라이더로 투명도를 더할 수 있습니다.
  4. 팔레트에서 견본을 누르면 현재 색이 되고, 길게 누르면(오른쪽 클릭) HEX가 복사됩니다. 명도 대비 탭에서 글자색과 배경색을 정하고, 기준에 못 미치면 제안 색을 눌러 고칩니다.

단축키

Ctrl + V어디서나 색상 붙여 넣기Enter입력한 값 적용Esc입력 취소

알아두면 좋은 점

브라우저 안에서 동작합니다. 파일과 입력한 내용은 기기 밖으로 나가지 않습니다.