적은 색상 연금술 : 색 구성표와 팔레트 생성

색상은 모든 시각적 디자인에서 가장 중요한 요소 중 하나입니다. 올바르게 사용하면 웹 사이트 나 응용 프로그램에 큰 영향을 줄 수 있습니다. 그러나 색 이론을 아는 것만으로 만 그러한 영향을 미치는 것은 충분하지 않습니다. 다양한 색상으로 쉽고 성공적으로 작동하기에 적합한 도구 벨트가 있어야합니다. 다행히도, 작업 할 수있는 많은 색상 기능을 제공 함으로써이 실용적인 문제를 덜 해결합니다. 이 튜토리얼에서는 색상 조작을 위해 유연하고 재사용 가능한 믹스 인을 생성하기 위해 다른 색상 기능과 함께 이러한 색상 기능을 사용하는 방법을 살펴 보겠습니다. 키 테이크 아웃

Less는 웹 디자인을위한 영향력있는 색 구성표와 팔레트를 만드는 데 사용할 수있는 수많은 색상 기능을 제공합니다. 이러한 기능은 색상 조작을 위해 유연하고 재사용 가능한 믹스 인을 생성하기 위해 다른 적은 기능과 함께 사용될 수 있습니다. 색 구성표가 적은 색 구성표를 작성하려면 기본 색상을 정의한 다음 Spin () 함수를 사용하여 색상 변형을 만듭니다. 이러한 변형은 목록에 넣고 필요에 따라 추출되어 다양한 유형의 색 구성표를 만들 수 있습니다. 는 루프 및 조건부 명령문을 사용하여 다양한 유형의 컬러 팔레트를 생성하는 데 사용될 수 있습니다. 스핀 () 함수는 풀 컬러 스펙트럼을 생성하는 데 사용될 수 있으며, Lighten () 및 Darken () 함수는 특정 색상의 색조와 음영을 생성하는 데 사용될 수 있습니다. 컬러 연금술에 적은 사용은 일관되고 조화로운 색 구성표 작성, 단순히 기본 색상을 변경하여 색 구성표를 조정할 수있는 조정의 용이성 및 확장 가능하고 재사용 가능한 색 구성표를 만드는 기능을 포함하여 몇 가지 이점을 제공합니다. >

색 구성표 생성 더 적은 색 구성표를 만들려고 할 때 대부분의 사람들은 가장 명백한 접근 방식을 취합니다.

이 메소드는 변수 및 Less 's Spin () 함수를 사용하여 색 구성표 (Triadic, 우리의 경우)를 만듭니다. 이것은 잘 작동하지만 나에게는 특히 재사용 할 수 없으며 충분히 유연하지 않습니다. 다행스럽게도 Mixins를 사용하여 문제를 해결할 수 있습니다. 내가 무슨 뜻인지 봅시다.

위의 코드는 세 가지 유형의 색 구성표를 만듭니다. 처음 두 개는 같은 구조를 가지고 있고 개별적인 설명이 필요하지 않기 때문에 마지막 것만 설명하겠습니다.

..quad () mixin은 세 가지 매개 변수를 사용합니다. 첫 번째는 체계의 기본 색상을 설정합니다. 두 번째는 믹스 인에게 어떤 색 변형을 반환 할 것인지 알려줍니다. 세 번째는 코드를 적게 컴파일 할 때 사용할 CSS 속성을 정의합니다. Mixin의 본문 내부에서 Spin () 함수는 쿼드 체계에서 사용 가능한 세 가지 색상 변형을 생성 한 다음 이러한 변형을 목록에 넣습니다. 추출물 () 함수는 두 번째 매개 변수에 정의 된 원하는 변형을 가져옵니다. 마지막으로, 가변 보간의 도움으로 색상 변형은 정의 된 CSS 속성에 할당됩니다.

이제 위의 코드를 Color_Schemes라는 별도의 파일에 넣고 다음과 같이 사용할 수 있습니다.

여기서는 색 구성표로 파일을 가져온 다음 웹 사이트 또는 응용 프로그램의 기본 색상을 정의합니다. DIV 규칙 세트의 마지막 3 줄은 테두리 색상, 색상 및 배경색 특성의 색상을 정의합니다. 보시다시피, 믹스 인은 예상 값이 색상 인 속성과 함께 사용할 수 있습니다. 게다가, 특정 진술이 어떤 속성을 사용하는지 쉽게 알 수 있습니다. 끝을 살펴보십시오. 붐은 알고 있습니다. 예를 들어, 마지막 문서에서 쿼드 체계의 첫 번째 색상 변형이 배경색 속성의 값으로 사용됨을 분명히 알 수 있습니다. 꽤 멋져요, 응?

그리고 여기에 컴파일 된 출력이 있습니다 :

