무료 색상 선택기

온라인 색상 선택기: 완전한 가이드

Volade 색상 선택기는 화면 스포이드, 고급 색상 편집기, 팔레트 생성기, 그라데이션 생성기, WCAG 접근성 검사기, 색각 이상 시뮬레이터, 혼합기 및 개발자 내보내기를 결합한 올인원 웹 도구입니다 — 모두 단일 인터페이스에서 100% 로컬, 회원가입 없이.

HEX/RGB/HSL에 제한되는 일반 편집기와 달리 Volade는 LAB, LCH, OKLCH, OKLAB, CMYK, Display P3, XYZ, HWB를 포함한 16개 색 공간을 지원합니다. 각 형식은 즉시 복사 버튼과 함께 실시간으로 표시되어, 디자이너, 개발자 및 인쇄 전문가를 위한 가장 완전한 도구입니다.

화면 스포이드: 정확한 픽셀 선택

화면 스포이드는 최신 브라우저의 EyeDropper API를 사용하여 화면에 보이는 모든 색상을 캡처합니다. 이미지, 웹사이트, 문서 어디든 클릭하면 색상이 즉시 캡처됩니다. 고해상도 돋보기로 올바른 픽셀을 조준할 수 있으며, 키보드(방향키)로 절대적인 정밀도를 제공합니다. 영역 샘플링(1×1, 3×3, 5×5, 11×11)은 JPEG 압축 아티팩트를 부드럽게 하여 영역의 평균 색상을 얻을 수 있게 합니다.

선택한 색상은 최근 색상 기록에 표시되며, 이전 색상으로의 전환이 즉시 이루어집니다. 고급 사용자를 위해 정밀 모드에서는 픽셀의 정확한 좌표와 각 채널 값을 실시간으로 표시합니다.

타협 없는 색상 편집기

편집기는 HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, LAB, LCH, OKLAB, OKLCH, Display P3, XYZ, Linear RGB의 16개 색상 형식을 동시에 표시합니다. 각 값은 직접 편집 가능합니다. HSL을 변경하면 다른 모든 형식이 실시간으로 업데이트됩니다. 색상 휠은 직관적인 시각적 제어를 제공하고, 수치 슬라이더로 정밀한 조정이 가능합니다.

알파/투명도가 기본적으로 지원됩니다: 전용 슬라이더로 불투명도를 0~100%로 조정하고 모든 형식에 미치는 영향을 즉시 확인하세요. 수정 기록은 모든 변경 사항을 기록하며, 언제든지 실행취소/다시 실행이 가능합니다.

스마트 색상 인텔리전스: 단순한 선택을 넘어

단 하나의 색상에서 도구는 보색, 유사색, 삼조화, 사조화, 분할 보색, 모노크롬 등 모든 고전적 조화를 자동으로 생성합니다. 더 나아가 어두운색(shades), 밝은색(tints), 톤(tones), 따뜻한색(warm), 차가운색(cool) 변형이 자동으로 생성됩니다.

Generate Palette 모드는 모든 색상을 완전한 디자인 시스템으로 변환합니다: primary, secondary, accent, background, surface, text, muted, border, success, warning, error, info — 각각 RGB, OKLCH, HEX 값을 가집니다.

이미지 → 팔레트: 사진에서 색상 추출

이미지(사진, 일러스트레이션, 스크린샷)를 드롭하면 도구가 픽셀을 분석하여 팔레트를 추출합니다. 다섯 가지 추출 모드를 사용할 수 있습니다: 지배적(가장 빈번한 색상), 선명한(가장 채도 높은), 차분한(채도 낮은), 균형 잡힌(시각적으로 조화로운), 브랜드(브랜드 아이덴티티에 적합한 색상).

추출은 5~15개의 색상을 반환하며, 각각 잠재적 역할(지배적, 액센트, 어두운, 밝은)이 레이블로 표시됩니다. 기존 사진에서 그래픽 가이드라인을 추출해야 하는 디자이너에게 주요 가속 도구입니다.

WCAG 접근성 검증

접근성 섹션은 두 색상(전경 vs 배경)을 비교하고 일반 텍스트, 큰 텍스트 및 UI 구성 요소에 대한 WCAG AA, AAA 뱃지와 함께 정확한 대비 비율을 표시합니다. 비율이 부족하면 Auto Fix 버튼이 기준을 충족하는 가장 가까운 색상을 자동으로 제안합니다.

의무적 접근성 기준(RGAA, EN 301 549, ADA, Section 508)을 준수해야 하는 개발자에게 필수적인 도구입니다.

색각 이상 시뮬레이터: 모두를 위한 설계

전 세계 약 3억 5천만 명이 색각 이상을 가지고 있습니다. 시뮬레이터는 적색형색맹, 녹색형색맹, 청색형색맹, 무채색증 및 각각의 중등도 변형을 포함한 8가지 유형의 색각 이상이 인식하는 대로 색상을 보여줍니다. 인터페이스가 실제로 접근 가능한지 확인하는 유일한 방법입니다.

고급 보간법이 적용된 그라데이션 생성기

최대 10개의 색상 지점으로 선형, 방사형, 원뿔형 그라데이션을 만드세요. RGB 보간법은 클래식 그라데이션을 생성하고, HSL은 더 부드러운 전환을 제공하며, LAB과 OKLCH는 눈에 보이는 끊김이나 밴딩 없이 지각적으로 균일한 그라데이션을 만듭니다. CSS 코드는 자동으로 생성되며 클릭 한 번으로 복사할 수 있습니다.

색상 믹서: 색상 혼합

configurable ratio(0/100~100/0)로 네 가지 모드에서 두 색상을 혼합하세요: RGB(가산 혼합), HSL(색상 회전), LAB(지각 공간), OKLCH(가장 자연스러운). 중간 색상, 그림자 및 맞춤 색조를 만드는 이상적인 도구입니다.

ΔE 색상 차이: 전문가의 정밀도

디자이너와 인쇄 전문가를 위한 색차 계산(Delta E)은 필수적입니다. 이 도구는 ΔE76, ΔE94, ΔE2000을 텍스트 해석과 함께 표시합니다: 인식 불가(ΔE < 1), 노력 시 인식 가능(1-2), 다름(2-10), 매우 다름(10-50), 높은 대비(50+).

색상 플레이그라운드: 실제 환경에서 테스트

플레이그라운드는 실제 인터페이스 구성 요소에 색상을 표시합니다: 버튼, 카드, 배지, 입력 필드, 알림, 링크 및 텍스트. 색상이 배경색, 버튼색 또는 텍스트색으로 적합한지 즉시 확인할 수 있습니다 — 실시간 접근성 점수와 함께.

개발자 내보내기: 10가지 코드 형식

원하는 언어로 코드를 생성하세요: CSS Variables, SCSS, Tailwind config, JSON design tokens, TypeScript, Swift(UIColor), Kotlin(Color), Flutter/Dart, React Native(StyleSheet), Vue. 각 내보내기에는 변형(50-950)과 역할(primary, secondary, accent 등)이 포함됩니다.

누구에게 유용한가요?

팔레트와 디자인 시스템을 만드는 UI/UX 디자이너; CSS, Tailwind, SCSS에 색상을 통합하는 프론트엔드 개발자; 사진에서 그래픽 가이드라인을 추출하는 그래픽 디자이너; WCAG 대비를 확인하는 접근성 팀; ΔE를 계산하는 인쇄 전문가; 그리고 전문적으로 색상을 탐색하고 싶은 모든 크리에이터.