[func] SCSS - Color Functions (색상/색깔 함수) 종류

목차

Color 설정 함수

1. rgb() 함수 - 빨강/녹색/파랑
2. rgba() 함수 - 빨강/녹색/파랑/불투명도
3. hsl() 함수 - 색조/채도/밝기
4. hsla() 함수 -  색조.채도/밝기/불투명도
5. grayscale() 함수 - 회색
6. complement() 함수 - 보완색
7. invert() 함수 - 반대색(음수색) 

---

Color 얻기 함수

1. red() 함수 - RGB 빨강값 반환
2. green() 함수 -RGB 녹색값 반환
3. blue() 함수 - RGB 파랑값 반환
4. hue() 함수 - HSL 색조값 반환
5. saturation() 함수 - HSL 채도값 반환
6. lightness() 함수 - HSL 명도값 반환
7. alpha() 함수 - 불투명도 반환
8. opacity() 함수 - 불투명도 반환 

---

Color 제어 함수

1. mix() 함수 - 색깔 혼합
2. adjust-hue() 함수 - 색조 조정
3. adjust-color() 함수 - 색깔 매개변수 양 조정
4. change-color() 함수 - 색상 매개변수 새 값 설정
5. scale-color() 함수 - 색상 매개변수 조정
6. rgba() 함수 - 불투명도 조절한 색깔 생성
7. lighten() 함수 - 명도 높은 색깔 생성
8. darken() 함수 - 명도 낮은 색깔 생성
9. saturate() 함수 - 채도 높은 색깔 색성
10. desaturate() 함수 - 채도 낮은 색깔 생성
11. opacify() 함수 - 더 불투명한 색깔 생성
12. fade-in(() 함수 - 더 불투명한 색깔 생성
13. transparentize() 함수 - 더 투명한 색깔 생성
14. fade-out() 함수 - 더 투명한 색깔 생성 

※ 색깔 (설정/얻기/제어) 3종류.

Color 설정 함수

rgb() 함수 - 빨강/녹색/파랑

 

rgb(red, green, blue)

Red-Green-Blue (RGB) 모델 사용해 색깔 설정.

각 매개변수는 0~255 정수 또는, 0~100% 숫자로 색상 강도 표현.

자세히 보기

(예제)

rgb(0, 0, 255); // blue

 

---

rgba() 함수 - 빨강/녹색/파랑/불투명도

 

rgba(red, green, blue, alpha)

Red-Green-Blue-Alpha (RGBA) 모델 사용해 색깔 설정.
RGB 모델에 alpha (불투명도) 매개변수를 추가.

alpha 매개변수 범위 : 0.0 (완전 투명) ~ 1.0 (완전 불투명)

자세히 보기

(예제)

rgba(0, 0, 255, 0.3); 

 

---

hsl() 함수 - 색조/채도/밝기

 

hsl(hue, saturation, lightness) 

색조,채도,밝기 모델 (= HSL) 사용해 색상 정의.

Hue : 색상. (0 ~ 360 정수)

Saturation : 채도 (0 ~ 100%)
Lightness : 명도 (0 ~ 100%)

자세히 보기

(예제)

hsl(120, 100%, 50%); // green

hsl(120, 100%, 75%); // light green

hsl(120, 100%, 25%); // dark green

hsl(120, 60%, 70%); // pastel green

 

---

hsla() 함수 -  색조.채도/밝기/불투명도

 

hsla(hue, saturation, lightness, alpha) 

HSLA (Hue-Saturation-Lightness-Alpha) 모델 사용해 색상 정의.

HSL 모델에 Alpha (불투명도) 매개변수 추가.

Alpha :불투명도. (0.0 완전 투명 ~ 1.0 완전 불투명)

자세히 보기

(예제)

hsl(120, 100%, 50%, 0.3); // green with opacity

hsl(120, 100%, 75%, 0.3); // light green with opacity

 

---

grayscale() 함수 - 회색

 

grayscale(color)

색상과 동일한 밝기로 회색 설정.

(예제)

grayscale(#7fffd4);

Result: #c6c6c6

 

---

complement() 함수 - 보완색

 

complement(color)

색깔의 보완색 설정.

(예제)

complement(#7fffd4);

Result: #ff7faa

 

---

invert() 함수 - 반대색(음수색)

 

invert(color, weight)

색의 반대색 또는 음수색을 설정. 

weight 매개변수는 선택사항이며 0~100%  숫자 취함. (기본값: 100%).

(예제)

invert(white);

Result: black

 

Color 얻기 함수

red() 함수 - RGB 빨강값 반환

 

red(color)

색깔의 RGB red (빨간색) 값을 0 ~ 255 숫자로 반환.

(예제)

red(#7fffd4);

Result: 127

red(red);

Result: 255

 

---

green() 함수 -RGB 녹색값 반환

 

green(color)

색깔의 RGB green (녹색) 값을 0 ~ 255 숫자로 반환.

(예제)

green(#7fffd4);

Result: 255

green(blue);

Result: 0

 

---

blue() 함수 - RGB 파랑값 반환

 

blue(color)

색깔의 RGB blue (파란색) 값을 0 ~ 255 숫자로 반환.

(예제)

blue(#7fffd4);

Result: 212

blue(blue);

Result: 255

 

---

hue() 함수 - HSL 색조값 반환

 

hue(color)

색깔의 HSL hue (색조)값을 0 ~ 255deg 숫자로 반환.

(예제)

hue(#7fffd4);

Result: 160deg

 

---

saturation() 함수 - HSL 채도값 반환

 

saturation(color)

색깔의 HSL saturation (채도)값을 0~100% 숫자로 반환.

(예제)

saturation(#7fffd4);

Result: 100%

 

---

lightness() 함수 - HSL 명도값 반환

 

lightness(color)

색깔의 HSL lightness (명도)값을 0~100% 숫자로 반환.

(예제)

lightness(#7fffd4);

Result: 74.9%

 

---

alpha() 함수 - 불투명도 반환

 

alpha(color)

색깔의 alpha (불투명도)를 0 ~ 1 숫자로 반환.

(예제)

alpha(#7fffd4);

Result: 1

 

---

opacity() 함수 - 불투명도 반환

 

opacity(color)

색깔의 alpha (불투명도)를 0 ~ 1 숫자로 반환.

(예제)

opacity(rgba(127, 255, 212, 0.5);

Result: 0.5

 

Color 제어 함수

mix() 함수 - 색깔 혼합

 

mix(color1, color2, weight)

color1과 color2가 혼합된 색깔 생성. 

weight (가중치) : 0% ~ 100% 숫자. (기본값: 50%)
weight 커질수록 color1 비중 증대.

weight 작을수록 color2 비중 증대.

---

adjust-hue() 함수 - 색조 조정

 

adjust-hue(color, degrees)

-360deg ~ 360deg까지 색상의 색조를 조정.

(예제)

adjust-hue(#7fffd4, 80deg);

Result: #8080ff

 

---

adjust-color() 함수 - 색깔 매개변수 양 조정

 

adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

지정된 양으로 하나 이상의 매개 변수를 조정.  기존 색상 값에서 지정된 양을 더하거나 뺌.

(예제)

adjust-color(#7fffd4, blue: 25);

Result:

 

---

change-color() 함수 - 색상 매개변수 새 값 설정

 

change-color(color, red, green, blue, hue, saturation, lightness, alpha)

하나 이상의 색상 매개 변수를 새 값으로 설정.

(예제)

change-color(#7fffd4, red: 255);

Result: #ffffd4

 

---

scale-color() 함수 - 색상 매개변수 조정

 

scale-color(color, red, green, blue,  saturation, lightness, alpha)

하나 이상의 색상 매개변수를 조정.

 

---

rgba() 함수 - 불투명도 조절한 색깔 생성

 

rgba(color, alpha)

지정된 alpha (불투명도) 갖는 새로운 색깔 생성.

(예제)

rgba(#7fffd4, 30%);

Result: rgba(127, 255, 212, 0.3)

 

---

lighten() 함수 - 명도 높은 색깔 생성

 

lighten(color, amount)

0 ~ 100 % 사이의 amount (양)으로 더 밝은 색의 색상을 생성. amount 매개변수는 HSL 명도를 그 백분율만큼 증가시킴.

 

---

darken() 함수 - 명도 낮은 색깔 생성

 

darken(color, amount)

0 ~ 100 % 사이의 amount (양)으로 더 어두운 색의 색상을 생성. amount 매개변수는 HSL 명도를 그 백분율만큼 감소시킴.

 

---

saturate() 함수 - 채도 높은 색깔 색성

 

saturate(color, amount)

0 ~ 100 % 사이의 amount (양)으로 더 채도가 높은 색을 생성. amount 매개변수는 HSL 채도를 그 백분율만큼 증가시킴.

 

---

desaturate() 함수 - 채도 낮은 색깔 생성

 

desaturate(color, amount)

0 ~ 100 % 사이의 amount (양)으로 더 채도가 낮은 색을 생성. amount 매개변수는 HSL 채도를 그 백분율만큼 감소시킴.

---

opacify() 함수 - 더 불투명한 색깔 생성

 

opacify(color, amount)

0 ~ 1 사이의 amount (양)으로 더 불투명한 색을 생성. 

해당 amount 만큼  opaque (불투명도) 증가시킴.

 

---

fade-in(() 함수 - 더 불투명한 색깔 생성

 

fade-in(color, amount) 

0 ~ 1 사이의 amount (양)으로 더 불투명한 색을 생성.

해당 amount 만큼  opaque (불투명도) 증가시킴.

 

---

transparentize() 함수 - 더 투명한 색깔 생성

 

transparentize(color, amount)

0 ~ 1 사이의 amount (양)으로 더 투명한 색을 생성.

해당 amount 만큼  opaque (불투명도) 감소시킴.

 

---

fade-out() 함수 - 더 투명한 색깔 생성

 

fade-out(color, amount) 

0 ~ 1 사이의 amount (양)으로 더 투명한 색을 생성.

해당 amount 만큼  opaque (불투명도) 감소시킴.

 

PS.

SASS color 함수

http://staging.sass-lang.com/documentation/functions/color