테마 색상 선택

사이트를 위해 팔레트를 선택하는 것은 매우 어렵다.밝은 색조와 어두운 색조light-on-dark 테마를 매치할 수 있는 색을 선택하려 한다면 상황은 더욱 복잡해진다.나는 최근에 나의 사이트 주제를 다시 설정했는데, 다음은 내가 이 과정에서 배운 몇 가지 것들이다.

팔레트 선택

팔레트를 선택하는 것은 내가 줄곧 노력한 일이며, 심지어는 일찍이 대학 시절에 그랬다.인터넷에는 많은 도구들이 알고리즘을 사용하여 당신이 색을 선택하는 것을 돕는다. Coolors 와 Adobe Kuler 는 내가 가장 좋아하는 두 가지 색이다.
내가 디자인 학원에서 배운 기교 중 하나는 네가 좋아하는 분위기의 이미지를 찾아서 그 중에서 색깔을 채취하는 것을 기점으로 하는 것이다.Color theory는 매우 복잡하기 때문에 나는 이미 업무에 투입된 전문가에 의존하는 것이 가능하다고 생각한다.

Good artists borrow, great artists steal.

---

Pablo Picasso Ryan Filler

(정말, 농담을 하고 싶었을 뿐인데actual history of this quote 너무 풍자적이어서 나누고 싶지 않아요.)

판권법이 정해진 브랜드에서 팔레트를 해제하면 약간 모호한 것 같다.예를 들어 구글의 빨간색, 노란색, 녹색, 파란색만 복제하는 것을 권장하지 않는다.그러나 사진, 광고, 미술, 만화, 심지어 영화와 전자오락 스틸컷은 공평한 게임이다.팝 영화 장면으로 제작된 컬러 트레이를 게시할 수 있는 훌륭한 인스타그램 계정이다.
나의 2020년 주제의 팔레트는 스타워치 II에서 색을 선택하여 구축한 것이다Jean "Moebius" Giraud의 삽화이다.
[[clearfix]]
내가 디자인 학원에서 배운 또 다른 전공 기교는 디자인에서 #000000 검은색이나 #fffff 흰색을 영원히 직접 사용하지 말라는 것이다.인쇄물이라도 약간의 포화를 없애는 검은색과 약간의 온도 변화를 주는 흰색을 사용하며 기본적인 색깔이 아닌 의향적으로 보이는 디자인.그림에서 색을 샘플링할 때, 나는 가능한 한 이 점을 기억하고, 내 사이트에서 검은색 대신 어떤 짙은 색을 사용해 보려고 한다.사실, 내가'검은색'을 위해 선택한 색깔 #080025는 실제로는 매우 짙은 보라색이고,'흰색'#fefdf2는 매우 옅은 노란색이다.

접근성 기억하기

웹 페이지를 위해 색을 선택하는 가장 어려운 부분 중 하나는 보기 좋은 색과 모든 사용자에게 적합한 높은 대비도 사이에서 정확한 균형을 찾는 것이다.나는 이미 tool to help with thislearn how I built it in this post를 세웠지만, 효과적인 조합을 찾는 것은 여전히 어려운 일이다.
나에게 있어서 가장 효과적인 방법은 이 도표의 앞의 두 줄과 앞의 두 열이 모두 합격 점수라는 것을 확보하는 데 집중하는 것이다.대부분의 경우 텍스트는 색상 배경에서 검은색 또는 흰색으로 표시되거나 검은색 또는 흰색 배경에서 색상으로 표시됩니다.만약 당신이 다른 특정한 색깔의 조합을 사용하고 싶다는 것을 알고 있다면, 그것들도 통과되었는지 확인하세요. WCAG color contrast ratio

이름 색상

현대 웹 개발에서, 이 색 값을 변수에 저장하고 있을 수도 있습니다.나는 오랫동안 사용했지만SCSS variables 나는 이미 바꿨다native CSS custom properties.
이 변수들을 명명하는 것은 의미가 있고 유일하며 검색할 수 있는 이름을 선택하기를 원하기 때문에 도전적일 수 있습니다.나는 모든 변수 앞에 color- 접두사를 붙여서 텍스트 편집기가 내가 단어를 입력하기 시작할 때 탭 문자로 목록을 완성하는 것을 돕는 것을 좋아한다.

더 복잡한 팔레트에 대해 나는 Crayola naming convention로 나의 색을 명명하는 것을 좋아한다. 이렇게 하면 모든 변체, 예를 들어'파란색'에 유일한 이름이 있다.이 명칭 변체들은 스스로 선택하기 어려울 수도 있기 때문에 나는 this site를 사용하여 그것들을 생성하는 것을 좋아한다.내 친구 조시는 an article that goes more in depth on this strategy라고 썼다.
내 색상 목록은 매우 간단하기 때문에, 나는 짙은 색과 연한 색 변수로 각각의 색을 명명하고, 그것들을 CSS 변수로 color 요소에 저장한다.

