w3.css
공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자.
색상 함수
Sass의 색상 함수를 세 부분으로 나눠서 알아보자. 색상 설정 함수, 색상 가져오기 함수, 색상 조작 함수다.
색상 설정 기능
| 기능 | 설명 | 예시 |
|---|---|---|
| rgb(빨강, 초록, 파랑) | 빨강-초록-파랑 (RGB) 모델을 사용하여 색상을 설정한다. RGB 색상 값은 다음과 같이 지정된다: rgb(빨강, 초록, 파랑). 각 매개변수는 해당 색상의 강도를 정의하며 0에서 255 사이의 정수 또는 백분율 값(0%에서 100%)이 될 수 있다. | rgb(0, 0, 255); // 파란색 매개 변수가 가장 높은 값(255)으로 설정되어 있고 다른 매개 변수는 0으로 설정되어 있기 때문에 파란색으로 렌더링된다. |
| rgba(빨강, 초록, 파랑, 알파) | RGBA(빨강-초록-파랑-알파) 모델을 사용하여 색상을 설정한다. RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널이 있는 RGB 색상 값의 확장이다. 알파 매개변수는 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자다. | rgba(0, 0, 255, 0.3); // 불투명도가 있는 파란색으로 렌더링 |
| hsl(색조, 채도, 밝기) | 색조-채도-명도(HSL) 모델을 사용하여 색상을 설정하며 색상을 원통형 좌표로 표현한다. 색조는 색상환의 각도(0~360)로 0 또는 360은 빨강, 120은 초록, 240은 파랑이다. 채도는 백분율 값으로, 0%는 회색 음영을 의미하고 100%는 전체 색상을 나타낸다. 명도 역시 백분율 값으로 0%는 검정, 100%는 흰색이다. | hsl(120, 100%, 50%); // 초록 hsl(120, 100%, 75%); // 연한 초록 hsl(120, 100%, 25%); // 짙은 초록 hsl(120, 60%, 70%); // 파스텔 초록 |
| hsla(색조, 채도, 밝기, 알파) | 색조-채도-명도-알파(HSLA) 모델을 사용하여 색상을 설정한다. HSLA 색상 값은 색상의 불투명도를 지정하는 알파 채널이 있는 HSL 색상 값의 확장이다. 알파 매개변수는 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자다. | hsl(120, 100%, 50%, 0.3); // 불투명도가 있는 초록 hsl(120, 100%, 75%, 0.3); // 불투명도가 있는 연한 초록 |
| grayscale(색상) | 색상과 동일한 밝기의 회색을 설정한다. | grayscale(#7fffd4); 결과: #c6c6c6 |
| complement(색상) | 색상의 보색인 색상을 설정한다. | complement(#7fffd4); 결과: #ff7faa |
| invert(색상, 가중치) | 색의 역색 또는 음의 색을 설정한다. 가중치 매개변수는 선택 사항이며 0%에서 100% 사이의 숫자여야 한다. 기본값은 100%다. | invert(white); 결과: black |
색상 가져오기 함수
| 기능 | 설명 | 예시 |
|---|---|---|
| red(색상) | 색상의 빨강 값을 0에서 255 사이의 숫자로 반환한다. | red(#7fffd4); 결과: 127 red(red); 결과: 255 |
| green(색상) | 색상의 초록 값을 0에서 255 사이의 숫자로 반환한다. | green(#7fffd4); 결과: 255 green(blue); 결과: 0 |
| blue(색상) | 색상의 파랑 값을 0에서 255 사이의 숫자로 반환한다. | blue(#7fffd4); 결과: 212 blue(blue); 결과: 255 |
| hue(색상) | 색상의 색조를 0도부터 360도 사이의 숫자로 반환한다. | hue(#7fffd4); 결과: 160deg |
| saturation(색상) | 색상의 HSL 채도를 0%에서 100% 사이의 숫자로 반환한다. | saturation(#7fffd4); 결과: 100% |
| lightness(색상) | 색상의 HSL 밝기를 0%에서 100% 사이의 숫자로 반환한다. | lightness(#7fffd4); 결과: 74.9% |
| alpha(색상) | 색상의 알파 채널을 0에서 1 사이의 숫자로 반환한다. | alpha(#7fffd4); 결과: 1 |
| opacity(색상) | 색상의 알파 채널을 0에서 1 사이의 숫자로 반환한다. | opacity(rgba(127, 255, 212, 0.5)); 결과: 0.5 |
색상 조작 함수
| 기능 | 설명 | 예시 |
|---|---|---|
| mix(색상1, 색상2, 가중치) | 색상1과 색상2가 혼합된 색상을 생성한다. 가중치 매개변수는 0%에서 100% 사이여야 한다. 가중치가 클수록 색상1을 더 많이 사용해야 한다. 가중치가 작을수록 색상2를 더 많이 사용해야 한다. 기본값은 50%다. | |
| adjust-hue(색상, 각도) | 색상의 색조를 -360도부터 360도까지 조정한다. | adjust-hue(#7fffd4, 80deg); 결과: #8080ff |
| adjust-색상(색상, 빨강, 초록, 파랑, 색조, 채도, 밝기, 알파) | 하나 이상의 매개변수를 지정된 양만큼 조정한다. 이 함수는 기존 색상 값에서 지정한 양을 더하거나 뺀다. | adjust-색상(#7fffd4, blue: 25); 결과: |
| change-색상(색상, 빨강, 초록, 파랑,색조, 채도, 밝기, 알파) | 하나 이상의 색상 매개변수를 새 값으로 설정한다. | change-색상(#7fffd4, red: 255); 결과: #ffffd4 |
| scale-색상(색상, 빨강, 초록, 파랑, 채도, 밝기, 알파) | 하나 이상의 색상 매개변수 배율을 조정한다. | |
| rgba(색상, 알파) | 주어진 알파 채널로 새로운 색상을 생성한다. | rgba(#7fffd4, 30%); 결과: rgba(127, 255, 212, 0.3) |
| lighten(색상, 양) | 0%에서 100% 사이의 양으로 더 밝은 색상을 만든다. 양 매개 변수는 HSL 밝기를 해당 비율만큼 증가시킨다. | |
| darken(색상, 양) | 0%에서 100% 사이의 양으로 더 어두운 색상을 만든다. 양 매개 변수는 HSL 밝기를 해당 비율만큼 감소시킨다. | |
| saturate(색상, 양) | 0%에서 100% 사이의 양으로 채도가 높은 색상을 만든다. 양 매개 변수는 HSL 채도를 해당 비율만큼 증가시킨다. | |
| desaturate(색상, 양) | 0%에서 100% 사이의 양으로 채도가 낮은 색상을 만든다. 양 매개 변수는 HSL 채도를 해당 비율만큼 감소시킨다. | |
| opacify(색상, 양) | 0에서 1 사이의 양으로 불투명한 색상을 만든다. 양 매개 변수는 알파 채널을 해당 양만큼 증가시킨다. | |
| fade-in(색상, 양) | 0에서 1 사이의 양으로 불투명한 색상을 만든다. 양 매개 변수는 알파 채널을 해당 양만큼 증가시킨다. | |
| transparentize(색상, 양) | 0에서 1 사이의 양으로 보다 투명한 색상을 만든다. 양 매개 변수는 알파 채널을 해당 양만큼 감소시킨다. | |
| fade-out(색상, 양) | 0에서 1 사이의 양으로 보다 투명한 색상을 만든다. 양 매개 변수는 알파 채널을 해당 양만큼 감소시킨다. |
참고
W3C School - Sass Color Functions
Sass - Sass Basics
