온라인 컬러 피커

온라인 컬러 피커 소개
이 온라인 컬러 피커를 사용하면 업로드한 이미지에서 색상을 선택하거나, 브라우저가 지원하는 경우 화면에서 색상을 고르거나, 색상 값을 직접 입력할 수 있습니다. 선택한 색상은 HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV, CMYK 같은 일반적인 형식으로 즉시 변환되므로 페이지를 이동하지 않고 필요한 색상 코드를 바로 복사할 수 있습니다.

• 주요 기능
이미지 색상 선택: 로컬 이미지를 선택한 뒤 이미지 위로 이동해 주변 픽셀을 미리 보고, 이미지를 클릭하여 현재 색상을 선택할 수 있습니다.

이미지 팔레트 추출: 이미지를 업로드하면 주요 색상으로 구성된 간결한 팔레트를 추출하며, 각 색상은 복사하거나 현재 색상으로 적용할 수 있습니다.

픽셀 단위 조정: 이미지에서 색상을 선택한 뒤 방향키를 사용해 선택한 픽셀 위치를 더 정밀하게 조정할 수 있습니다.

화면 색상 선택: 브라우저가 이 기능을 지원하는 경우, 화면 색상 선택기를 사용해 화면의 색상을 선택할 수 있습니다.

수동 색상 입력: 색상 선택기 또는 #2563EB, #2563EBFF 같은 HEX / HEXA 값을 사용해 색상을 직접 입력할 수 있습니다.

다양한 색상 형식: 선택한 색상을 HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV, CMYK 형식으로 변환합니다.

어울리는 색상 생성: 현재 색상을 기준으로 보색, 유사색, 삼각 배색, 부드러운 틴트, 차분한 톤을 생성합니다.

틴트와 셰이드: 배경, 테두리, hover 상태, 배지, UI 컴포넌트에 활용하기 좋은 밝은 색부터 어두운 색까지의 색상 단계를 만듭니다.

텍스트 대비 및 UI 조합: WCAG 대비 기준으로 흰색 텍스트와 검은색 텍스트를 비교하고, APCA 스타일의 지각적 참고값을 함께 표시하며, 채도가 높은 색상에 더 편안한 UI 배경/텍스트 조합을 제안합니다.

CSS 변수: 현재 색상, 밝은/어두운 변형, 읽기 쉬운 텍스트 색상, 추천 UI 배경/텍스트 조합을 바로 사용할 수 있는 CSS 변수로 복사할 수 있습니다.

브라우저 기반 처리: 이미지 읽기, 색상 선택, 팔레트 추출, 색상 변환은 별도 앱 설치 없이 브라우저에서 직접 수행됩니다.

• 참고 사항
화면 색상 선택 기능은 브라우저 지원 여부에 따라 달라집니다. 화면 색상 선택을 지원하지 않는 브라우저에서도 이미지 색상 선택이나 수동 입력은 사용할 수 있습니다.

이미지에서 색상을 선택할 때 이미지는 페이지에 맞게 축소 또는 확대되어 표시될 수 있지만, 샘플링되는 색상은 원본 이미지의 픽셀 위치에 맞춰 계산됩니다.

텍스트 대비는 선택한 단색을 기준으로 계산됩니다. 텍스트가 그라데이션, 사진, 투명도, 질감이 있는 배경 위에 표시되는 경우 최종 디자인에서도 시각적으로 확인하는 것이 좋습니다.

APCA 스타일 값은 WCAG 대비와 함께 제공되는 지각적 참고값입니다. 이 페이지에서 통과/실패 접근성 확인 기준은 WCAG 대비입니다.

인터페이스, 문서, 이미지 또는 인쇄물에 사용하는 색상은 디스플레이 설정, 색상 프로필, 파일 형식, 출력 장치에 따라 최종 표시가 달라질 수 있습니다.

:wiki_link