균형 잡힌 컬러 팔레트를 만들기위한 편리한 SASS 구동 도구

디자인 배경에서 오지 않을 수있는 사람들의 경우 색상 팔레트를 선택하는 것은 종종 개인 선호도를 기반으로합니다. 온라인 컬러 도구로 색상을 선택하거나 이미지에서 샘플링, 좋아하는 브랜드에서 "빌린"또는 팔레트가 "옳은 느낌"까지 컬러 휠에서 무작위로 선택할 수 있습니다.

우리의 목표는 SASS 색상 기능으로 키 컬러 속성을 탐색하여 팔레트가 "옳은 느낌"을 만드는 원인을 더 잘 이해하는 것입니다. 결국, 당신은 더 친숙해질 것입니다.

• 균형 팔레트를 구축하는 데 도움이되는 팔레트의 휘도, 가벼움 및 채도를 그래프로 만드는 가치
• 도구에 접근 가능한 대비 체크를 구축하는 것의 중요성
• 조작 및 포크를 포함하여 자신의 탐색을 위해 확장 할 고급 SASS 기능

그러나 궁극적으로 당신이 찾을 수있는 것은 웹의 색상이 하드웨어와 인간의 인식의 전투라는 것입니다.

색상 그래프를 유용하게 만드는 이유

RGB 및 RGBA 값, HSL 및 HSLA 값 및 HEX 코드와 같은 스타일 시트의 색상을 선언하는 방법에 익숙 할 수 있습니다.

 RBG (102,51,153)
RBGA (102,51,153, 0.6)
HSL (270, 50%, 40%)
HSLA (270, 50%, 40%, 0.6)
#663399

이러한 값은 색상 렌더링 방법에 대한 장치에 지침을 제공합니다. 색상의 더 깊은 속성은 프로그래밍 방식으로 노출되어 색상이 더 넓은 팔레트와 어떻게 관련되는지 이해하기 위해 활용할 수 있습니다.

그래프 색상 속성의 가치는 색상 간의 관계에 대한보다 완전한 그림을 얻는 것입니다. 이것은 왜 색상 모음이 함께 느껴지거나 느끼지 않을 수도 있는가를 보여줍니다. 여러 색상 속성을 그래프로 표시하면보다 조화로운 팔레트를 만들기 위해 어떤 조정이 이루어질 수 있는지 힌트가됩니다. 우리는 나중에 무엇을 바꿀지 결정하는 방법에 대한 예를 살펴볼 것입니다.

내장 된 SASS 색상 기능을 사용하여 쉽게 얻을 수있는 두 가지 유용한 측정은 가벼움과 채도입니다.

• 가벼움은 색상과 흰색 또는 검은 색의 혼합을 나타냅니다.
• 채도는 색상의 강도를 나타냅니다.

 $ 컬러 : Rebeccapurple;

@debug lightness ($ color);
// 40%

@debug 채도 ($ color);
// 50%;

그러나 휘도는 아마도 가장 유용한 색상 속성 일 수 있습니다. 우리의 도구에 표시된 바와 같이, 휘도는 SRGB 색상 공간을 가정하는 WCAG 공식을 사용하여 계산됩니다. 휘도는 대비 계산에 사용되며, 더 큰 개념으로, 색 관계를 평가하기 위해 상대적 밝기에 대한 인간의 인식을 정량화하는 데 더 가까이 다가가는 것을 목표로합니다. 이것은 팔레트들 사이의 더 엄격한 휘도 값 범위가 인간의 눈과 더 균형을 이루는 것으로 인식 될 가능성이 있음을 의미합니다. 그러나 기계는 잘못되며 팔레트 값을 조작 할 때 발생할 수 있다는이 규칙에 대한 예외가 있습니다. 휘도에 대한보다 광범위한 정보와 색상 균일성에 대한 인간 인식을보다 정확하게 표현하는 것을 목표로하는 Cielab이라는 독특한 색상 공간은이 기사의 끝 부분의 링크를 참조하십시오.

또한, 색상 대비는 특히 가독성 및 구별되는 UI 요소 측면에서 접근성에 매우 중요하며, 이는 프로그래밍 방식으로 계산할 수 있습니다. 그것은 툴링이 통과 값을 테스트 할 수 있음을 의미한다는 점에서 중요합니다. 또한 알고리즘은 예를 들어 배경색으로 전달 될 때 적절한 텍스트 색상을 반환 할 수 있음을 의미합니다. 따라서 우리의 도구에는 팔레트 조정 방법을 측정하는 추가 방법으로 대비 확인이 통합됩니다.

