Color Picker & Converter

색상 선택기 & 변환기

시각적으로 고르거나 어떤 값이든 붙여넣으세요 — HEX, RGB, HSL, OKLCH, OKLAB이 동기화됩니다. WCAG 2.2 명도 대비 검사기와 OKLCH 기반 팔레트 생성기를 포함합니다. 모든 작업이 브라우저 안에서 실행됩니다.

색상 선택기 & 변환기 — TL;DR

시각적으로 고르거나 어떤 값이든 붙여넣으세요 — HEX, RGB, HSL, OKLCH, OKLAB이 동기화됩니다. WCAG 2.2 명도 대비 검사기와 OKLCH 기반 팔레트 생성기를 포함합니다. 모든 작업이 브라우저 안에서 실행됩니다.

HEX 필드에 hex 값(예: #ff5722)을 붙여넣으면 RGB 행이 즉시 갱신됩니다. 마찬가지로 RGB 필드에 rgb(255 87 34)를 붙여넣으면 HEX, HSL, OKLCH, OKLAB이 모두 동기화됩니다. 지원되는 모든 형식 간에 양방향 변환이 가능합니다.

OKLCH는 지각적 명도(L), 채도(C), 색조(h)를 사용하는 CSS Color Module Level 4 색 공간입니다 — HSL과 비슷하지만 지각적으로 균일합니다. 동일한 L 값을 가진 두 OKLCH 색상은 색조가 달라도 동일하게 밝아 보입니다. 그 덕분에 디자인 토큰, 생성된 팔레트, 접근성 색상 램프가 HSL보다 훨씬 예측 가능해집니다. 모든 최신 브라우저(Chrome 111+, Safari 15.4+, Firefox 113+)가 지원합니다.

색상 값은 절대 사용자의 기기를 떠나지 않습니다. DevTools → Network를 열면 변환, 선택, 팔레트 생성, 명도 대비 검사 중에 외부로 나가는 요청이 전혀 없는 것을 확인할 수 있습니다.

HEX
RGB
HSL
OKLCH
OKLAB
이름 지정

팔레트

WCAG 2.2 명도 대비

텍스트
배경
—
미리보기
큰 제목 샘플
본문 텍스트 샘플 — 다람쥐 헌 쳇바퀴에 타고파.

실제 작업 흐름을 위한 설계

디자인 시스템부터 접근성 감사까지 — 필요한 모든 형식과 검사를 한곳에서.

여섯 가지 색 공간

HEX(3 / 4 / 6 / 8자리), RGB(A), HSL(A), OKLCH, OKLAB, CSS 이름 색상 사이를 자유롭게 변환합니다. 출력 문자열은 CSS Color Module Level 4 문법과 일치하므로 그대로 스타일시트에 붙여넣을 수 있습니다.

WCAG 2.2 명도 대비 검사기

두 색상 간의 명도 대비 비율을 즉시 확인하고, AA(4.5 : 1)와 AAA(7 : 1)에 대한 일반 텍스트와 큰 글자 크기 모두에 대해 원클릭 합격/불합격 배지를 제공합니다. 계산은 W3C 기준과 일치합니다: sRGB 선형화, 상대 휘도, 그리고 (L1+0.05)/(L2+0.05).

EyeDropper — 어떤 픽셀이든 추출

스포이드 버튼을 클릭하면 화면의 어떤 색상이든 추출할 수 있습니다 — 디자인, 스크린샷, 사진, 심지어 다른 브라우저 탭까지. Chromium 계열 브라우저에서는 네이티브 EyeDropper API를 사용합니다.

OKLCH 기반 팔레트

9단계의 tint와 shade, 그리고 보색·삼각·유사 조화 색상을 생성합니다 — OKLCH로 도출되어 각 단계가 지각적으로 균등한 간격을 가집니다(명도가 들쭉날쭉한 HSL과 달리).

프라이버시 우선 설계

모든 변환은 사용자의 기기에서 JavaScript로 실행됩니다. 어떤 것도 업로드, 기록, 제3자에게 전송되지 않습니다 — 직접 확인하려면 DevTools → Network를 열어 보세요.

속도를 위한 설계

순수 JavaScript, 프레임워크 런타임 없음. 콜드 로드는 gzip 기준 50 KB 미만이며, 변환과 팔레트 생성은 5년 된 노트북에서도 1밀리초 이내에 끝납니다.

색상 선택기 사용 방법

시작하는 네 가지 방법, 모든 형식이 동기화됩니다.

  1. 1

    시각적으로 고르기

    채도/명도 사각형 안을 드래그해 음영을 고르고, 아래의 색조 바를 슬라이드해 기본 색을 바꾸며, 알파 슬라이더로 투명도를 조절하세요. 오른쪽의 모든 형식이 즉시 갱신됩니다.

  2. 2

    어떤 값이든 붙여넣기

    HEX(#4f46e5), RGB(rgb(79 70 229)), HSL(hsl(244 76% 59%)), OKLCH(oklch(53% 0.22 277)), 또는 CSS 이름 색상(tomato)을 해당 입력창에 붙여넣으면 — 선택기와 다른 형식이 모두 동기화됩니다.

  3. 3

    스포이드로 추출

    스포이드 버튼을 클릭해 화면의 어떤 픽셀이든 캡처하세요 — 다른 탭, 스크린샷, 사진, 아이콘 무엇이든 가능합니다. Chrome, Edge, Opera에서는 네이티브 EyeDropper API를 사용합니다.

  4. 4

    복사하거나 명도 대비 확인

    어떤 형식이든 옆의 복사 아이콘을 클릭하면 클립보드에 담깁니다. 또는 WCAG 2.2 명도 대비 섹션으로 스크롤해 전경/배경 조합이 일반 텍스트와 큰 텍스트 크기에서 AA 또는 AAA를 통과하는지 확인하세요.

디자이너, 개발자, 접근성 감사자를 위한 설계

네 가지 일반적인 작업 흐름에 맞는 색상 도구.

디자인 시스템 토큰 작성

브랜드 HEX 값을 OKLCH로 변환해 토큰 램프의 모든 음영이 동일한 지각적 명도 단계를 갖도록 하세요. OKLCH 출력을 그대로 CSS에 붙여넣을 수 있습니다 — 전처리기 필요 없음.

WCAG 접근성 감사

전경/배경 쌍을 입력하고 명도 대비 비율과 AA / AAA 배지를 확인하세요. 출시 전에 실패하는 조합을 잡아냅니다 — W3C가 요구하는 일반 4.5 : 1 / 강화 7 : 1 임계값을 충족합니다.

프런트엔드 CSS 변환

디자이너 시안의 HEX는 있는데 Tailwind 설정용 HSL이나 최신 스타일시트용 OKLCH가 필요한가요? 한 번 붙여넣고 어떤 형식으로든 복사하세요. 출력 문자열은 유효한 CSS Color Module Level 4 문법입니다.

팔레트 탐색

기본 색상을 고르면 지각적으로 균등한 간격의 9단계 tint와 shade, 보색·삼각·유사 조화 색상을 즉시 확인할 수 있습니다 — OKLCH로 생성되어 각 단계가 균등하게 밝아 보입니다.

100% 비공개 — 브라우저에서 실행

색상 값은 절대 사용자의 기기를 떠나지 않습니다. DevTools → Network를 열면 변환, 선택, 팔레트 생성, 명도 대비 검사 중에 외부로 나가는 요청이 전혀 없는 것을 확인할 수 있습니다.

  • 모든 변환(HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB)은 사용자의 기기에서 JavaScript로 실행됩니다 — 공식은 페이지 소스에서 그대로 볼 수 있습니다.
  • EyeDropper API는 사용자가 명시적으로 클릭한 색상만 반환합니다. 브라우저가 권한을 처리하며, 페이지가 임의의 픽셀을 보는 일은 절대 허용하지 않습니다.
  • 로그인 없음, 색상 값에 대한 텔레메트리 없음, 제3자 색상 API 없음. 사이트는 기본적으로 GDPR을 준수합니다.

관련 가이드

디자이너, 개발자, 접근성 팀을 위한 엄선된 튜토리얼.

자주 묻는 질문

HEX를 RGB로 어떻게 변환하나요?

HEX 필드에 hex 값(예: #ff5722)을 붙여넣으면 RGB 행이 즉시 갱신됩니다. 마찬가지로 RGB 필드에 rgb(255 87 34)를 붙여넣으면 HEX, HSL, OKLCH, OKLAB이 모두 동기화됩니다. 지원되는 모든 형식 간에 양방향 변환이 가능합니다.

OKLCH란 무엇이며 왜 사용해야 하나요?

OKLCH는 지각적 명도(L), 채도(C), 색조(h)를 사용하는 CSS Color Module Level 4 색 공간입니다 — HSL과 비슷하지만 지각적으로 균일합니다. 동일한 L 값을 가진 두 OKLCH 색상은 색조가 달라도 동일하게 밝아 보입니다. 그 덕분에 디자인 토큰, 생성된 팔레트, 접근성 색상 램프가 HSL보다 훨씬 예측 가능해집니다. 모든 최신 브라우저(Chrome 111+, Safari 15.4+, Firefox 113+)가 지원합니다.

WCAG 명도 대비 결과는 신뢰할 수 있나요?

네. WCAG 2.2 §1.4.3의 알고리즘을 사용합니다: 각 sRGB 채널을 선형화하고, 상대 휘도(0.2126·R + 0.7152·G + 0.0722·B)를 계산한 뒤, (L_lighter + 0.05) / (L_darker + 0.05)를 구합니다. 일반 텍스트는 4.5 : 1, 큰 텍스트(18 pt+ 또는 14 pt+ 굵게)는 3 : 1에서 AA를 통과합니다. AAA는 각각 7 : 1과 4.5 : 1에서 통과합니다.

이미지나 다른 앱에서 색상을 추출할 수 있나요?

네 — 스포이드 버튼을 클릭하면 브라우저 내장 EyeDropper API가 실행됩니다. 다른 브라우저 탭, Figma 디자인, 비디오 프레임, 심지어 스크린샷까지 화면 어디든 어떤 픽셀이라도 추출할 수 있습니다. 현재 Chrome, Edge, Opera에서 지원되며, Firefox와 Safari에서는 자연스럽게 폴백됩니다(버튼이 비활성화됨).

서버로 전송되는 데이터가 있나요?

없습니다. 색상 선택기, 모든 변환, 팔레트 생성기, 명도 대비 검사기 모두 사용자의 브라우저에서 실행됩니다. 어떤 색상 값, 이미지 샘플, 텍스트도 절대 전송되지 않습니다. DevTools → Network를 열어 사용 중에 외부로 나가는 요청이 전혀 없는지 직접 확인할 수 있습니다.