Loading…

소개 온라인 색상 선택기 및 변환기

이미지를 드롭하거나 색상을 붙여넣거나 색상환을 사용하여 픽셀 단위의 정확한 색상을 추출하세요. 이 도구는 풍부한 클라이언트 측 분석을 실행합니다: HEX를 정규화하고, RGB/HSL/HSV/CMYK를 계산하며, XYZ/LAB/LCH로 변환하고, 휘도와 WCAG 대비를 계산하며, 조화로운 팔레트를 생성합니다. 그런 다음 CSS 준비 토큰으로 모든 형식을 복사하거나 조화를 사용하여 일관된 디자인 시스템을 구축할 수 있습니다.

이 색상 선택기의 기능

  • 이미지*에서 색상 샘플링 또는 정밀한 색상환 또는 HEX/RGB 입력으로 시작
  • 다양한 변환: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
  • 상대 휘도를 사용한 #000000 및 #FFFFFF 대비 WCAG 대비 검사기 내장
  • 적용 가능한 경우 웹 안전 및 단축 HEX 제안
  • 색상 조화: 보색, 삼색, 사색, 유사색, 단색 (색상 회전으로 계산)
  • 휘도 및 인지 밝기 미리보기로 대비 문제 예측
  • 가장 가까운 RGB 거리를 기반으로 한 대략적인 팬톤 유사 매칭 (캐시된 데이터셋 사용)
  • 분석은 클라이언트 측에서 실행; 선택적 팬톤 조회가 활성화된 경우에만 최소한의 데이터 사용

🔧 색상 선택기 사용 방법 for color-picker

1

1. 기본 색상 선택 또는 선택

HEX 값을 붙여넣거나, RGB/HSL을 입력하거나, 선택기를 사용하여 이미지나 휠에서 색상을 선택하세요. 도구는 내부적으로 안전한 HEX 값으로 정규화합니다.

2

2. 색상과 밝기 미세 조정

색상, 채도 및 밝기를 조정하여 스워치가 적절하게 보이도록 하세요. 큰 미리보기가 밝은 배경과 어두운 배경에서의 색상을 보여줍니다.

3

3. 필요한 형식 읽기 및 복사

HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB 및 LCH를 한 번의 클릭으로 복사하세요. CSS 변수, 디자인 토큰 또는 인계 노트에 사용하세요.

4

4. WCAG 대비 검사

sRGB 휘도를 기반으로 #000000 및 #FFFFFF 대비 비율을 확인하세요. 결과를 사용하여 본문 텍스트, 큰 제목 또는 UI 요소에 색상이 적합한지 빠르게 결정하세요.

5

5. 조화 생성 및 팔레트 구축

색상 회전으로 생성된 보색, 삼색, 사색, 유사색 및 단색을 탐색하세요. 선호하는 색상을 팔레트/기록에 추가하고 토큰으로 내보내세요.

기술적 세부사항

입력 처리 및 정규화

이 도구는 16진수 색상 코드를 수락하고 내부 참조로 정규화된 6자리 HEX로 변환합니다.