이 프로젝트에서 시연 된 기능은 대비 안전 디자인 시스템 팔레트를 계획하거나 사용자 정의 테마를 정의 할 수있는 SASS 프레임 워크로 구운 데 도움이 될 수 있습니다.

팔레트 빌딩 도구로서 Sass

SASS는 어레이를 통해 만들고 반복하는 등의 요구에 적합한 몇 가지 전통적인 프로그래밍 기능을 제공합니다. 실시간 처리가있는 Codepen과 같은 온라인 IDE와 결합하면 기본적으로 컬러 팔레트 구축과 같은 특정 문제를 해결하기 위해 웹 앱을 만들 수 있습니다.

다음은 사용할 도구의 미리보기입니다.

SASS 팔레트 빌더의 특징

• 정확한 플롯 포인트 배치 및 값 비교를 위해 종횡비 제어 응답 형 그래프를 출력합니다.
• SASS 색상 기능 및 수학 계산 결과를 활용하여 0–100% 척도로 포인트를 올바르게 플로팅합니다.
• 보다 전통적인 "견본"보기를 제공하기 위해 구배를 생성합니다.
• 내장 된 SASS 기능을 사용하여 채도 및 가벼움 값을 추출합니다.
• 휘도 및 대비 기능을 생성합니다 (필수 미리 계산 된 선형 색상 채널 값을 연결하는 것 외에도 재료 웹 구성 요소에서 포크).
• 주어진 배경에 대해 적절한 텍스트 색상을 반환하고 사용 된 비율을 변경하기위한 설정 변수로 변합니다.
• 주어진 팔레트에서 채도와 가벼움을 균일하게 스케일링하는 기능을 제공합니다.

팔레트 빌더 사용

처음에는 제공된 예제 팔레트 중에서 교체하여 다른 유형의 색상 범위에 대한 그래프 값이 어떻게 변하는 지 느낌을 얻을 수 있습니다. 팔레트 변수 이름을 복사하고 $ 기본값으로 스왑을 $ 팔레트 변수의 값으로 주석 스왑에서 찾을 수있는 팔레트 변수를 스왑하십시오.

다음으로, 특히 대비가 WCAG 가이드 라인을 통과하는 데 익숙하지 않은 경우 사전 정의 된 비율간에 $ contrastHreshold 변수 값을 전환하십시오.

그런 다음 $ Palette-Scale-Lightness 또는 $ Palette-Scale-SUTERATION 값을 조정하십시오. 이들은 팔레트 기능으로 공급하고 팔레트 전체의 측정을 균일하게 확장합니다 (개별 색상의 한계까지).

마지막으로, 자신의 팔레트를 추가하거나 예제 내에서 몇 가지 색상을 교체하십시오. 이 도구는 SASS 색상 기능을 탐색하여 색상의 특정 속성을 조정하는 좋은 방법입니다. 그 중 일부는 $ 기본 팔레트에 표시됩니다.

그래프를 해석하고 균형 잡힌 접근 가능한 팔레트를 작성합니다

그래프 도구는 이전에 논의한 것처럼 균형 팔레트의 가장 신뢰할 수있는 지표로 인해 휘도를 표시하는 것입니다. 당신의 요구에 따라, 채도와 가벼움은 그 자체로 유용한 지표가 될 수 있지만, 대부분 팔레트의 휘도를 더 정렬하는 데 필요한 조정을 지적하는 데 도움이되는 신호 전달도 있습니다. 예외는 확립 된 팔레트의 각 값을 기준으로 가벼움 척도를 생성하는 것일 수 있습니다. 이를 위해 $ StripeBlue 예제로 바꿀 수 있습니다.

$ 기본 팔레트는 실제로 균형 잡힌 휘도에 가까워지기 위해 조정이 필요합니다.

균형 잡힌 휘도를 보여주는 팔레트는 Stripe ($ Stripe)의 샘플입니다.

이 도구가 마음의 변화를 초대하는 곳입니다. 컬러 휠을 조작하는 대신 SASS 기능을 활용하여 프로그래밍 방식으로 색상 속성을 조정합니다.

