JavaScript를 사용하여 RGB 색상의 채도 및 밝기를 조정

최근에 저는 Adam Wathan과 Steve Schroger의 작품에서 영감을 얻은 컬러 디자인 원칙을 탐구했습니다. 그들의 조언은 몇 가지 미적으로 유쾌한 육각 코드를 넘어 포괄적 인 색상 팔레트의 필요성을 강조합니다. 강력한 응용 분야를 구축하려면 다양한 수준의 밝기와 채도를 가진 수많은 그레이와 여러 기본 색상을 포함하는 더 넓은 범위가 필요합니다.

내 개발 워크 플로우에는 종종 16 진 코드 또는 RGB 색상이 포함되지만 조명 및 채도는 수동으로 조정하는 것이 번거 롭습니다. 이 과정을 간소화하고 일정한 컬러 피커 조정으로 인한 반복적 인 변형 손상을 방지하려면 색상을 효율적으로 조작하기위한 코드를 탐색하겠습니다.

HSL 값을 활용합니다

HSL (Hue, Pathation, Lightness)은 특히 수동 색상 조정이 예상 될 때 웹 색상을 정의하는 데 우수한 방법을 제공합니다. HSL은 색조를 숫자 (0-360), 채도 및 가벼움 백분율로 나타냅니다. 예를 들어:

 div {
  배경색 : HSL (155, 30%, 80%);
}

이것은 가볍고 음소거 된 민트 녹색을 생성합니다. 어두운 텍스트를 추가하고 일관성을 유지하려면 가벼움을 조정할 수 있습니다.

 div {
  배경색 : HSL (155, 30%, 80%);
  색상 : HSL (155, 30%, 5%);
}

이것은 배경과 조화를 이루는 어두운 텍스트를 만듭니다. 호출 문안 버튼의 경우 채도가 증가하고 약간 낮은 가벼움이 증가 할 수 있습니다.

 .call-to-Action {
  배경색 : HSL (155, 80%, 60%);
  색상 : HSL (155, 30%, 5%);
}

포화를 줄이고 밝기를 증가시켜 덜 중요한 텍스트를 더 강조 할 수 있습니다.

 div {
  배경색 : HSL (155, 30%, 80%);
  색상 : HSL (155, 30%, 5%);
}

.없는 {
  색상 : HSL (155, 15%, 40%);
}

HSL의 브라우저 호환성 및 선언적 특성으로 인해 RGB가 바람직합니다. 그러나 기존의 RGB 프로젝트 또는 레거시 브라우저 지원 문제는 대체 접근 방식을 필요로 할 수 있습니다.

컬러 라이브러리 사용

수많은 색상 조작 라이브러리는 HSL-to-RGB/Hex 변환을 단순화하고 고급 색 구성표 생성을 제공합니다. 주목할만한 예는 다음과 같습니다.

• Colvertize (Philipp Mildenberger) : 변환 및 조작 기능이있는 가벼운 라이브러리.
• 색상 (Josh Junon) : 색상 선언, 처리 및 추출을위한 유창한 인터페이스.
• TinyColor (Brian Grinstead) : 다양한 입력 유형을 처리하고 체계 생성 유틸리티를 제공합니다.

CSS- 트릭은 또한 색상 형식 변환에 대한 귀중한 리소스를 제공합니다.

컬러 그리드 도구

보다 대화식 접근 방식을 위해서는 색상 그리드 도구를 고려하십시오. 리팩토링 UI가 강조 하듯이 수학적 정밀도만으로도 최적의 컬러 팔레트를 보장하지는 않습니다. 내가 개발 한 반응 응용 프로그램 인 Color Grid는 선택한 색조를 기반으로 팔레트를 생성하여 채도와 가벼움의 100 가지 변형을 제공합니다. 사용자는 인터페이스에서 직접 16 진 코드 또는 CSS 사용자 정의 속성을 복사 할 수 있습니다.

RGB 색상 조작 기술

다음 기술은 RGB 색상 처리에 중점을 둡니다.

RGB 광도 결정

참고 : 이 방법은 색조의 고유 한 밝기를 설명하지 않습니다 (예 : 자주색보다 노란색의 높은 지각 된 밝기). 그것은 흑백 또는 흰색 혼합의 양을 측정합니다. 시각적 평가는 정확한 가벼움 판단에 중요합니다.

가벼움은 가장 높고 가장 낮은 RGB 값을 평균화 한 다음 255로 나누어 계산됩니다.

 함수 getlightnessofrgb (rgbstring) {
  const rgbintarray = (rgbstring.replace ( / / g, '') .slice (4, -1) .split ( ','). map (e => parseint (e));
  const high high = math.max (... rgbintarray);
  const lower = math.min (... rgbintarray);
  반환 (가장 높은 최저) / 2 / 255;
}

가벼움이나 색조에 영향을 미치지 않고 RGB를 포화시킵니다

포화 RGB는 과제를 제시합니다. 회색은 색조 정보가 부족하고 순수한 색조를 달성하려면 50% 가벼움이 필요합니다. 이 예는 가벼움을 유지합니다.

포화 시키려면 가장 낮은 RGB 값과 가장 높은 RGB 값의 차이를 증가시킵니다. 가벼움을 유지하려면 0-255 한계에 의해 제한되는 최고 및 최저 값의 동일한 증가/감소가 필요합니다. 사용 가능한 포화 범위는 다음과 같이 결정됩니다.

• 회색 (동일한 가벼움)과 255의 차이.
• 회색 (동일한 가벼움)과 0의 차이.

 // ... (위의 getlightnessofrgb 함수) ...

const grayval = getlightnessofrgb ( 'rgb (205, 228, 219)') * 255; // 217
const potationRange = math.round (Math.min (255 -Grayval, Grayval)); // 38

// ... (포화 계산의 나머지) ...

중간 값의 조정은 최고 및 최저 값의 변화에 ​​비례합니다. 완전한 포화 함수는 간결하게 관여하고 생략되지만 핵심 개념이 제시됩니다.

불포화 RGB 색상

불포화는 채도 과정을 뒤집어 회색 값으로 이동합니다. 완전한 불포화는 동일한 RGB 값을 가진 회색을 초래합니다. 부분 불포화는 가장 높은 RGB 값과 가장 낮은 RGB 값의 차이를 비례 적으로 감소시키는 것을 포함합니다. 완전한 불포화 기능도 간결하게 생략됩니다.

색조를 보존하는 동안 RGB가 번개 및 어두워집니다

번개는 RGB 값이 255로 비례 적으로 증가하는 반면, 어두워지는 것은 비례 적으로 0으로 감소합니다. 두 프로세스 모두 점차 포화를 감소시킵니다. 번개 및 어두워지기위한 완전한 기능은 간결하게 생략됩니다.

이러한 기능은 RGB 색상 조작의 기초를 제공합니다. 그러나 HSL, 컬러 라이브러리 및 컬러 그리드 도구는 요구 및 프로젝트 제약 조건에 따라 대안의 대안을 제공합니다.

위 내용은 JavaScript를 사용하여 RGB 색상의 채도 및 밝기를 조정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!