측면동작참고사항
HEX 정규화3자리 및 6자리 HEX, 선택적 선행 #짧은 HEX(예: #0f8)는 #00ff88로 확장됨; 16진수가 아닌 문자는 제거됨.
HEX8 지원#RRGGBBAA를 통한 RGBA알파 채널은 0–255로 변환되어 4번째 바이트로 추가됨.
웹 안전 색상 제안채널당 가장 가까운 51단계로 맞춤값은 51의 가장 가까운 배수(0, 51, 102, 153, 204, 255)로 반올림됨.
단축 HEX 제안압축 가능한 경우에만HEX 숫자 쌍이 반복될 때 표시됨(예: #112233 → #123).

색 공간 및 변환

모든 계산은 D65 기준 백색을 사용한 sRGB를 기반으로 합니다.

공간계산용도
RGB정규화된 HEX에서(채널당 0–255)변환을 위한 기본 표현.
HSL / HSVsRGB에서의 표준 원통 변환직관적인 편집 및 조화 계산에 사용됨.
CMYK장치 독립적 근사치1−max(R,G,B)로 계산되며 0–100% 구성 요소; ICC 프로필에 연결되지 않음.
XYZ선형화된 sRGB → D65 행렬을 사용한 XYZLAB/LCH 및 심층 분석을 위한 중간 공간.
LABXYZ에서의 CIE L*a*b*지각적으로 더 균일한 메트릭 공간.
LCHLAB에서의 CIE L*C*h°색조/채도/명도 조정 및 지각적 팔레트 설계에 유용함.

휘도 및 WCAG 대비

대비는 표준 WCAG 상대 휘도 공식을 사용하여 계산됩니다.

측면세부사항참고사항
상대 휘도선형화된 sRGB(Y 구성요소)에서 계산됨계수 0.2126R + 0.7152G + 0.0722B 사용
대비비(L1 + 0.05) / (L2 + 0.05)도구는 #000000 및 #FFFFFF와의 대비를 보고합니다.
WCAG 기준치일반 및 큰 텍스트용 AA/AAA일반 기준치: 4.5:1 (AA 일반), 3:1 (AA 큰 텍스트), 7:1 (AAA 일반), 4.5:1 (AAA 큰 텍스트).

색조 조화 및 파생 색상

색조 조화는 HSL에서 채도와 명도를 유지한 채 간단한 색조 회전으로 생성됩니다.

조화규칙예시
보색+180° 색조색상환에서 반대 지점.
삼색조±120° 색조균등하게 배치된 세 가지 색상.
사색조+90°, +180°, +270° 색조색상환에서 직사각형을 이루는 네 가지 색상.
유사색−30° / +30° 색조기본 색상 주변의 인접 색상들.
단색L에서 밝게/어둡게동일한 색조의 더 밝고 어두운 버전.

팬톤 유사 매칭(근사치)

팬톤 데이터셋이 사용 가능할 때, 도구는 RGB 공간에서 가장 가까운 매치를 계산합니다.

측면동작참고사항
데이터셋 로딩getPantoneColors / getPantoneColorsCached를 통한 캐시 + 비동기 로딩UI는 캐시가 준비되면 즉시 매치를 표시하거나 짧은 비동기 로드 후 표시할 수 있습니다.
매치 메트릭RGB(0–255) 상의 유클리드 거리 제곱빠르고 간단한 근사치; 지각적 ΔE* 메트릭이 아닙니다.
출력팬톤 유사 ID 및 이름참고용으로만 표시되며 공식 팬톤 매핑이 아닙니다.

성능 및 개인정보 보호

변환, 휘도, 대비 및 조화는 완전히 클라이언트 측에서 계산됩니다. 팬톤 조회는 구성에 따라 로컬 또는 원격 데이터셋을 참조할 수 있지만, 원본 색상은 명시적으로 공유하거나 내보내지 않는 한 단순한 HEX 문자열로 유지됩니다.

인기 사용 사례

UI/UX 및 프론트엔드

  • 버튼, 링크 및 텍스트용 접근성 있는 전경/배경 쌍 생성.
  • 선택한 색상에서 직접 CSS 변수 및 디자인 토큰 내보내기.
  • 테마 전환기 구현 전에 라이트/다크 모드용 대비 확인.
/* CSS 색상 토큰 */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

브랜딩 및 시각 아이덴티티

  • 단일 메인 색상에서 기본/보조/강조 색상 팔레트 도출.
  • 로고 또는 제품 라인용 보색 또는 삼색 옵션 탐색.
  • 브랜드 가이드라인 준비 전에 팬톤 유사 명칭 근사치 얻기.

데이터 시각화 및 대시보드

  • 라이트 및 다크 배경 모두에서 구별 가능한 시리즈 색상 정의.
  • LAB/LCH를 사용하여 지각적 단계가 제어된 팔레트 설계.
  • 차트 색상이 범례 및 레이블에서 대비 기대치를 충족하는지 빠르게 확인.

❓ Frequently Asked Questions

HEX, RGB, HSL 및 HSV의 차이점은 무엇인가요?

HEX는 RGB 값을 16진수로 간결하게 표현한 것입니다. RGB는 sRGB의 빨강/초록/파랑 구성 요소를 설명합니다. HSL과 HSV는 더 직관적인 원통형 모델로, H는 색상환의 색조, S는 채도, L/V는 밝기 또는 명도를 제어합니다.

CMYK 값이 근사치로 보이는 이유는 무엇인가요?

실제 CMYK 출력은 프린터 프로필, 잉크, 용지 및 보정에 따라 달라집니다. 이 도구는 초기 디자인 결정에 유용한 장치 독립적 근사치를 보여주지만, 최종 인쇄 작업은 인쇄 공급업체의 ICC 프로필로 확인해야 합니다.

LAB과 LCH는 어떤 경우에 유용한가요?

LAB과 LCH는 원시 RGB보다 지각적으로 균일합니다. L 또는 C의 동일한 숫자 단계는 눈에 더 일관되어 보이는 경향이 있어, 색조, 음영 및 균형 잡힌 팔레트 생성이나 색상 간 시각적 거리 측정에 적합합니다.

대비는 어떻게 계산되나요?

WCAG 공식을 사용하여 sRGB에서 상대 휘도를 계산한 후 대비 비율 (L1 + 0.05) / (L2 + 0.05)을 도출합니다. 결과는 4.5:1(AA 일반 텍스트) 및 7:1(AAA 일반 텍스트)과 같은 일반 임계값과 비교됩니다.

팬톤 이름이 정확한가요?

아니요. 팬톤 유사 레이블은 RGB 공간에서의 근사 최근접 이웃 매치이며 참고용으로만 제공됩니다. 생산 중요 작업의 경우 항상 공식 팬톤 라이브러리 및 도구로 검증하세요.

내 이미지나 색상을 저장하나요?

색상 계산(형식, 대비, 조화)은 클라이언트 측에서 수행됩니다. 구성에 따라 이미지 업로드 및 팬톤 데이터셋은 서버를 포함할 수 있지만, 이 도구는 일시적 처리를 위해 설계되었으며 장기 저장용이 아닙니다. 매우 기밀 자산의 경우 로컬/오프라인 도구를 선호하세요.

Pro Tips

Best Practice

항상 밝은 배경과 어두운 배경 모두에서 색상을 미리 확인하세요; 인지되는 채도와 대비는 상황에 따라 크게 달라질 수 있습니다.

Best Practice

틴트와 셰이드를 생성할 때 LAB 또는 LCH를 사용하세요. 그러면 인간의 눈에 밝기 변화가 더 균일하게 느껴집니다.

Best Practice

기본 버튼 색상뿐만 아니라 모든 상호작용 상태(호버, 활성, 비활성)에 대해 AA/AAA 대비를 확인하세요.

Best Practice

형식 탭에서 CSS 변수나 디자인 토큰을 내보내 컴포넌트 전체에서 색상 일관성을 유지하세요.

Best Practice

이미지에서 샘플링할 때는 단일 픽셀 대신 작은 영역을 평균화하여 압축 및 안티앨리어싱으로 인한 노이즈를 줄이세요.

Additional Resources

WCAG 2.2 – 대비(최소)
Documentation
CSS 색상 모듈 레벨 4
Documentation
MDN – <color> 값
Documentation
CIE 색도학 (XYZ/LAB)
Documentation

Other Tools