포화 그래프를 확인하여 색상의 강도를 가지고 재생할 공간이 있는지 확인하십시오. 권장 조정은 스케일 컬러 함수로 색상 값을 감싸고 조정 된 $ 채도 값을 전달하는 것입니다. 스케일 컬러의 장점은 주어진 퍼센트에 따라 값을 유동적으로 조정한다는 것입니다.

가벼움은 흰색 또는 검은 색과 혼합하는 것에 대해 측정 된 밝기에 값을 할당하여 두 가지 색상이 다른 이유를 설명하는 데 도움이 될 수 있습니다. $ 기본 팔레트에서 변경 색상 기능은 자주색으로 사용하여 상대 $ 가벼운 값을 빨간색으로 사용되는 값의 계산 된 광도 ()와 정렬합니다.

스케일 컬러 함수는 조정 된 $ 포화 및 $ 가벼움 ​​값을 모두 번들링 할 수 있으며, 이는 종종 가장 유용합니다. 제공된 퍼센트는 부정적 일 수 있습니다.

SASS 기능을 사용하고 채도 및 가벼움 그래프를 확인함으로써 $ DefaultBalancedLuminance는 균형 잡힌 휘도를 달성합니다. 이 팔레트는 또한 MAP-GEG 기능을 사용하여 $ 기본 팔레트에서 값을 복사하고 덮어 쓰기 대신 추가 조정을 적용합니다. 이는 팔레트를 가로 지르는 색조 변동과 같은 여러 변형을 테스트하는 데 편리합니다.

사용 가능한 다른 색상 기능을 탐색하려면 잠시 시간을 내십시오.

팔레트 색상이 실제로 UI에서 어떻게 사용되는지 고려할 때 대비가 작동합니다. 이 도구 기본값은 AA의 기본값을 모든 텍스트에 가장 적합한 대비 : 4.5. Light UI를 위해 빌드하는 경우 텍스트에 사용 된 모든 색상은 플롯 포인트의 중심 색상으로 표시되는 휘도에 맞게 조정할 때 흰색과 적절한 대비를 달성해야한다고 생각하십시오.

팁 : 그래프는 투명한 배경으로 설정되므로 어두운 UI를 위해 개발중인 경우 본문에 배경 규칙을 추가 할 수 있습니다.

추가 독서

색상은 광대 한 주제 이며이 기사는 SASS 기능과 관련된 측면에만 영향을 미칩니다. 그러나 조화로운 색상 시스템을 만드는 방법을 진정으로 이해하려면 다음 리소스를 권장합니다.

• 컬러 스페이스-다양한 컬러 공간의 대화식 모델과 계산 방법을 갖춘 매우 인상적인 깊은 다이빙입니다.
• 색상 및 휘도 이해-MDN의 초보자 친화적 인 개요 및 색상 및 휘도 및 접근성과의 관계.
• 영구적으로 균일 한 컬러 공간-지각 적으로 균일 한 색상 시스템에 대한 자세한 내용은 더 친숙한 HSL 색상 공간에서 휘도 조정 된 Cieluv 색상 공간으로 값을 변환하는 도구 HSLUV를 통해 인증을 제공합니다.
• 접근 가능한 컬러 시스템 - 사용자 정의 툴링 (이 탐색 및 기사에서 영감을 얻은)을 만들어 접근 가능한 색상 시스템을 구축 한 경험에 대한 Stripe의 사례 연구.
• 웹에서 컬러에 대한 대단한 안내서-이것은 웹에서 컬러 메커니즘에 대한 환상적인 탐구로, CSS 트릭에서 바로 여기에서 제공됩니다.
• Tanaguru Contrast Finder - 접근 가능한 대비를 달성하기 위해 색상을 조정하려는 데 어려움을 겪고 있다면 도움이되는 놀라운 도구입니다.
• Colorbox - 그래프를 통해 색상 스케일을 더 탐색하는 Lyft의 웹 앱.
• 체계적인 색상 디자인-광물 UI의 빛나는 팔레트를 통해 일관된 테마를 지원하기 위해 컬러 램프를 만들기위한 미네랄 UI의 탁월한 노력을 설명합니다.
• Tableau 10에서 새로운 색상 팔레트를 설계하는 방법 - Tableau는 해당 색상 공간에 대한 접근 가능한 개요를 포함하여 Cielab을 기반으로 새로 고침 된 팔레트를 만들 수 있도록 사용자 정의 도구의 노출 기능을 사용했습니다.

위 내용은 균형 잡힌 컬러 팔레트를 만들기위한 편리한 SASS 구동 도구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!