화면에 색상이 튀는 경우 코딩으로 수행하는 몇 가지 방법이 있습니다. 16진수, RGBA 및 HSLA는 가장 일반적으로 사용되는 세 가지 색상 코드 시스템입니다.
과거에 16진수 코드와 RGB를 접했을 수 있지만 HSL은 사람이 더 읽기 쉽게 되었음에도 불구하고 아직 레이더에 없었을 수 있습니다. 색상을 기록하는 모든 방법은 다양한 상황에서 의미가 있으며 정보에 입각한 결정을 내리기 위해 각 유형에 대한 기본적인 이해만 있으면 됩니다. 여기에서는 RGB, HEX 및 HSL의 차이점에 대해 설명합니다.
RGB(빨간색, 녹색, 파란색)란 무엇입니까
Red 이후 RGB 값으로 시작하는 것이 합리적입니다. , 녹색 , 및 파란색 화면에서 거의 모든 다른 색상을 생성하는 데 사용할 수 있는 세 가지 색상입니다. "가산 색상 혼합"을 사용하여 이 작업을 수행하지만 RGB를 이해하기 위해 과학을 탐구할 필요는 없습니다.
rgb(255, 0, 0) R이 최대값이기 때문에 빨간색입니다. G 또는 B를 255로 설정하면 완전한 녹색 또는 완전한 파란색이 됩니다. 한 번에 모두 255로 설정하면 흰색(모든 색상의 합)이 되고 0으로 설정하면 검정색이 렌더링됩니다. 네 번째 값(0에서 1 사이의 알파 채널)을 추가하면 투명도를 얻을 수도 있습니다. rgba(0, 0, 0, .5) 반투명 검정으로 변환됩니다.
간단하지만 실제로는 그렇게 직관적이지 않습니다. RGB 균형은 색상 음영만 변경하더라도 상당히 변경될 수 있으므로 일종의 RGB 생성기(다행히 많이 있음) 없이 인간이 수동 조정을 수행하는 것은 매우 어렵습니다.
16진수 색상 코드란 무엇입니까
16진수는 RGB 값을 쓰는 다른 방법일 뿐입니다. #6a79f7와 같은 것 (수레국화 파란색) rgb(106, 121, 247)에 직접 매핑 . 6a는 빨간색입니다. , 79는 녹색입니다. , f7은 파란색입니다. .
먼저, 16진수 색상 시스템에서 문자 "a-f"는 10에서 15까지의 숫자를 나타냅니다. 둘째, 16진수입니다. , 모든 것이 16진법에 있음을 의미합니다. 21은 2 * 10 + 1입니다. 10진법이지만 16진법에서는 2 * 16 + 1이 됩니다. . 첫 번째 숫자에 16을 곱하고 두 번째 숫자를 더하기만 하면 됩니다. 그만큼 쉽습니다! 6a = 6 * 16 + 10 또는 106. 79 = 7 * 16 + 9 또는 121.
수학은 재미있지만 16진수 코드는 RGB보다 인간에게 훨씬 더 고통스럽습니다. 하지만 복사하여 붙여넣기가 쉽고 기억에 남는 문자/숫자 조합을 가질 수 있습니다.
#806a79f7과 같이 시작 부분에 255의 일정 비율에 해당하는 값을 넣어 16진수 코드에 투명도를 추가할 수도 있습니다. . 16진수의 80 =126으로 최대값 255의 50%에 가깝습니다.
HSL(색조, 채도, 밝기)이란 무엇입니까?
HSL은 사람의 가독성을 고려하여 설계되었으며 특히 RGB 대안으로 인기를 얻고 있습니다. 다음과 같이 작동합니다.
색조 색상을 의미하고 색상환의 각도를 사용하여 현재 색상을 알려줍니다. 색상환과 이러한 주요 색상의 위치를 알고 있다면 잠시만 생각해도 45는 주황색으로, 270은 자주색으로 보일 것임을 알 수 있을 것입니다.
- 0 =빨간색
- 60 =노란색
- 120 =녹색
- 180 =청록색
- 240 =파란색
- 300 =마젠타색
채도 기본적으로 색상이 얼마나 다채로운지입니다. 0% 채도는 색상이 회색 음영임을 의미하고 100%는 최대 강도를 나타냄을 의미합니다. 색상을 음소거하거나 조금 더 돋보이게 하려면 이 값을 변경하면 됩니다.
가벼움 색상이 얼마나 어둡거나 밝은지 알려줍니다. 밝기가 0%이면 색조 또는 채도 설정에 관계없이 색상이 검정색이 되고 밝기가 100%이면 흰색이 됩니다. 짐작하셨겠지만 50%가 가장 정확한 색상을 제공합니다.
해당 정보를 통해 hsl(0, 100%, 50%)이 무엇인지 즉시 알 수 있어야 합니다. 수단. 그냥 빨간색이야! 더 어둡고 풍부한 빨간색을 원하십니까? 0, 70%, 40%를 사용해 보세요. . 어쩌면 당신은 그것을 원하지만 파란색으로? 0을 240으로 변경하면 됩니다! 투명도도 있습니다. RGB처럼 작동합니다. hsla(240, 70%, 40%, .5)와 같이 네 번째 값(0과 1 사이)을 추가하면 됩니다. .
HSV/HSB 및 HSI
뭐라고요? 더 많은 색상 모델? 언제 끝나나요? 컴퓨터에서 색상 작업을 하는 대부분의 사람들에게는 이미 끝났습니다. 16진수, RGB 및 HSL은 색상을 표기하는 가장 일반적인 방법입니다. 그러나 그래픽 디자인이나 이미지에 대한 머신 러닝과 같이 많은 이미지와 색상이 관련된 분야에 있는 경우 더 난해한 색상 모델 중 하나 또는 여기에 나열되지 않은 다른 모델 중 하나를 사용하는 사람들과 마주칠 수 있습니다.
HSB는 "Hue Saturation Brightness"를 나타내고 HSV는 Hue Saturation Value를 나타냅니다. 실제로는 동일한 모델의 다른 이름일 뿐이며 HSL과의 가장 큰 차이점은 채도를 정의하는 방법에 있습니다. HSI(Hue Saturation Intensity)는 HSB/HSV와 약간의 차이가 있지만 널리 사용되지는 않으므로 야생에서 많이 볼 수 없을 것입니다.
어떤 색상 모델을 사용해야 하나요?
일반적으로 색상 모델을 선택하는 것은 상당히 사소한 디자인 결정이지만 많은 작은 결정으로 좋은 것이 만들어집니다. 일반적으로 16진수 코드는 복사하여 붙여넣기를 쉽게 하고 사람이 별로 관여하지 않을 상황에서 유용합니다. RGB/RGBA는 가독성이 좋으며 사람이 때때로 투명도를 조정할 수 있다면 좋을 때 가장 잘 사용됩니다. 사람이 수동으로 색상을 변경해야 하는 경우 HSL/HSLA를 사용하십시오. 그 외에는 HSL 팀의 사람들이 더 똑똑하고 잘 생긴 경향이 있지만 선호도의 문제입니다.