HSL이란 무엇이며 디자이너가 마스터 해야하는 이유

Color는 디자이너의 툴킷에서 가장 강력한 도구 중 하나이지만 Hex 및 RGB와 같은 기존 시스템에서 작업하면 때때로 제한을 느낄 수 있습니다. 이 형식은 작동하지만 실제로 색상을 보거나 생각하는 방식을 반영하지 않습니다. 더 밝은 그늘이 필요하거나 다른 색조에서 채도를 일치시키고 싶습니까? 당신은 추측하고 있습니다.

그곳에서 색조, 채도 및 가벼움 (HSL)이 들어 오는 곳입니다. 색상 조정이 더 시각적이고 예측 가능하며 Divi 5는 상대 색상 및 HSL 기능 릴리스 덕분에 기본적으로 지원합니다. 그것이 어떻게 작동하는지, 왜 그것을 마스터하고 싶은지 탐구합시다.

왜 대부분의 디자이너들이 색상 선택으로 어려움을 겪고 있습니다

컬러 도구는 종종 우리가 자연스럽게 색상에 대해 생각하는 방식과 일치하지 않습니다. 당신은 당신이 좋아하는 파란색 음영을 볼 수 있지만, 그것을 캡처하는 유일한 방법은 #4a90e2와 같은 16 진 코드를 통한 것입니다. 그 글자와 숫자는 당신의 뇌에 아무 의미가 없습니다.

16 진수는 빨간색, 녹색 및 파란색 값을 혼합하여 만들어집니다. 각 쌍 (예 : 4A, 90, E2)은 0에서 255까지의 각 색상의 양을 보여줍니다. 함께 최종 색상 #4A90E2를 만듭니다.

브랜드 파란색의 가벼운 버전이 필요할 때 어떤 숫자가 변경 될지 파악하는 데 어려움이있을 수 있습니다. 모든 RGB 값을 똑같이 늘려야합니까? 또는 하나의 RGB 채널 (빨간색, 녹색 또는 파란색) 만 조정 하시겠습니까? 숫자는 눈이 기대하는 것과 일치하지 않으므로 옳을 때까지 조정하고 미리 보입니다.

전통적인 컬러 시스템은 다른 상황에서 작업 할 때 더 큰 문제를 일으 킵니다. 색상 변형을 만드는 것은 순수한 추측이됩니다. 함께 작동하는 다섯 가지 색조를 원하지만 시스템은 없습니다. Lightening #4a90e2 ~ #6ba3e8이 옳게 보이거나 씻겨 질 수 있습니다. 당신은 그것을 볼 때까지 알 수 없습니다.

