Angular OKLCH 색상 선택기 컴포넌트

색상 선택기는 최신 CSS가 쓰는 지각 기반 색 공간인 OKLCH로 동작합니다. 영역의 가로 방향으로는 채도가 회색부터 그 밝기에서 화면이 표시할 수 있는 최대치까지 이어지므로, 모든 지점이 실제로 쓸 수 있는 색이고, 색조를 바꿔도 핸들이 제자리에 머뭅니다.

입력란은 색 이름을 포함해 모든 CSS 색상을 받으며, 형식 버튼은 값을 hex, rgb(), hsl(), oklch(), color(display-p3) 중 하나로 씁니다. 형식의 색역을 벗어난 색은 CSS 방식대로 밝기와 색조를 유지한 채 색역 안으로 옮겨집니다.

swatches로 고를 수 있는 색상을 추가하고, contrastWith로 WCAG 2의 명도 대비 기준에 따라 배경과의 대비를 검사합니다. 브라우저에 스포이트가 있으면, 버튼으로 화면에서 색을 집어 올 수 있습니다.