이미지 색상을 선택하고 팔레트를 만드는 방법.

이미지 색상 추출기를 열고 지원되는 이미지 하나를 업로드하거나 샘플을 사용해 보세요. 자동 추출은 소스를 서버로 업로드합니다. 이 가이드의 샘플은 꽃, 잎, 복숭아색 배경이 있는 1200 x 900 사진인 collage-botanical.jpg입니다.

추출할 색상(Colors to extract)을 6으로 두고 예제에서는 Dominant를 선택하세요. Dominant는 주요 이미지 색상을 선호하며, Vibrant는 다채로운 강조 색상에 더 많은 영향을 줍니다. 요청 시 3에서 12개의 색상을 사용할 수 있으며, 뚜렷하게 보이는 그룹이 적은 이미지는 더 적은 색상이 반환될 수 있습니다.

실제 Dominant 결과에는 #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA가 포함됩니다. 가장 큰 그룹은 샘플링된 가시 픽셀의 약 28.88%인 #E3B49F입니다. 추출에는 512 x 384 샘플이 사용되었으며, 해당 백분율은 전체 해상도 이미지의 정확한 통계가 아닙니다.

이미지를 클릭하거나 탭하여 돋보기로 픽셀을 검사하세요. 이미지를 포커스하고 화살표 키를 사용하여 1픽셀씩, Shift와 화살표를 사용하여 10픽셀씩 이동한 다음 Enter를 눌러 선택하세요. 개별 복사 버튼으로 HEX, RGB 또는 HSL을 복사하거나 '팔레트에 추가'를 사용하세요.

견본을 선택하여 HEX 값이나 색상을 변경하거나, 좌우로 이동하거나, 제거하세요. 사용자 지정 색상 추가는 선택한 HEX 값을 허용합니다. 색상 잠금은 팔레트 새로 고침이나 추출 설정 변경으로 새로운 시작 팔레트가 생성될 때 선택한 견본을 유지합니다.

샘플링 및 투명도는 소스 색상과 배경 위 합성 기능을 제공합니다. 소스 색상은 관련 시 복사된 코드에 불투명도를 포함하며, 합성은 선택한 샘플 배경 위에서 혼합된 픽셀을 보여줍니다. 팔레트 견본 자체는 불투명한 RGB 값입니다. 편집 및 선택된 색상에는 추정된 소스 비율이 없습니다.

색상 대비 확인을 엽니다. 색상 컨트롤로 텍스트와 배경을 설정하고, HEX 코드를 입력하거나 선택한 색상을 양쪽에 사용하세요. 실시간 텍스트 샘플을 통해 쌍을 비교할 수 있으며, 비율과 함께 일반 AA, 일반 AAA, 대형 AA 및 대형 AAA 결과가 별도로 표시됩니다.

추출된 모든 색상을 텍스트로 사용할 수 있다고 가정하지 말고, 의도한 목적에 맞는 쌍을 선택하세요. 연한 복숭아색과 연한 보라색은 사진에서는 잘 어울릴 수 있지만, 텍스트와 배경 조합으로는 부적절할 수 있습니다.

이 컨트롤은 텍스트 대비를 위해 해당 색상 쌍만 확인합니다. 이는 완전한 접근성 감사가 아니며, 타이포그래피, 키보드 상호 작용 또는 나머지 디자인의 사용 가능 여부를 결정하지 않습니다.

빠른 전달을 위해 개별 코드를 복사하거나 HEX 색상 팔레트 복사를 사용하세요. 파일의 경우, 다른 이름으로 저장을 선택하고 시작을 누르세요. PNG은 레이블이 지정된 팔레트 이미지를 만들고, SVG는 견본과 레이블을 벡터 콘텐츠로 유지하며, CSS은 번호가 매겨진 색상 변수를 제공하고, JSON는 HEX, RGB 및 HSL 값을 포함합니다.

편집되지 않은 6색 예제는 palette.png을 600 x 500 픽셀 및 9,163 바이트로 내보냅니다. 견본 순서는 팔레트와 일치합니다. 자동 시작 개수가 달랐더라도 최종 팔레트에는 편집 후 1에서 12개의 색상이 포함될 수 있습니다.

나가거나 새로 고침하기 전에 다운로드하세요. 최종 내보내기는 서버 처리를 위해 소스와 선택한 색상을 업로드합니다. 새 팔레트 파일을 생성하며 원본 사진을 다시 칠하거나 대체하지 않습니다.