육각 코드를 변경하여 음영을 얻는 것은 간단하지 않습니다. 왼쪽에서 새로운 16 진수 ( #6ba3e8)가 신중하게 선택되어 #4a90e2의 가벼운 그늘을 만듭니다. 오른쪽에서는 공칭 변경 (#3B99E5)만으로는 색상을 밝게하지는 않지만 완전히 변경됩니다.

이 느린 수동 워크 플로우는 완료하는 데 몇 시간이 걸립니다. 값을 조정하고 미리보기를 확인하고 다시 조정하여 설계 대신 도구와 싸우십시오. 색상이 사람들이 느끼게하는 방식에 초점을 맞출 때 기술적 인 세부 사항에주의를 기울입니다.

많은 디자이너들은 프로세스가 너무 어리석기 때문에 색 실험을 피합니다. 안전한 선택을 고수하거나 다른 사이트에서 팔레트를 복사합니다. 색상 창의성을 탐색하는 데 도움이되는 도구는 실제로 그것을 제한합니다.

정적 RGB 값의 문제

RGB 값이 항상 당신이 기대하는 방식으로 행동하는 것은 아닙니다. 동일한 설정에서 녹색은 파란색보다 밝게 보이지만 시스템은 동일하게 처리합니다. RGB (128, 128, 128)는 완벽한 중간 회색이지만 화면, 조명 또는 사용 된 색상 프로파일에 따라 모양이 다를 수 있습니다.

브랜드 색상의 가벼운 버전을 원하십니까? RGB 값을 높이려고 시도 할 수 있으며 때로는 예상 한 것을 얻습니다. 다른 경우, 당신은 씻겨지고 이상하게 보이는 무언가를 얻습니다. 미리 말할 방법이 없습니다.

RGB 값의 브랜드 블루 컬러는 +50만큼 동일하게 증가하여 씻겨 진 그늘을 초래하여 예상되는 매끄러운 가벼운 톤이 아닙니다. 이는 각 RGB 채널에 동일한 양을 추가한다고해서 항상 예측 가능하거나 균형 잡힌 색조를 생성하지는 않습니다.

RGB 색상도 다른 프로그램간에 이동합니다. 이는 색상 프로파일의 차이, 렌더링 엔진 및 브라우저가 해당 값을 해석하는 방법으로 인해 발생합니다. Photoshop에서 완벽한 그늘을 선택하고 Hex 코드를 웹 사이트에 복사하면 여전히 약간 다르게 보일 수 있습니다. 동일한 색상 코드가 브라우저와 디자인 도구에서 약간 다르게 보일 때 브랜드 지침이 시행하기가 어려워집니다.

당신이 그것을 밝게하거나 어둡게하려고 할 때 각 색상은 고유 한 방식으로 변경됩니다. RGB는 색상을 고르게 조정하지 않기 때문에 일부 색조는 더 빨리 사라지거나 예기치 않은 방식으로 이동합니다. 가벼움이 증가함에 따라 일부는 다른 색조보다 빠르게 불포화합니다. 빨간색은 생생한 상태에서 파란색이 회색으로 변합니다. 오렌지가 깨끗하게 유지되는 동안 자주색이 진흙 투성이가됩니다.

컬러 작업은 의도적 인 디자인 대신 시행 착오로 바뀝니다.

색조, 채도 및 가벼움 (HSL) 시스템은 무엇입니까?

색조, 채도 및 가벼움 (HSL)은 뇌가 실제로 색상에 대해 생각하는 방식과 일치하는 세 부분으로 색상을 깨뜨립니다. Hue는 360 옵션의 휠에서 기본 색상을 선택합니다. 채도는 색상이 얼마나 생생하거나 회색으로 보이는지 제어합니다. 가벼움은 어둡거나 밝거나 그 사이 어딘가에 있는지 결정합니다.

“나는 진한 녹색을 원한다”고 생각하면 이미 HSL 용어에 대해 생각하고 있습니다. 당신은 당신이 녹색 (색조), 아마도 상당히 풍부한 (채도), 어두운면 (가벼움)을 원한다는 것을 알고 있습니다.

세 가지 구성 요소가 함께 작동하는 방식

색조는 가시 광선 스펙트럼에서 컬러 휠 컷처럼 작동합니다. 끝은 빨간색으로 자마 젠타에 연결되어 가능한 모든 색상의 부드러운 루프를 만듭니다. 완벽한 오렌지를 원하십니까? 빨간색 (0도)에서 시작하여 약 30도 노란색으로 이동하십시오.

채도는 색상 순도를 백분율로 측정합니다. 0 %는 모든 색상을 제거하고 회색을 남깁니다. 100 %가 가장 생생한 버전을 제공합니다. 포화를 네온 부호와 음소거 된 수채화의 차이로 생각하십시오.

Wikipedia의 그래픽에서 동일한 주제에 대해 HSL 색상이 작동하는 방법

가벼움의 범위는 0% (순수한 검은 색)에서 50% (중성) ~ 100% (순수한 흰색)입니다. 가장 유용한 색상은 20%에서 80%의 빛 사이에서 산다. 이것은 당신이 자연스럽게 색상을 더 가볍게 만들거나 어둡게 만드는 것에 대해 생각하는 방식과 일치합니다.

Page Builders가 일반적으로 HSL을 피하는 이유

대부분의 페이지 빌더는 이러한 시스템이 더 잘 작동하기 때문에 실제적인 이유로 HEX 코드와 RGB를 사용합니다. 건축업자 개발자는 실제 기술적 장애물에 직면합니다. 사용자는 이미 Photoshop 및 기타 디자인 도구에서 16 진 코드를 알고 있습니다. 색상 시스템 간 변환하려면 추가 처리가 필요합니다.

HSL을 지원한다는 것은 HSL 컬러 피커가 완벽하게 못 박히지 않는 한 새로운 인터페이스를 구축하고 낯선 개념에 대해 교육하는 것을 의미합니다. 이 보수적 인 접근 방식은 창의적 가능성을 제한하더라도 비즈니스 관점에서 의미가 있습니다.

Divi 5의 새로운 HSL 컨트롤로 완벽한 색상 변형 생성

HSL은 이론적으로 훌륭하게 들리지만 이론은 웹 사이트를 구축하지 않습니다. 이 접근법을 지원하는 도구가 필요합니다. 대부분의 Page Builders는 16 진 코드 및 RGB 추측으로 되돌아갑니다. Divi 5는 색상으로 작업하는 방식에 대한 모든 것을 바꿉니다. 하지만 먼저 :

Divi는 무엇입니까?

Divi는 다른 WordPress 페이지 빌더와 다르게 작동하는 페이지 빌더입니다. 심각한 타이포그래피 컨트롤과 혼합 된 시각적 디자인 도구를 얻을 수 있습니다. 라이브 편집기는 변경 사항을 즉시 보여줍니다. 글꼴 크기를 조정하고 라인 간격을 조정하고 바로 페이지 업데이트를 시청하십시오.

원하는 곳에서 200 개 이상의 모듈을 떨어 뜨릴 수 있습니다. 텍스트 블록, 헤드 라인 및 특수 콘텐츠 조각은 모두 잘 재생됩니다.

Divi Special : 2000+ Ready-Made 레이아웃을 실제 비즈니스를 위해 구축 한 이유는 다음과 같습니다. 우리는 기본 스타터 템플릿이 아니라 실제 디자인을 이야기하고 있습니다. 식당을위한 것이 필요하십니까? 그것에 대한 레이아웃이 있습니다. 사진 스튜디오 운영? 우리는 당신을 덮었습니다. 컨설턴트와 기술 스타트 업은 자신의 디자인도 얻습니다.

각 레이아웃은 귀하의 산업을 알고 있습니다. 색상, 간격 및 컨텐츠 흐름은 모두 고객의 생각과 탐색 방식에 적합합니다.

전체 사이트 제어를하십시오

테마 빌더는 사이트 텍스트 스타일의 모든 부분을 손에 넣습니다. 브랜드의 언어를 말하는 맞춤형 헤더를 구축하십시오. 긴 기사를 쉽게 읽을 수있는 블로그 페이지를 디자인합니다. 404 오류 페이지는 사이트의 나머지 부분과 동일한 글꼴과 스타일을 유지할 수 있습니다.

Divi AI는 인공 지능을 워크 플로로 바로 제공합니다. 당신이 쓴 것처럼 들리는 헤드 라인을 생성하십시오. 브랜드 음성과 정확히 일치하는 제품 사본을 만듭니다.

비즈니스를 이해하는 전체 페이지 섹션을 구축합니다.

필요할 때 코드 스 니펫을 작성합니다.

Divi AI는 빌더 내부의 이미지와 함께 작동합니다. 이미지에서 수정이 필요한 것과 그것이 어떻게 변경되는지 설명하십시오.

주문시 완전히 새로운 사진을 생성합니다.

Divi Quick 사이트에서 빈 페이지 문제를 건너 뜁니다

Divi Quick Sites는 많은 프로젝트가 시작되기 전에 중단되는 빈 페이지 문제를 해결합니다. 전문 스타터 사이트에는 이미 설정된 타이포그래피가 제공됩니다. 우리의 디자인 팀은 다른 곳에서는 볼 수없는 고유 한 이미지와 아트 워크 로이 템플릿을 구축합니다.

Divi AI가있는 Divi 빠른 사이트는 비즈니스 설명에 따라 사용자 정의 레이아웃을 구축 할 수 있습니다. 컨설팅 실습이나 식당에 대해 말하면 업계에 적절한 사본이있는 관련 페이지를 만듭니다.

이것은 단지 와이어 프레임을 넘어선 것입니다. 비즈니스에 적합한 실제 헤드 라인, 바디 카피 및 이미지를 얻을 수 있습니다. 브랜드 글꼴과 색상을 선불로 설정하거나 AI가 귀하를 선택하게 할 수 있습니다.

그 후, 모든 것이 완전히 편집 가능한 상태로 유지되므로 시력에 맞게 타이포그래피를 개선 할 수 있습니다.

Divi 5의 새로운 것은 무엇입니까?

Divi 5는 현재 알파 테스트 중이며 새로운 웹 사이트 프로젝트를 준비하는 Page Builder의 다음 버전입니다. 우리는 일상 업무 속도를 높이고 건축 사이트를보다 즐겁게 만드는 실질적인 개선에 중점을 두었습니다.

현재 Divi의 가장 좋은 부분은 다른 모든 것을 재건하는 동안 유지되었습니다. Fresh Interface Design은 후드에서 개선 된 성능을 충족합니다. 현대적인 코딩 관행은 이제 전체 시스템에 힘을 발휘합니다.
페이지가 이전보다 빠르게로드됩니다. 컨트롤은 클릭하면 더 빨리 반응합니다. 타이포그래피는 추가 수동 작업없이 전체 사이트에서 일관성을 유지합니다.

다음은 몇 가지 하이라이트입니다.

• 완전한 프레임 워크 재건축은 이전 단축 코드 시스템을 덤프합니다. 브라우저가 훨씬 더 잘 처리하는 최신 블록 기반 아키텍처에서 모든 것이 실행됩니다.
• Divi 5의 Flexbox 시스템을 사용하면 최신 반응 형 레이아웃을 구축하고 사용자 정의 코드없이 정렬, 간격 및 랩핑을 쉽게 관리 할 수 ​​있습니다.
• HSL 컬러 시스템은 디자이너의 생각과 일치하는 색상 컨트롤을 제공합니다. 육각 코드로 추측하는 대신 색조, 채도 및 가벼움을 조정하십시오.
• 7 개의 사용자 정의 중단 점은 이전 3 크기 한도를 대체합니다. 타이포그래피는 방문자가 사용하는 모든 장치에서 완벽 해 보입니다.
• CSS 기능 내장 기능은 Calc (), clamp (), min () 및 max ()가 시각적 편집기에서 바로 작동합니다. 코드없이 자연스럽게 스케일링하는 반응 형 텍스트를 작성하십시오.
• 글로벌 디자인 변수는 한 곳에서 글꼴, 색상 및 간격을 저장합니다. 메인 헤딩 글꼴을 한 번 변경하십시오. 사이트의 모든 H1이 자동으로 업데이트됩니다.
• 사전 설정 기반 설계 시스템 에는 개별 모듈에 대한 요소 사전 설정과 완전한 타이포그래피 스타일을위한 옵션 그룹 사전 설정이 포함되어 있습니다. 일을 일관성있게 유지하려면 다른 모듈에서이를 사용하십시오.
• 새로운 Visual Builder 인터페이스는 도킹 가능한 패널, 탭 창, 키보드 바로 가기 및 빵 부스러기로 더 나은 레이어보기를 제공합니다. 탐색이 훨씬 쉬워집니다.
• 중첩 행은 복잡한 레이아웃을 위해 다른 행 안에 줄을 넣습니다. 특수 섹션 유형없이 고급 레이아웃 배열을 구축하십시오.
• 모듈 그룹은 다른 요소를 단일 유닛으로 결합합니다. 이를 통해 복잡한 텍스트 레이아웃을 더 쉽게 관리 할 수 ​​있으며 사용자 정의 모듈을 구축 할 수도 있습니다.
• 멀티 패널 작업 공간은 가장 잘 작동하는 곳에서 패널을 이동합니다. 다른 디자인을 조정하면서 타이포그래피 컨트롤을 열어 두십시오.
• 속성 관리 사본, 페이스트 및 재설정 타이포그래피 스타일간에 요소. 모든 것을 복사하는 대신 특정 속성을 전송할 수 있습니다.
• Drigh/Dark Interface 모드는 긴 설계 세션에서 눈 변형을 줄입니다.
• 캔버스 스케일링은 편집기를 떠나지 않고 타이포그가 다른 화면 크기로 어떻게 보이는지 보여줍니다.

모든 Divi 5 기능 릴리스를 발견하십시오

Divi 5로 HSL 색상을 만드는 방법

언급했듯이 Divi 5는 컬러 피커를 처음부터 다시 작성합니다. 새로운 인터페이스는 뇌가 색상에 대해 생각하는 것처럼 작동하는 HSL 컨트롤에 대한 16 진 코드를 떨어 뜨립니다. 3 개의 슬라이더가 작업을 처리합니다.

• Hue는 0-360도를 허용하고 음수 값이 랩핑됩니다 (예 : -60은 300이됩니다). 컬러 휠은 양쪽 끝에서 연결됩니다. 0, 360 및 Negative 360은 모두 같은 빨간색을 제공합니다. 보완적인 색이 필요하십니까? 출발점에서 색조를 180 도로 설정하십시오.
• 채도는 0%에서 100%로 실행되며 색상이 얼마나 생생한 지 제어합니다. 0 %는 모든 색상 강도를 제거하여 회색을 남깁니다. 100 %는 풀 블라스트 색상을 제공합니다.
• 가벼움은 동일한 백분율 범위에서 작동합니다. Zero는 검은 색을 만들고 100%는 흰색을 생성하며 50%는 선택한 색조의 순수한 형태를 보여줍니다.

드래그하는 동안 컨트롤 업데이트가 실시됩니다. 버튼을 적용하거나 새로 고침 지연으로 워크 플로를 방해하지 않습니다.

1. 글로벌 색상에서 상대 색상을 구축하십시오

상대 색상을 사용하면 개별 HSL 구성 요소를 조정하여 기존 전역 색상을 기반으로 새로운 색상을 만들 수 있습니다. 새로운 색상을 추가하여 디자인 변수 관리자에서 시작하십시오.

컬러 피커를 사용하여 기존 기본 글로벌 색상과 일치하도록 기본 색상 (브랜드 색상 일 수 있음)을 설정하십시오.

기본 색조 교대를 사용하여 보완 색상을 만들어 보조 색상을 설정하겠습니다. 가벼움을 25%로 설정하여 기본 색상을 취하십시오.

색조 나 채도로 놀아서 보조 색상으로 새로운 색상을 만들 수도 있습니다.

컬러 스와치는 한 눈에 중요한 정보를 보여줍니다. 무언가가 설계 변수를 사용하는지 여부를 알 수 있고 HSL 필터가 기본 색상을 수정하는 방법을 확인할 수 있습니다. 이 시각적 피드백은 색상 관계에서 무슨 일이 일어나고 있는지 이해하는 데 도움이됩니다.

마찬가지로, 기본 색상을 기본으로 사용하여 제목 텍스트 색상 및 바디 텍스트 색상 색상 색상을위한 어두운 색조를 만듭니다.

물론 여기에서 더 장식적인 색상을 만들 수 있으며 여전히 16 진수, RGB 또는 이름이 지정된 색상 값을 수동으로 입력 할 수 있습니다.

2. 다층 디자인 가변 관계 관리

복잡한 색상 시스템을 위해 설계 변수가 서로 쌓일 수 있습니다. 기본을 기반으로 번트 이끼와 같은 추가 장식 색상을 만들 수 있습니다. 그런 다음 불에 타는 이끼의 불투명도를 줄여 그림자 색상을 만들어냅니다.

이 중첩 관계는 Divi 5가 복잡한 색상 계층을 어떻게 처리하는지 보여줍니다. 기본 색상을 조정하면 Burnt Moss 색상이 먼저 업데이트되어 그림자 색상이 업데이트됩니다. 전체 체인이 연결되어 있습니다.

이 접근법은 색상 관리가 무작위 추측에서 예측 가능한 시스템으로 변경됩니다. 귀하의 웹 사이트의 컬러 팔레트는 모든 요소에서 수동 조정없이 조화롭게 유지됩니다.

3. 사이트에 HSL 색상을 적용하십시오

텍스트 모듈을 누르고 색상 피커를 엽니 다. 저장된 변수는 표시기와 함께 나타납니다. "보조 색상"을 클릭하면 섹션의 배경이 작성됩니다. 버튼, 배경 및 경계에 대해서도 동일한 색상이 작동합니다.

타이포그래피는 하나의 색조를 고수하지만 가벼움을 바꿀 때 작동합니다. 헤드 라인은 -25% 가벼움에서 1 차 색상을 사용할 수 있습니다. 바디 텍스트는 -15%로 약간 가볍습니다. 링크는 -45%입니다. 모든 것은 관련이 있지만 명확하게 유지됩니다.

배경에는 브랜드 색상이 필요합니다. 가벼움을 최대 95%까지 밀어 넣습니다. 포화를 15%로 떨어 뜨립니다. 이제 콘텐츠와 싸우지 않는 브랜드 배경이 있습니다. 버튼은 전체 채도로 작동합니다. 호버는 노치 아래로 가벼움을 감염시킨다. 같은 색, 다른 강도.

가벼운 텍스트에는 어두운 배경이 필요합니다. 가벼움 숫자는 효과가있는 것을 알려줍니다. 가벼움의 50% 쌍으로 텍스트는 -30% 미만의 배경으로 쌍을 이룹니다.

밝은 배경에 어두운 텍스트가있는 섹션은 값을 뒤집습니다. 같은 색조, 같은 포화. 가벼움 값을 바꾸면 완료됩니다. 물론, 이러한 모든 색상은 적용된 후에도 링크를 유지합니다. 하나의 변수를 변경하고 모든 적응이 적응합니다. 쉽게!

4. HSL 색상을 재사용 가능한 사전 설정으로 저장하십시오

모듈을 만들고 색상 디자인 변수를 적용한 후에는 이러한 색상을 재사용 가능한 스타일로 사전 설정하십시오. Divi 5는 함께 작동하는 두 가지 사전 설정 유형을 제공합니다.

옵션 그룹 사전 설정 모든 모듈에서 특정 설계 측면을 제어합니다. 제목 텍스트 색상 디자인 변수로 제목을 스타일링하십시오. 번트 이끼와 50% 불투명도를 사용하여 칼럼에 그림자를 추가하십시오. 모든 모듈의 옵션 그룹 모듈 아이콘 위에 호버링하고 적절하게 레이블을 지정하고 저장하십시오.

배경, 간격, 애니메이션 및 텍스트에 대해서도 동일한 작품입니다. 숫자 설계 변수를 통해 테두리 반경을 추가 하고이 숫자 변수를 참조하는 사전 설정을 설정하십시오. 각 옵션 그룹은 자체 설계 영역을 처리하며 크로스 적용 할 수 있습니다. 즉, 열의 테두리 반경을 호출 대회에 적용 할 수 있습니다.

적용하려면 적절한 옵션으로 이동하여 사전 설정을 선택하십시오.

요소 사전 설정 완전한 모듈 스타일을 저장합니다. 80% 가벼움으로 보조 색상의 버튼 모듈을 스타일링하십시오. 모듈 설정 오른쪽 상단에서 사전 설정 선택기를 클릭하십시오. "브랜드 컬러 버튼"이라는 새 사전 설정을 만듭니다. 이렇게하면 HSL 색상을 포함하여 모든 버튼 설정이 저장됩니다.

이제 새 버튼을 추가하면이 사전 설정을 적용하면 전체 스타일이 상속됩니다. 작업을 자르려면 만든 사용자 정의 사전 설정 (옵션 그룹 또는 요소)을 가져 와서 그 옆에 별 아이콘을 클릭하십시오. 해당 사전 설정은 해당 요소 또는 옵션 그룹의 모든 새로운 인스턴스의 기본값이됩니다.

귀하의 HSL 관계는 사전 설정 내에서 손상되지 않습니다. 색상을 업데이트 할 때 모든 모듈을 사용하고 해당 색상 업데이트를 사용하여 사전 설정합니다. 가벼운 섹션, 어두운 섹션 및 특수 브랜드 순간에 대한 사전 설정 라이브러리를 구축하십시오. HSL 값은 각 사전 설정마다 이동하여 프로젝트 전체에서 색상 시스템을 일관되게 유지합니다.

Divi 5로 웹 사이트를위한 색상 시스템을 구축하십시오

며칠이 걸리는 컬러 작업. 당신은 16 진 코드를 피하고, 프로그램 사이의 값을 복사하고, 괜찮은 것으로 보입니다.

HSL은 컬러 작업을 다시 재미있게 만듭니다. 당신은 당신이 사랑하는 그늘을보고 그것을 재현하는 방법을 정확히 알고 있습니다. 색조는 색상을 선택하고 채도가 얼마나 생생한 지 제어하며 가벼움은 더 밝거나 어두워집니다. 이제 브랜드 새로 고침은 몇 시간 대신 몇 분이 걸립니다.

이것은 실제 설계 제어입니다. Divi 5는 오늘 이런 일을합니다.