색상 도구

무료 온라인 색상 도구 — 색상 피커, 팔레트 생성기, 형식 변환기, 색맹 시뮬레이터, 그라디언트 생성기, WCAG 대비 검사기, 주요 색상 추출기, 믹서, 색온도, 중국 전통색. 모두 브라우저에서.
HTML/CSS 작성용(hex/rgb/hsl 등가, 148개 이름색, 216개 웹 안전 팔레트, 복사 준비된 선언)에는 코드 지향 HTML 색상 코드 헬퍼를 쓰세요.
HEX:#ff0000
RGB:255, 0, 0
HSL:0, 100%, 50%
각 모드의 작동 방식
피커: 큰 사각형은 현재 색조의 채도-명도 맵입니다 — 왼쪽에서 오른쪽으로 채도가 올라가고, 위에서 아래로 명도가 내려갑니다. 아무 곳이나 클릭해 색을 고르세요. 오른쪽의 얇은 세로 막대는 색조 슬라이더(0°~360°)입니다 — 밀면 기본 색조가 바뀌고 사각형이 그에 맞게 다시 그려집니다. 오른쪽에는 고른 색이 HEX, RGB, HSL 형식으로 보이며 — 값을 클릭하면 복사됩니다.
팔레트: 왼쪽 색상 피커와 오른쪽 편집 상자는 같은 기본 색상을 저장합니다 — 양방향 동기화됩니다(색을 고르거나 hex 값을 입력하면 서로 갱신). 아래의 다섯 팔레트 행은 모두 이 기본 색상에서 색환을 회전해 파생됩니다. 보색(색조 +180°, 가장 강한 대비), 삼색 조화(+120° / +240°, 균형 삼각), 사색 조화(+90° / +180° / +270°, 사각형 네 색), 유사색(-30° / 기본 / +30° / +60°, 조화로운 이웃), 분할 보색(+150° / +210°, 순수 보색보다 부드러움). 모든 행의 첫 스와치는 언제나 기본 색상 자신이고 나머지는 색조 회전 변형입니다.
변환: 유효한 아무 색이나 입력하세요 — HEX(#3b82f6), CSS 함수(rgb(59,130,246) / hsl(217,90%,60%)), 이름색(dodgerblue) — 그러면 모든 주요 형식으로 즉시 변환됩니다. 형식 드롭다운은 자동 감지가 잘못된 형식을 고를 때 파서에 힌트를 줍니다. 출력은 HEX, RGB(0-255), HSL(도, %, %), HSV, CMYK로 보입니다. 값을 클릭하면 복사됩니다.
색맹: 이미지를 업로드하고 시뮬레이션할 색각 이상 유형을 선택하세요. 도구는 모든 픽셀에 원추응답 행렬 변환을 적용해 RGB 값을 다양한 색맹 형태의 사람들이 이미지를 지각하는 방식에 근사하게 재매핑합니다. 왼쪽 캔버스는 원본, 오른쪽은 시뮬레이션 보기입니다. 드롭다운은 세 이색성 유형(원추 색소 하나 누락. 적색맹, 녹색맹, 청색맹), 완전 전색맹(색각 없음), 세 이상 삼색성 유형(약한 원추 응답)을 다룹니다. 낮은 해상도 이미지가 더 빨리 로드됩니다.
그라디언트: 시각적 CSS 그라디언트 빌더입니다. 선형(방향성) 또는 방사형(중심에서 바깥으로)을 고르고, 각도를 정하고(0° = 아래에서 위로, 90° = 왼쪽에서 오른쪽), 색상 정지점을 정의하세요. 각 정지점에는 색상 피커가 있고 균등 배치됩니다(세 정지점이면 0%, 50%, 100%). + 정지점을 클릭하면 더 복잡한 그라디언트를 위한 중간 색상 점이 추가됩니다. 미리보기는 실시간 갱신되며, 생성된 CSS는 아래에서 복사 준비가 되어 있습니다.
대비: sRGB 값의 상대 휘도 공식(감마 보정)으로 전경 텍스트와 배경색 사이의 WCAG 2.1 대비 비율을 계산합니다. 비율은 1:1(동일 색)부터 21:1(흑백)까지입니다. 결과는 세 준수 수준의 통과/실패를 보여 줍니다. AA 일반 텍스트(비율 ≥ 4.5:1), AAA 큰 텍스트(텍스트 ≥ 18pt 또는 굵게 ≥ 14pt에 대해 비율 ≥ 4.5:1), AAA 일반 텍스트(비율 ≥ 7:1). 샘플 텍스트 미리보기는 색을 조절하는 동안 실시간 갱신됩니다.
추출: 이미지를 업로드하면 도구가 색 양자화로 주요 색상 팔레트를 식별합니다. 이미지는 100×100px로 축소된 뒤 각 픽셀이 채널당 4비트 히스토그램(R/G/B당 16수준 = 4096빈)으로 분류됩니다. 투명 픽셀은 건너뛰어집니다. 가장 빈번한 빈이 픽셀 수순으로 정렬되고 각 빈의 중심 색이 스와치가 됩니다. 스와치마다 HEX 값과 이미지 픽셀에서 차지하는 백분율이 보입니다. 개수 슬라이더(2-12)로 추출할 주요 색의 수를 조절하세요.
믹서: 두 색을 RGB 색 공간에서 선형 보간으로 섞습니다. 비율 슬라이더가 혼합을 결정합니다. 0%는 순수 색상 1, 100%는 순수 색상 2, 50%는 균등 혼합. 각 R, G, B 채널이 독립적으로 보간됩니다(예: 빨강 + 파랑을 50%로 하면 보라). 결과 미리보기와 HEX/RGB 값은 슬라이더를 밀거나 어느 색을 바꿀 때 실시간 갱신됩니다.
색온도: Tanner Helland의 근사 알고리즘으로 켈빈 흑체 색온도를 해당 가시 색으로 변환합니다. 낮은 온도(1000-3000K)는 촛불과 백열등 같은 따뜻한 주황/빨강 톤을, 중간(4000-6500K)은 중립 백색에서 주광까지, 높은 온도(8000-40000K)는 흐린 하늘과 깊은 물 같은 차가운 파랑으로 이동합니다. 아래 레이블이 각 온도에 가장 가까운 실제 광원을 식별합니다.
이름색: 80개 중국 전통색(胭脂, 朱砂, 黛蓝 등 — 고전 중국 문학, 회화, 염색 전통에서 온 이름)과 140여 개 CSS 이름색(표준 웹 팔레트)의 결합 컬렉션을 탐색합니다. 검색 상자로 이름 또는 HEX 값으로 걸러내거나, 드롭다운으로 카테고리를 전환하세요. 색상 칩을 클릭하면 이름과 HEX 코드가 있는 큰 미리보기가 보입니다 — 코드를 클릭하면 복사됩니다.