Codepen에서 sitepoint (@sitepoint)의 xwxmep 펜을 참조하십시오 컬러 팔레트 생성 이 섹션에서는 다양한 유형의 색상 팔레트를 만드는 방법을 보여 드리겠습니다. 이를 위해 덜 특이한 루프와 조건부 진술 (Mixin Guards)을 사용하겠습니다. 해당 구성에 익숙하지 않은 경우이 주제에 대한 이전 기사를 간단히 살펴볼 수 있습니다.

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

첫 번째 예에서는 컬러 테이블을 생성하는 믹스 인을 만들겠습니다. 컬러 피커를 사용 했습니까? 그래서, 당신은 내가 무슨 뜻인지 알았습니다.

.Color-Palette () Mixin은 세 가지 실제 인수를 취합니다. 첫 번째는 팔레트의 기본 색상을 정의합니다. 두 번째는 얼마나 많은 견본을 생성 할 수 있는지 정의합니다. 그리고 세 번째는 spin () 함수에 필요한 스핀 단계를 설정합니다. 실제로, 하나 더 논쟁이 있습니다 : @index. 그러나 루프가 작동하는 데 내부적으로 만 사용됩니다. 위의 코드에서 설정된대로 루프는 코드를 통해 25 번 반복하여 25 개의 CSS 클래스 (각 견본마다 하나씩)를 만듭니다. 각 클래스 이름은 .swatch- [number] 패턴 (예 : .watch-1)에 따라 구성됩니다. 각 견본의 색상은 스핀 단계에 의해 현재 인덱스의 곱셈에서 파생 된 값을 사용하여 생성됩니다. 해당 값은 루프의 각 반복에 대한 기본 색상의 값에 추가됩니다. 이것은 동일한 색상으로 시작하고 끝나는 풀 컬러 스펙트럼을 생성합니다 (우리의 경우 빨간색). 여기에 컴파일 된 출력이 있습니다 :

Codepen에서 sitepoint (@sitepoint)에 의해 적은 색상 팔레트를 생성하는 펜을 참조하십시오. 이 믹스 인은 모든 종류의 컬러 테이블을 만드는 데 사용될 수 있으며, 많은 수의 견본과 더 크거나 작은 스핀 단계가 있습니다. 예를 들어, 스핀 단계가 90 도인 4 개의 견본 만 생성 할 수 있으며, 이는 제곱 색 구성표에 대한 견본을 생성합니다. 당신은 끝없는 가능성이 있습니다. 그냥 가서 자신의 실험을하십시오.

다음 예에서는 특정 색상의 색조와 음영을 생성하는 믹스 인을 만듭니다. Wikipedia에 따르면 :

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

색조는 흰색과 색상의 혼합물로 가벼움을 증가시키고 그늘은 검은 색과 검은 색의 혼합물로 가벼움을 줄입니다.

우리가 1 분 안에 볼 수 있듯이 Less 's Lighten () 및 Darken () 내장 함수의 도움으로 색조와 색조를 쉽게 만들 수 있습니다.

두 경우 모두의 배경색은 각각 정의 된 기본 색상과 현재 색인을 10 % 곱한 Lighten () 또는 Darken () 함수에 의해 생성됩니다. 상대 매개 변수에주의하십시오. 조정이 현재 값과 관련이 있도록 포함하는 것이 중요합니다.

참고 : 두 믹스 인이 하나의 이름과 같은 이름을 공유한다고 걱정하지 마십시오. 패턴 매칭 기능 덕분에 어느 것이 사용해야하는지 알 수 있습니다. 여기에 컴파일 된 출력이 있습니다 :

Codepen에서 sitepoint (@sitepoint)에 의해 적은 색상 견본을 생성하는 펜을 참조하십시오.

요약 색상과 적은 수의 색상 기능으로 할 수있는 다른 많은 것들이 있습니다. 하지만 이봐, 당신은 10,000 단어 튜토리얼을 원하지 않습니까? 주어진 예제는 당신을 시작하고 당신에게 가용 가능성에 대한 개요를 제공하기에 충분합니다. 더 깊이 다이빙하고 실험을 계속하는 것은 당신에게 달려 있습니다. 덜 코딩하는 행복!

가 적은 컬러 연금술에 대해 자주 묻는 질문 적은 색상 연금술이 적고 어떻게 작동 하는가?

적은 컬러 연금술은 동적 사전 처리기 스타일 시트 언어를 사용하여 색 구성표와 팔레트를 생성하는 방법입니다. 이를 통해 변수, 믹스 인, 기능 및 다른 많은 기술을 정의 할 수 있습니다. 더 적은 상태에서 기본 색상을 생성 한 다음 기능을 사용하여 색상을 밝히고 어두워지고 어두워지고, 포화되고, 불포화하고, 회전하고 혼합하여 웹 사이트 나 응용 프로그램에 조화로운 색 구성표를 만듭니다. 덜 사용하는 색 구성표?

