Apple의 색상 선택기 아이콘 재생성

저는 현재 사용자가 미리 정의된 테마 색상을 선택할 수 있는 colorpicker에서 작업하고 있습니다.



이는 코딩 및 사용이 매우 간단하지만 사용자가 사용자 정의 색상을 생성해야 하는 경우가 있습니다.

그렇다면 색상이 사용자 지정이고 기본 테마 색상의 일부가 아니며 수정할 수 있음을 어떻게 나타냅니까?

나는 이것을 조사하는 데 꽤 많은 시간을 보냈고 Apple이 Notes 앱에서 어떻게하는지 발견했습니다.



간단하고 아름답습니다! 선택한 색상은 내부 테두리와 색조 그라데이션으로 둘러싸인 원의 중심에 표시됩니다.

그러나 CSS에서 이것을 달성하는 방법은 무엇입니까?

언제나처럼 Temani Afif는 .
linear-gradient를 conic-gradient로 바꾸겠습니다.

.box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit; 
  padding: 8px; 
  background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
) border-box;
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; 
}

... 결과는 다음과 같습니다.



멋진! 이제 "내부 테두리"를 위해 두 번째 마스크를 만들었습니다.

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit; 
  padding: 12px;
  background: linear-gradient(var(--body-bg) 0 0) border-box;
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; 
}

이는 우리에게 다음을 제공합니다.



거의 다 왔어 ...하지만 "다크 모드"는 어떻습니까? --body-bg -변수를 확인하셨습니까? 배경색 상속을 처리하므로 다음과 같습니다.



이 기법의 가장 큰 장점은 border-radius의 유무에 관계없이 작동한다는 것입니다.

마지막 생각들

마스크에 pseudo 요소를 모두 사용하는 것이 약간 짜증난다는 것을 인정해야 합니다. 하나는 conic-gradient용이고 다른 하나는 내부 테두리용입니다. 마지막 것은 단순히 영역을 "잘라내고"페이지 또는 섹션의 배경색이 "빛나게"합니다. 이 작업을 수행하는 방법을 알고 있다면 의견에 결과를 공유하십시오!


이 게시물 작성을 마친 후 Apple 아이콘의 채도가 약간 더 낮아진 것을 확인했습니다. 이를 달성하려면 마스크에서 saturation -색상 중 hsl -부분을 변경하기만 하면 됩니다.

예: hsl(360, 100%, 50%)를 hsl(360, 80%, 50%)로 변경 등