[SCSS] Color 내장함수(built-in function)를 사용하여 컬러 변환하기
내장함수를 사용하면 따로 함수를 작성하거나 별도의 라이브러리 없이 바로 다양한 함수를 사용할 있습니다. 이번 포스트에서는 Sass의 다양한 컬러 내장 함수 중에서 작업에 적용할 수 있을 만한 함수들만 예시와 함께 알아보겠습니다.
새 모듈 시스템 color내장함수를 사용하기 위해서는 먼저 @use “sass:color”; 를 써서 내장함수를 불러와야 합니다. 각 내장 함수별 사용 가능한 파라미터는 w3 schools의 ‘Sass Set Color Functions’[1] 문서를 참조해 주세요.
color.adjust()
color.adjust()는 컬러의 속성 중에서 하나 이상의 컬러속성을 원하는 값만큼 조정해 주는 함수입니다. 먼저 기준이 되는 컬러를 입력하고, 조정할 항목과 조정할 값을 입력하면 됩니다.
조정할 값을 입력할 때는 몇 가지 유의해야 할 점이 있는데, 각 속성의 숫자 범위 내에서 값을 입력해야 하고 그 값을 벗어나면 에러가 납니다. 예를 들어서$red는 -255에서 255 범위 내에서 입력해야 하고, $saturation은 0% 에서 100% 범위 내에서 입력해야 합니다. RGB속성($red, $Green, $blue)과 HSL속성($hue , $saturation, $lightness )을 동시에 입력해도 에러가 납니다.
다음은 color.adjust()를 사용해서 컬러를 변환한 예제입니다.
See the Pen Sass: color.adjust() by 4pm (@4pm) on CodePen.
Original 박스의 $blue컬러가 오른쪽에 입력된 값에 따라 변환된 컬러로 나타납니다.
color.change()
color.change()는 하나 이상의 컬러속성을 원하는 값으로 바꿔주는(교체) 함수입니다. 먼저 기준 컬러값을 입력하고, 바꿀 컬러 속성 항목과 설정 값을 입력하면 됩니다.
See the Pen Sass: color.change() by 4pm (@4pm) on CodePen.
change()는 위의 코드예시와 같이 입력된 컬러의 속성값으로 교체됩니다.
color.scale()
color.scale()는 하나 이상의 컬러속성을 원하는 퍼센트만큼 조정해 주는 함수입니다. 모든 속성을 퍼센트로 조정하는 특성이 있습니다.
See the Pen Sass: color.scale() by 4pm (@4pm) on CodePen.
adjust(), change(), scale()의 차이점 비교
3가지의 컬러변환 함수에 대해 알아보았습니다. 언뜻 비슷해서 헷갈리기도 하는데요.
그 차이점이 무엇인지 다시 한번 확인해 보겠습니다.
color.adjust()는 기준컬러를 입력한 정확한 값(단위포함)만큼 조정해서 컬러를 변환합니다. 반면
color.change()는 기준컬러를 입력한 정확한 값(단위포함)으로 교체합니다. 즉 기존값에서 입력한 값만큼 더하거나 빼는 것이 아니라 입력한 값을 최종값으로 설정하는 것입니다.
color.scale()은 정확한 값이 아닌 기준컬러에서 퍼센트값만큼 조정하기 때문에 adjust보다는 조금 더 유동적으로 컬러가 변합니다. 또 한 가지 차이점은 scale에서는 adjust와 change와 달리 hue값은 조정할 수가 없습니다. Scale에 hue값을 인자로 넣으면 에러가 납니다.
비슷비슷한 것 같지만 차이점을 알고 있으면 용도별로 컬러변환을 적용하기에 편리할 것 같습니다.
mix()
color.mix()는 두 개의 컬러를 혼합하는 함수입니다. % 값을 입력하면 첫 번째 컬러를 더 큰 비율, 또는 더 작은 비율로 혼합할 수 있습니다.
See the Pen Sass: color.mix() by 4pm (@4pm) on CodePen.
위의 두 번째 예시에서 75%는 첫 번째 컬러가 75%, 두 번째 컬러가 그 나머지인 25% 비율로 혼합되는 것을 의미합니다. 세 번째 예시에서 25%는 첫 번째 컬러가 25%, 두 번째 컬러가 그 나머지인 75% 비율로 혼합되는 것을 의미합니다.
darken(), lighten(), saturate(), desaturate()
darken(), lighten(), saturate(), desaturate()는 0%에서 100%의 범위에서 해당 인자의 양만큼 명도와 채도를 증감시킵니다. scale이나 adjust에서는 마이너스값도 사용을 했지만 위의 4가지 함수에서는 마이너스값을 넣으면 에러가 납니다.
예를 들어 Lighten()의 경우 기준컬러의 밝기와 더해지는 밝기의 합이 100%를 넘으면 white가 됩니다. 더해지는 밝기가 0%라면 기준컬러에서 컬러의 변화가 없습니다. 어둡게 하려면 darken()을 사용하면 됩니다. scale()에서 $lightness를 사용했을 때와 비교해 보면 기존 컬러가 인자값만큼 더 밝거나 어두워지기 때문에 중간값에서 미묘한 차이가 있는 것 같습니다.
See the Pen Sass: darken() lighten() saturate() desaturate() by 4pm (@4pm) on CodePen.
grayscale()
grayscale()은 주어진 컬러를 grayscale로 변환합니다. 명도의 영향만 받기 때문에 다음 예시와 같이 saturate(채도)만 다른 경우에는 동일한 컬러를 반환합니다.
See the Pen Sass: grayscale() by 4pm (@4pm) on CodePen.
complement(), Invert() 차이점
complement()는 보색, Invert()는 반전색을 구하는 함수로 다음과 같이 유사한 컬러를 반환합니다.
반대되는 색을 구하는 것은 공통된 점이지만 컬러가 미세하게 다르다는 것을 확인할 수 있습니다. 그 이유는 보색과 반전색을 구하는 공식이 차이가 있기 때문이다. 이에 대한 자세한 설명을 stackoverflow[2]에서 찾아서 링크를 걸어두었으니 함께 참고하면 좋을 것 같습니다.
See the Pen Sass: color.complement() invert() by 4pm (@4pm) on CodePen.
opacify(), fade-in(), transparentize(), fade-out() 비교
opacify()와 fade-in()는 주어진 컬러의 알파값과 변화할 알파값을 더하기 해서 더욱 불투명하게 만듭니다. 반면 transparentize()와 fade-out()는 주어진 컬러의 알파값에서 변화할 알파값을 빼서 더욱 투명하게 만듭니다. opacify와 fade-in은 예시와 같이 동일한 컬러값을 반환합니다. transparentize와 fade-out도 동일한 컬러값을 반환합니다.
See the Pen Sass: opacify() fade-in() transparentize() fade-out() by 4pm (@4pm) on CodePen.
지금까지 Sass(SCSS) 컬러 내장함수를 사용하여 컬러를 변환하는 방법 및 각 함수의 차이점에 대해 예시코드와 함께 자세히 알아보았습니다.
1. “Sass Color Functions” www.w3schools.com. Retrieved 12 Aug 2023
2. “css - Difference between complement and invert in SASS? - Stack Overflow” stackoverflow.com. Retrieved 12 Aug 2023