덜 사용하여 색 구성표를 작성하려면 기본 색상을 정의한 다음 적은 기능을 사용하여 해당 색상의 변형을 만듭니다. 예를 들어, Lighten and Darken 기능을 사용하여 기본 색상의 더 가볍고 어두운 색조를 만들 수 있습니다. 또한 포화 및 불포화 기능을 사용하여 색상의 강도와 스핀 기능을 조정하여 상보적인 색상을 생성 할 수 있습니다. 이러한 기능을 결합하면 광범위한 색 구성표를 만들 수 있습니다. 색상 연금술에 덜 사용하면 어떤 이점이 있습니까?

덜 컬러 연금술에 대한 몇 가지 이점을 제공합니다. 일관되고 조화로운 색 구성표를 만들 수 있으며 웹 사이트 나 응용 프로그램의 시각적 매력을 향상시킬 수 있습니다. 또한 기본 색상을 변경할 수 있으므로 나머지 색상이 자동으로 업데이트되므로 색 구성표를 쉽게 조정할 수 있습니다. 또한 덜 확장 가능하고 재사용 가능한 색 구성표를 만들 수 있으므로 장기적으로 시간과 노력을 절약 할 수 있습니다.

컬러 연금술에 대한 다른 CSS 전 처리기와 비교할 때 어떻게 덜 > 색 구성표를 만드는 능력 측면에서 SASS와 같은 다른 CSS 전 처리기와 유사합니다. 그러나 더 간단한 구문이 적고 배우기가 더 쉽기 때문에 초보자에게 좋은 선택이됩니다. 또한 색상 조작에 대한 강력한 기능 세트가있어 색상 구성표를 더 많이 제어 할 수 있습니다.

인쇄 디자인에 적은 색상 연금술을 사용할 수 있습니까?

주로 적은 반면 주로. 웹 디자인에 사용되며 인쇄 디자인에도 사용할 수도 있습니다. 덜 사용하여 색 구성표를 작성한 다음 인쇄 설계 소프트웨어에서 사용할 수있는 CSS 파일로 내보낼 수 있습니다. 그러나 색상 공간의 차이로 인해 화면과 인쇄물에 색상이 다르게 나타날 수 있습니다.

컬러 연금술에 대해 더 많이 배울 수 있습니까? 온라인으로 컬러 연금술에 대한 자세한 내용은 적은 컬러 연금술에 대해 알아보십시오. 공식 덜 문서를 읽는 것으로 시작하여 언어와 그 기능에 대한 포괄적 인 개요를 제공합니다. 또한 색 구성표를 적게 만드는 과정을 안내 할 수있는 많은 튜토리얼과 가이드도 있습니다. 모바일 앱 디자인에 적은 컬러 연금술을 사용할 수 있습니까?

예, 모바일 앱 디자인에는 적은 색상 연금술을 사용할 수 있습니다. 덜 사용하면 모바일 앱을 포함하여 다양한 플랫폼에서 사용할 수있는 일관된 색 구성표를 만들 수 있습니다. 이것은 모든 플랫폼에서 일관된 사용자 경험을 보장하는 데 도움이 될 수 있습니다.

컬러 연금술에 적은 사용에 필요한 도구는 무엇입니까?

색상 연금술에 적은 사용을 덜 사용하려면 텍스트 편집기가 필요합니다. 적은 코드와 적은 컴파일러를 작성하여 코드가 적은 코드를 CSS로 컴파일하십시오. 무료 및 유료 텍스트 편집기가 많고 사용 가능한 컴파일러가 적으므로 귀하의 요구와 선호도에 가장 적합한 것을 선택할 수 있습니다.

색상이 적은 경우 색상 연금술을 사용할 수 있습니까? 예, 컬러 블라인드하더라도 색상 연금술을 적게 사용할 수 있습니다. 수학적 기능을 기반으로 색 구성표를 만들 수 있으므로 색상 인식에 의존 할 필요가 없습니다. 그러나 다른 사용자가 시각적으로 매력적으로 호소하고 액세스 할 수 있도록 다른 사람들로부터 피드백을 받고 싶을 수도 있습니다.

색상 체계가 적은 문제를 해결할 수있는 방법은 무엇입니까? 덜 색 구성표에 문제가있는 경우 몇 가지 단계가 있습니다. 먼저, 더 적은 코드에서 오류를 확인하십시오. 코드가 올바른 경우 기본 색상 또는 기능의 매개 변수를 조정해보십시오. 여전히 문제가있는 경우 커뮤니티 또는 전문 웹 디자이너의 도움을 구하는 것을 고려하십시오.

위 내용은 적은 색상 연금술 : 색 구성표와 팔레트 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!