# 컬러 피커

> HSV, HSL, 화가용 RYB 색상환, 완성된 색상 조화, HEX, RGB, HSL, OKLCH, CMYK 변환과 가장 가까운 Tailwind 토큰까지. 무료, 설치 없이 브라우저에서 바로 사용하세요.

URL: https://acrafto.com/ko/online-color-picker/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

색상환에서 색을 고르고, 채도 캔버스에서 세밀하게 조정한 다음, 프로젝트가 사용하는 모든 형식으로 결과를 확인하세요. `#RRGGBB`부터 `oklch()`까지 전부 다룹니다. 이 색상 선택 도구는 다른 도구들이 놓치는 부분까지 챙깁니다. 화가용 RYB 휠을 포함한 세 가지 휠 형태, 팔레트를 자동으로 만들어주는 색상 조화, 알파 채널, 팔레트 전체를 CSS 변수, SCSS, JSON으로 한 번에 내보내는 기능까지, 모두 브라우저에서 로컬로 계산됩니다.

## RYB vs RGB: 세 가지 휠, 하나가 아닙니다

**휠 모드** 선택기는 휠 자체의 기하학적 구조를 바꿉니다:

- **HSV**와 **HSL**은 디지털 휠로, RGB 화면이 빛을 혼합하는 방식대로 색조가 배치됩니다. 두 방식은 정사각형 캔버스가 작동하는 방식이 다릅니다. HSV는 가장 밝은 모서리가 순수한 색조이고, HSL은 순수한 색조를 밝기 중간에 두고 그 위에 흰색을 배치합니다.
- \*\*RYB (화가용)\*\*은 화가들이 배워온 방식대로 색조를 배치합니다. 빨강, 노랑, 파랑을 원색으로 하고 그 사이에 주황, 초록, 보라를 둡니다(위키백과의 [RYB 색 모델](https://ko.wikipedia.org/wiki/RYB_%EC%83%89_%EB%AA%A8%EB%8D%B8) 참고). 이 방식의 실용적 가치는 색상 조화에서 드러납니다. RYB 휠에서 빨강의 보색은 **초록**이고 파랑의 보색은 **주황**으로, 전통적인 안료 배합과 같습니다. 반면 디지털 휠은 빨강을 시안과 짝짓습니다. 일반적인 색상 선택 도구의 “보색” 팔레트가 눈으로 보기에 이상하게 느껴진 적이 있다면 바로 이 때문입니다.

## 팔레트를 대신 만들어주는 색상 조화

**색상 조화** 아래에서 규칙을 선택하면 휠이 어울리는 색을 표시하며, 이는 바로 사용할 수 있는 팔레트로 나타납니다:

- **보색:** 정반대 색 하나. 가장 강한 대비를 주므로, 주요 브랜드 색에 대비되는 단일 강조색으로 사용하세요.
- **분할 보색:** 보색의 양쪽 이웃 두 색. 대비는 거의 그대로 유지하면서 균형을 맞추기 훨씬 쉽습니다.
- **삼각(트라이애딕):** 균등한 간격의 세 색조. 생동감 있으면서도 안정적입니다. 하나를 주역으로 삼고 나머지 둘은 절제해서 사용하세요.
- **사각(테트라딕):** 네 가지 색조. 일러스트나 데이터 시각화에 어울리는 풍부한 조합이지만 UI 작업에서는 균형을 맞추기 어렵습니다.
- **유사색:** 바로 이웃한 색들. 긴장감이 낮아 배경이나 그라데이션에 적합합니다.
- **단색(모노크로매틱):** 밝기만 단계적으로 바꾼 한 가지 색조. 호버, 활성, 비활성 같은 인터페이스 상태에 가장 안전한 선택입니다.

팔레트 패널은 원하는 형식으로 전체 세트를 한 번에 복사합니다. 순수한 **HEX**, **RGB**, **HSL**, **OKLCH**, 바로 붙여넣을 수 있는 **CSS 커스텀 속성**(`--color-1: …`), **SCSS 변수**, 코드에 전달하기 좋은 **JSON**까지 선택할 수 있습니다. 팔레트가 색을 구별하기 어려운 사람에게도 대비를 유지하는지 확인하려면 화면을 캡처한 다음 [회색조로 변환](https://acrafto.com/ko/image-grayscale-conversion/)해 보세요.

## HEX, RGB, HSL, OKLCH, CMYK 변환: 무엇이든 붙여넣고, 모든 것을 확인하세요

입력 필드는 거의 모든 색상 표기를 그대로 받아들입니다: `#f80`, `#ff8800`, 알파가 포함된 8자리 HEX, `rgb()` / `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800`, 또는 `rebeccapurple` 같은 CSS 색상 이름까지. 무엇을 입력하든 **HEX, RGB, HSL, HSV, LCH, OKLCH, CMYK**의 일곱 가지 값이 서로 동기화되어 반환되며, 각각 고유한 복사 버튼이 딸려 있습니다.

미리보기 아래의 **불투명도(알파)** 슬라이더를 움직이면 출력값이 투명도를 포함한 형태로 바뀝니다. `#RRGGBBAA`, `rgba()`, `hsla()`. 미리보기는 체크무늬 배경 위에 표시되어 투명도를 눈으로 판단할 수 있습니다.

## 가장 가까운 Tailwind CSS 색상 토큰 찾기

미리보기 아래의 두 헬퍼 칩은 색상의 이름을 알려줍니다: **가장 가까운 CSS 색상 이름**(빠른 프로토타이핑이나 색을 설명할 때 유용)과 **가장 가까운 Tailwind 토큰**(예: `orange-500`)으로, 매번 새 값을 만들지 않고 디자인 시스템 안에 머무를 수 있습니다. 어느 칩을 클릭해도 복사됩니다.

이는 모든 디자인 인수인계에서 등장하는 질문에 답합니다: *디자이너가 hex 코드를 보내왔는데, 어떤 Tailwind 클래스가 가장 가까울까?* 이 매칭은 [Tailwind 색상 문서](https://tailwindcss.com/docs/colors)(영어)에 나온 Tailwind CSS 4의 기본 팔레트를 기준으로 계산되므로, 반환되는 토큰은 클래스 이름에 그대로 붙여 넣을 수 있습니다.

## 어떤 형식을 써야 할까요?

| 형식 | 전체 이름 | 언제 사용해야 할까요? |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **웹의 기본값.** 간결하고 어디서나 지원되며 복사하기 쉽습니다. 8자리를 쓰면 알파가 추가됩니다. |
| **RGB** | Red, Green, Blue | **화면이 생각하는 방식.** 0부터 255까지 범위의 세 가지 빛 채널로, 대부분의 API와 캔버스 코드가 기대하는 형식입니다. |
| **HSL** | Hue, Saturation, Lightness | **사람이 직접 편집하기 좋은 방식.** “조금 더 밝게”나 “덜 채도 있게”가 숫자 하나만 바꾸면 됩니다. |
| **HSV** | Hue, Saturation, Value | **그래픽 소프트웨어.** 포토샵과 GIMP의 색상 선택 도구 뒤에 있는 모델입니다. |
| **LCH** | Lightness, Chroma, Hue | **지각적으로 균일한 방식.** 숫자가 같은 폭으로 바뀌면 눈에도 같은 폭으로 보입니다. HSL은 이를 흉내만 낼 뿐입니다. |
| **OKLCH** | OK Lightness, Chroma, Hue | **현대적인 CSS의 선택.** LCH의 파란색 계열 색조 왜곡을 해결했고, 모든 최신 브라우저에서 지원되며 디자인 토큰 시스템에 이상적입니다. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **인쇄를 위한 방향성.** 인쇄 디자이너와 소통할 때 쓰는 근사 변환값이며, 최종 값은 항상 인쇄소의 컬러 프로파일에서 결정됩니다. |

OKLCH가 왜 예전 모델보다 지각적으로 더 균일한지는 Oklab 색공간을 설계한 Björn Ottosson이 [원문 글](https://bottosson.github.io/posts/oklab/)(영어)에서 설명합니다. 문법과 브라우저 지원 현황은 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch)(영어)에 정리되어 있습니다. 인쇄용 모델이 어떻게 동작하는지는 위키백과의 [CMYK](https://ko.wikipedia.org/wiki/CMYK) 문서에서 설명합니다.

## 시간을 아껴주는 작은 기능들

- **기록은 저절로 유지됩니다.** 최근 사용한 24가지 색상이 페이지를 새로고침해도 남아 있습니다. 브라우저의 로컬 스토리지에만 저장되며 어디로도 업로드되지 않습니다.
- **스포이드.** EyeDropper API를 지원하는 브라우저(Chrome, Edge)에서는 브라우저 창 밖을 포함해 화면 어디서든 색을 추출할 수 있습니다. 사진이나 로고에서 색을 뽑아내려면 [이미지 색상 추출기](https://acrafto.com/ko/image-color-picker/)를 이용하세요.
- **키보드 조작.** 휠과 채도 캔버스는 화살표 키로 픽셀 단위의 정밀한 조정에 반응합니다.
- **사전 설정**은 빠르게 시작하고 싶을 때 자주 쓰는 기본 색상들을 제공합니다.

## 자주 묻는 질문

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

OKLCH 필드에 `oklch()` 값을 붙여넣으면 HEX를 포함한 다른 모든 출력값이 즉시 업데이트됩니다. 반대 방향으로도 작동합니다. HEX 코드를 입력하면 해당하는 `oklch()` 값을 바로 확인할 수 있습니다. 한 가지 주의할 점은, OKLCH는 sRGB 색역을 벗어난 색상도 표현할 수 있는데, 이런 색상은 sRGB가 표시할 수 있는 범위로 잘려 나간다는 것입니다. 그래서 채도가 매우 높은 `oklch()` 값과 그 HEX 형태는 광색역 디스플레이에서 완전히 동일하게 보이지 않을 수 있습니다.

### oklch()를 실제 서비스의 CSS에 써도 안전한가요?

네. Chrome, Edge, Firefox, Safari의 모든 최신 버전이 `oklch()`를 지원하며, 디자인 토큰을 위한 선호 표기법으로 자리 잡았습니다(Tailwind CSS 4는 전체 팔레트를 이 방식으로 정의합니다). 아주 오래된 브라우저를 위해서는 바로 앞 줄에 HEX 대체값을 넣어두면 되며, 이 도구는 두 값을 모두 제공합니다.

### RYB 휠로 전환하면 왜 색상 조화가 달라지나요?

"반대"라는 개념이 색조를 원 위에 어떻게 배치하느냐에 따라 달라지기 때문입니다. RYB 휠은 안료 원색을 고르게 펼쳐놓기 때문에, 보색 쌍이 화가들이 기대하는 조합(빨강과 초록, 파랑과 주황, 노랑과 보라)으로 맞춰집니다. HSV/HSL 휠은 RGB 빛의 혼합 방식대로 색조를 배치해 빨강을 시안과 짝짓습니다. 어느 쪽도 틀리지 않았습니다. RYB는 전통적인 미술 교육과, HSV/HSL은 화면이 실제로 작동하는 방식과 일치할 뿐입니다.

### CMYK 값을 인쇄용으로 그대로 믿어도 되나요?

참고용으로만 여기세요. 실제 인쇄 변환은 인쇄기의 [ICC 프로파일](https://ko.wikipedia.org/wiki/ICC_%ED%94%84%EB%A1%9C%ED%8C%8C%EC%9D%BC), 용지, 잉크에 따라 달라지며, 같은 RGB 색상도 코팅지와 비코팅지에서 다르게 나타납니다. 여기 표시되는 값은 표준 공식을 사용해 근사치를 제공하지만, 최종 교정은 인쇄소의 몫입니다.

### Firefox나 Safari에서는 스포이드 버튼이 왜 안 보이나요?

의도적으로 숨겨진 것입니다. 이 버튼이 의존하는 [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API)(MDN, 영어)는 현재 Chromium 기반 브라우저(Chrome, Edge, Opera)에만 구현되어 있습니다. 다른 브라우저에서도 화면에서 색을 추출하는 기능을 제외한 나머지 기능은 모두 정상적으로 작동합니다. 사진에서 색상을 추출해야 한다면 모든 브라우저에서 작동하는 [이미지 색상 추출기](https://acrafto.com/ko/image-color-picker/)를 이용하세요.

### 색상 기록은 비공개로 유지되나요?

네. 기록은 사용자 기기의 브라우저 로컬 스토리지에만 저장됩니다. 선택하거나 붙여넣거나 복사한 어떤 값도 전송되지 않으며, 이 도구 전체가 클라이언트 측 JavaScript로 동작한다는 사실은 개발자 도구의 네트워크 탭에서 직접 확인할 수 있습니다.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))