:root {
  --colorBlack: #080025;
  --colorWhite: #fefdf2;
  --colorPurpleLight: #a176b6;
  --colorPurpleDark: #5651a7;
  --colorBlueLight: #4f81c0;
  --colorBlueDark: #155f91;
  --colorOrangeLight: #f16a1f;
  --colorOrangeDark: #ac284f;
  --colorGrayLight: #5e828f;
  --colorGrayDark: #4e6773;
}

주제 범위 축소

나는 어떤 사이트의 팔레트든 적어도 여섯 가지 색깔이 필요하다고 생각한다-

텍스트 - 페이지의 기본 텍스트 색상

배경 - 페이지의 주요 배경색

원색-브랜드의 원색

강조 표시 - 버튼 또는 기타 작업 요구사항을 강조 표시하는 색상

활동 - 중지 상태나 초점 요소를 나타내는 또 다른 강조 색상

disabled - 요소와 상호 작용할 수 없는 음소거 색상 표시

이것이 유일한 색깔이라고 말하는 것은 아니지만 자제가 일치된 디자인을 만드는 관건이라고 생각합니다.많은 디자인 시스템들이 각 색깔의 어두운 색과 옅은 색의 변화를 이용하여 다양성을 실현하고 접근할 수 있는 색의 조합 수량을 증가시킬 것이다.나는 나의 팔레트가 희소하고 유연하길 바란다. 각 색깔은 두 가지 버전만 있을 뿐이다.
테마 색을 설정하기 위해서 두 번째 변수를 만들었습니다.이러한 새 변수 중 하나는 색상의 사용 방식을 설명하고 원래 명명된 색상을 지정합니다.

:root {
  --colorText: var(--colorBlack);
  --colorBackground: var(--colorWhite);
  --colorPrimary: var(--colorPurpleDark);
  --colorHighlight: var(--colorBlueDark);
  --colorActive: var(--colorOrangeLight);
  --colorDisabled: var(--colorGrayLight);
}

팔레트를 어둡게 변환

나는 기본 조명 모드 테마에서 같은 여섯 가지 실용 색을 보류했지만, 어두운 모드에 새 값을 재분배했다.

제가 가지고 있는 공식'브랜드 컬러'에 가장 가까운 컬러는 #5651a7입니다.이것은 내가 페이지 현수막과 social media image that is generated for each post에 사용하는 색깔이기 때문에 브랜드 때문에 나는 그것을 나의 주색으로 보존한다.
전환:root과text 색상 외에 더 밝은background과highlight 색상을 선택하여 짙은 색 배경에서 더욱 눈에 띄게 했습니다.나는 active 짙은 회색의 변체로 바꾸었다. 왜냐하면 위에 옅은 색의 텍스트가 나오기 때문에, 나는 그것이 여전히 쉽게 읽을 수 있도록 확보하고 싶다.

@media (prefers-color-scheme: dark) {
  :root {
    --colorText: var(--colorWhite);
    --colorBackground: var(--colorBlack);
    --colorPrimary: var(--colorPurpleDark);
    --colorHighlight: var(--colorOrangeDark);
    --colorActive: var(--colorBlueLight);
    --colorDisabled: var(--colorGrayDark);
  }
}

나는 세 번째 부분에서 이 점을 상세하게 소개할 것이지만 주의해야 할 것은 미디어 조회가 증가하지 않았다는 것이다specificity.이 변수가 덮어쓰일 수 있도록 disabled 규칙을 등급이 낮은 위치에 두어야 합니다.

암흑 모드의 기타 주의사항

테마를 어두운 모드로 바꾸는 첫 번째 반응은 전경색과 배경색을 바꾸는 것입니다.이것은 디자인을 아주 멀리 가게 할 것이지만, 고려해야 할 것은 이 두 가지 색깔만이 아니다.내가 기본 색 site over in 2020 으로 내 색 Gatsby theme 을 시작했을 때, 그것은 괜찮은 기본 색을 덧붙였다.검은색과 흰색을 제외하고는 보라색과 몇 가지 회색의 변체도 있다.어두운 배경 테마로 전환할 때, 일부 짙은 회색 텍스트는 읽을 수 없고, 반대로 옅은 배경의 옅은 회색 텍스트는 읽을 수 없다.
CSS-Tricks의 이 훌륭한 글은 색을 제외하고 고려해야 할 다른 것들, 예를 들어 그림의 대비도 수정, 텍스트의 무게 수정과 다른 미묘한 UI 요소, 예를 들어 테두리와 음영 수정을 논의했다.