colorize
ColorKit
CK
colorize컬러 피커

색상을 고르세요.
모든 정보를 한눈에 파악하세요.

색상을 선택하거나 HEX 코드를 입력하여 틴트, 셰이드, 조화 팔레트 및 CSS 값을 즉시 확인하세요.

palette
스마트 인스펙터유니버설 툴킷정밀도 0.01% ΔE
디자이너와 개발자를 위한 색상 도구
#3B82F6• Drag to pick
색상 상자를 클릭하거나 드래그하세요sRGB • 0.01% ΔE
색상 스펙트럼217°
투명도 (Alpha)100%
HEX
#3B82F6
RGB
59 130 246
HSL
217° 91% 60%
HSV
217° 76% 96%
CMYK
76% 47% 0% 4%
info

Tip: Press C to copy active HEX.

Shades

7 Steps

Darker variations of your color.

#3B82F6→#102343

Tints

7 Steps

Lighter variations of your color.

#3B82F6→#FFFFFF

Color Palette

Harmonious

Harmonious color combinations.

Click any swatch to inspect

Gradient

CSS 90deg

Create beautiful gradients.

#3B82F6 → #EC4899
stars

주요 도구 바로가기

전체 도구 보기arrow_forward
sync_alt
HEX → RGB정밀 색상 변환
transform
RGB → HEXCSS 코드 출력
palette
팔레트 생성기조화로운 색상 조합
contrast
명도 대비 검사기WCAG AA/AAA 충족
지식 베이스 & FAQ

자주 묻는 질문 (FAQ)

자주 묻는 질문과 기술적 문제, 웹 표준에 대한 명확한 답변과 솔루션입니다.

Figma나 Photoshop에서 작업한 색상이 웹 브라우저 CSS에서 다르게 보이는 이유는 무엇인가요?expand_more
이 현상은 색 공간(Color Space) 불일치로 인해 발생합니다. 일반 웹 브라우저는 표준 CSS 16진수(HEX) 코드를 sRGB 색 공간으로 해석합니다. 반면 최신 Mac이나 iPhone, 그래픽 툴(Figma, Photoshop)은 훨씬 넓은 색역을 가진 Display P3 또는 Adobe RGB를 기본값으로 사용하는 경우가 많습니다. P3 색상을 sRGB 프로파일 변환 없이 내보내면 선명도가 저하되어 탁하게 보일 수 있습니다. 디자인 툴의 색상 프로파일을 sRGB로 설정하거나, 최신 CSS Color 4 문법인 color(display-p3 0.9 0.2 0.5)를 사용해 보세요.
웹사이트 색상이 웹 접근성(WCAG 2.1) 표준을 준수하는지 어떻게 확인하나요?expand_more
WCAG 2.1 지침에 따르면 본문 텍스트는 배경 대비 최소 4.5:1(18pt 미만 또는 14pt 볼드 미만), 대형 텍스트 및 버튼 테두리 등 UI 컴포넌트는 3.0:1 이상의 명도 대비율을 충족해야 합니다. 당사의 무료 WCAG 명도 대비 검사기로 모든 색상 조합을 즉시 진단할 수 있습니다.
OKLCH 색상 모델이란 무엇이며, 왜 최신 웹 개발에서 선호되나요?expand_more
OKLCH는 CSS Color Module Level 4에 도입된 인간의 시각 인지 기반 균일 색 공간입니다. 기존 HSL 모델은 '명도 50%'여도 순수 노란색이 순수 파란색보다 훨씬 밝게 인식되는 왜곡이 있었습니다. OKLCH는 밝기(L)를 실제 사람 눈이 느끼는 체감 밝기와 정확히 일치시켜, 그라데이션 중간이 칙칙한 회색으로 흐려지는 현상을 방지하고 예측 가능한 UI 팔레트를 구축할 수 있게 해줍니다.
상업용 프로젝트 및 클라이언트 웹사이트에 무료로 사용할 수 있나요?expand_more
네, 100% 완전 무료입니다. ColorKit에서 생성된 모든 색상 팔레트, 변환 코드, CSS 그라데이션, Tailwind 스케일, 이미지 추출 색상은 퍼블릭 도메인(CC0)으로 제공됩니다. 별도의 라이선스 비용이나 출처 표기 없이 상업용 웹사이트, SaaS, 앱, 게임 제작에 자유롭게 사용하실 수 있습니다.
업로드한 이미지나 팔레트 데이터가 외부 서버로 전송되나요?expand_more
아닙니다. ColorKit은 철저한 100% 클라이언트 사이드 프라이버시 원칙으로 개발되었습니다. 모든 돋보기 스포이트 연산, 색상 추출, 팔레트 계산은 사용자의 브라우저 메모리(HTML5 Canvas) 내에서 로컬로만 실행됩니다. 업로드하신 디자인 파일이나 이미지가 서버로 업로드되거나 보관되지 않습니다.