동적이고 구성 가능한 색 구성표를 설정하는 방법에 관한 기본 개요
이 게시물에서는 여러 색 구성표를 관리하는 방법에 대한 생각을 공유하고자 합니다. 있습니다. 데모 사용해 보기
<ph type="x-smartling-placeholder">동영상을 선호한다면 이 게시물의 YouTube 버전을 참고하세요.
개요
맞춤 속성과 calc()를 사용하여 액세스 가능한 색상 시스템을 빌드해 보겠습니다.
글 작성 방식을 유지하면서 사용자 환경설정이 반영된 웹페이지를 만듭니다.
만들 수 있습니다 먼저 기본 브랜드 색상으로 시작해서
2가지 텍스트 색상, 4가지 표면 색상, 일치하는 그림자를 제공합니다.
이 가이드는 먼저 각 색 구성표의 모든 색상을 있습니다. 사용자가 페이지를 변경하는 데 사용되지 않습니다.
브랜드
종종 브랜드 색상이 이미 정해져 있고
hex 또는
rgb). 이번 GUI 챌린지
기본 브랜드 색상은 #0af입니다. 먼저, 이 색상 시스템의 경우
필요에 따라
hsl
* {
--brand: #0af;
--brand: hsl(200 100% 50%);
}
브랜드 색상을 어둡게 하거나 밝게 하는 개념을 구현하기 위해 20%의 경우 hsl 색상 값의 3개 채널을 자체 커스텀으로 추출해야 합니다. 속성을 추가하세요.
* {
--brand-hue: 200;
--brand-saturation: 100%;
--brand-lightness: 50%;
}
CSS는 이러한 색상 속성을 계산(예: calc(var(--brand-lightness) -
20%))하여 밝기 값을 20% 낮출 수 있습니다. 이는 Google Cloud의
CSS가 모든 색상을 동일한 색조군으로 유지할 수 있기 때문입니다.
hsl 채도 및 밝기를 조정할 수 있습니다.
밝은 테마
각 색상 옵션은 일치하는 스키마로 표시됩니다. 이 경우에는 각 색상에 맞는
-light가 추가됩니다.
브랜드
브랜드 색상부터 시작하여 --brand-hue, --brand-saturation를 래핑하여 다시 빌드됩니다.
hsl () 함수 괄호 안에 및 --brand-lightness 맞춤 속성이 있습니다.
다음과 같이 계산합니다.
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}
텍스트 색상
다음으로 색 구성표의 핵심에는 텍스트 색상이 필요합니다. 밝은 테마에서 텍스트: 매우 어두워야 합니다. 다음 색상의 밝기가 낮은 것을 볼 수 있습니다. 50%도 되지 않습니다.
* {
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
}
--text1-light: 밝기가 10% 로 매우 어둡기 때문에 무거운 이미지를 100%로 유지합니다.
채도를 조절하여 브랜드 색상이 어두운 짙은 네이비까지도 비칠 수 있습니다.
--text2-light, 첫 번째 색상만큼 어둡지는 않습니다.
채도가 훨씬 떨어집니다.
표면 색상
표면 색상은 배경, 테두리 및 기타 장식 표면에 텍스트 위 또는 아래에 위치합니다. 밝은 테마에서는 밝은 색상입니다. 작은 텍스트 색상과 대조를 이루었습니다. HSL로 밝은 색상을 만들려면 세 번째 밝기 값에 더 높은 백분율 값을 사용합니다. 또한 밝은 회색에 너무 색이 섞이지 않도록 할 수 있습니다.
* {
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
}
장식용 색상에 더 많은 색상이 필요한 경향이 있기 때문에 4가지 표면 색상을 만들었습니다.
:focus 또는 :hover와 같은 상호작용적인 순간에 활용하거나
형태를 보여줍니다. 이러한 시나리오에서는
--surface3-light에 마우스를 가져가면 --surface2-light가 발생하므로 마우스를 가져가면
대비 증가 (밝기 99% 에서 92% 로, 더 어둡게)
그림자
색 구성표의 그림자는 그 너머에 있으며 생동감 있는 자연을 더해줍니다. 비현실적인 검은색 기반의 그림자로부터 눈에 띌 수 있습니다. 해야 할 일 그림자의 색상은 색조 맞춤 속성을 사용합니다. 아주 어둡게 만듭니다. 기본적으로 매우 어두운 모드와 약간 파란색 그림자가 생깁니다.
* {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
--surface-shadow-light가 hsl 함수에 래핑되지 않았습니다. 이는
--shadow-strength 값이 결합되어 일부 불투명도가 생성되고 CSS가 필요합니다.
계산을 수행하기 위해 조각을 만듭니다. 급격한 그림자로 건너뛰기
섹션을 참조하세요.
함께 작동하는 밝은 색상
빛의 색이 어떻게 만들어지는지 사냥할 필요가 없습니다. CSS의 한 곳에서 모두 확인할 수 있습니다.
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
--surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
--shadow-strength-light: .02;
}
어두운 테마
대부분의 브랜드는 어두운 테마로 시작하지 않고 일반적으로 더 밝은 테마입니다. 반면, 사용자는 배경 색상에 대해 어두운 테마를 선택하는 경우가 많습니다. 시간을 절약할 수 있습니다. 이러한 요인으로 인해 다음과 같은 사항을 고려해 보세요.
- 이 테마를 사용하는 동안 사용자는 일반적으로 어두워지므로 어둡게 합니다.
- 색상은 빛의 채도가 낮아야 하기 때문에 화면에서 진동하지 않아야 합니다. 너무 격렬해서요.
브랜드
밝은 테마는 3가지 브랜드 HSL 색상 채널 값을 변경하지 않고 어두운 테마는 그렇지 않습니다. 채도를 반으로 줄이고 밝기를 낮춥니다. 상대적 50%입니다.
* {
--brand-dark: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 2)
calc(var(--brand-lightness) / 1.5)
);
}
텍스트 색상
어두운 테마에서는 텍스트 색상이 밝아야 합니다. 다음 색상은 흰색에 더 가깝게 값을 조정합니다.
* {
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
}
표면 색상
어두운 테마에서는 표면 색상이 어둡게 표시됩니다. 다음 색상은 10%로 표시되며 첫 번째 표면이 가장 어둡게 표시됩니다.
* {
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
}
그림자
어두운 테마에서는 그림자가 잘 보이지 않습니다. 이해하기 어렵기 때문에 이해가 되네요
뭔가를 어둡게 할 수 있습니다. 여기에서
--shadow-strength-dark를 사용하면 주변 영역을 어둡게 할 수 있어 매우 편리합니다.
그림자 효과를 낼 수 있습니다.
* {
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
그리고 그림자의 채도도 살펴보세요. CANNOT TRANSLATE 확인할 수 있나요? 먼저 이미지에서 채도를 제거해 보세요. devtools 중에서 무엇을 선호하시나요?
어두운 색상 모두 함께 사용
* {
--brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
테마 어둡게
이 색 구성표는 밝기와 채도를 조정하는 데 사용됩니다. 거기 여전히 색조가 표시되기에 충분한 채도여야 하지만 대비 점수가 거의 통하지 않습니다. 어둡고 저대비하도록 만들어졌습니다.
브랜드
* {
--brand-dim: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 1.25)
calc(var(--brand-lightness) / 1.25)
);
}
텍스트 색상
* {
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
}
표면 색상
* {
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
}
그림자
* {
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}
함께 어둡게 하기
* {
--brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}
액세스할 수 있는 색상
어두운 텍스트 색상 세트에서 가장 낮은 밝기는 65% 이고 가장 높은 밝기는 25%입니다 빛의 40% 는 사이에 숨을 쉴 수 있는 공간이 생깁니다. 밝은 테마에서는 55% 의 호흡 공간이 있고 밝은 테마입니다. 텍스트와 표면 색상 간의 밝기 차이 유지 40~50% 정도가 되면 색상 대비율을 높게 유지할 수 있을 뿐만 아니라 점수가 낮은 경우 조정할 수 있습니다.
저는 이것을 'Bump Bump til ya Pass'라고 하는데, 이는 밝기 값을 자동으로 조정합니다.
<ph type="x-smartling-placeholder">이 챌린지에서 만든 각 테마는 대비 점수를 통과합니다. 어두운 색 구성표는 대비가 가장 낮지만 최소 요구사항을 통과합니다. 다른 팀원이 대비되는 좋은 색상을 사용할 수 있도록 표면 색상과 액세스 가능한 텍스트 색상을 연결하는 클래스 이름을 만드는 것이 좋습니다.
.surface1 {
background-color: var(--surface1);
color: var(--text2);
}
.surface2 {
background-color: var(--surface2);
color: var(--text2);
}
.surface3 {
background-color: var(--surface3);
color: var(--text1);
}
.surface4 {
background-color: var(--surface4);
color: var(--text1);
}
래드 섀도우
테마는 .rad-shadow라는 유틸리티 클래스를 사용합니다. 이 그림자는 생성되었습니다.
부드러운 그림자 도구를 사용해 보세요.
많이 있습니다. 생성된 스니펫을 가져와 원하는 색상으로 맞춤설정했습니다.
계산할 수 있습니다. 이렇게 한 이유는 음영을 조정할 수 있는
사용할 수 있습니다.
이를 위해 조정할 각 색 구성표에 대해 두 개의 변수를 만들었습니다. 음영의 색상과 음영 강도를 설정할 수 있습니다. 색상은 채도 및 어두움을 위한 옵션입니다. 힘은 그림자를 가리는 쉬운 방법입니다. 강도를 설정할 수 있습니다. 최종 결과는 다음과 같았습니다.
:root {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
.rad-shadow {
box-shadow:
0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
;
}
색 구성표에서 그림자로 더 나아가려면 그림자를 만들어 각도도 변합니다. 빛의 방향이 동일해야 하기 때문이죠. 디자인의 모든 그림자 사이에 적용할 수 있습니다
색 구성표 사용
색상에 대한 사전 정의가 완료되었으면 색상을 스키마에 구애받지 않는 속성입니다. CSS 입장에서는 이 색 구성표 프로젝트에 대한 작성자가 있을 경우 특정 색 구성표의 값입니다. 테마에 쉽게 머무르고 싶습니다.
이를 위해 색 구성표는
잠시 후에 정의할 일반적인 커스텀 속성을 살펴보겠습니다. 이렇게 하면
디자인 변수를 사용하는 사람은 어떤 색 구성표가 적합한지 걱정할 필요가 없습니다.
설정된 경우 표면 및 텍스트 색상만 사용하면 됩니다. 대신
color: var(--text1-light)는 color: var(--text1)를 사용합니다. 모두 적응하고 방향을 향해 나아가고 있음
CSS에서 훨씬 더 높은 수준에서 처리됩니다.
다음 코드 블록에서 밝은 테마의 연결 스타일을 살펴보세요.
일반 맞춤 속성을 밝은 테마별 색상과 연결합니다. 현재 모두
var(--brand)를 사용하면 밝은 브랜드 색상이 사용됩니다.
밝은 테마 (자동)
:root {
color-scheme: light;
--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}
이제 사이트에서 밝은 테마를 사용 중입니다. 정말 즐겁게 성공하셨네요! 다른 튜토리얼에서 사전 정의된 색상을 사용하면서 이러한 순간을 색 구성표 컨텍스트를 사용합니다.
어두운 테마 (자동)
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}
}
밝은 테마
[color-scheme="light"] {
color-scheme: light;
--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}
어두운 테마
[color-scheme="dark"] {
color-scheme: dark;
--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}
테마 어둡게
[color-scheme="dim"] {
color-scheme: dark;
--brand: var(--brand-dim);
--text1: var(--text1-dim);
--text2: var(--text2-dim);
--surface1: var(--surface1-dim);
--surface2: var(--surface2-dim);
--surface3: var(--surface3-dim);
--surface4: var(--surface4-dim);
--surface-shadow: var(--surface-shadow-dim);
--shadow-strength: var(--shadow-strength-dim);
}
이 시점에서 작성자는 제공된 색 구성표 제네릭을 자유롭게 사용할 수 있습니다. 다시는 테마에 대해 걱정할 필요가 없습니다.
결론
이제 내가 어떻게 했는지 알았으니 어떻게 하면 어떨까?! 🙂
접근방식을 다각화하고 웹에서 빌드하는 방법을 모두 알아보겠습니다. Codepen을 만들거나 데모를 호스트하고 트윗해 주시면 커뮤니티 리믹스 섹션을 참조하세요.
소스
커뮤니티 리믹스
- @chris-kruining이 색조 슬라이더를 추가했습니다.
no-preference, more, less의 상태 색상 및 대비 모드:
데모를 살펴보세요.