목차
Color 설정 함수
rgb() 함수 - 빨강/녹색/파랑
rgba() 함수 - 빨강/녹색/파랑/불투명도
hsl() 함수 - 색조/채도/밝기
hsla() 함수 - 색조.채도/밝기/불투명도
grayscale() 함수 - 회색
complement() 함수 - 보완색
invert() 함수 - 반대색(음수색)
Color 얻기 함수
red() 함수 - RGB 빨강값 반환
green() 함수 -RGB 녹색값 반환
blue() 함수 - RGB 파랑값 반환
hue() 함수 - HSL 색조값 반환
saturation() 함수 - HSL 채도값 반환
lightness() 함수 - HSL 명도값 반환
alpha() 함수 - 불투명도 반환
opacity() 함수 - 불투명도 반환
Color 제어 함수
mix() 함수 - 색깔 혼합
adjust-hue() 함수 - 색조 조정
adjust-color() 함수 - 색깔 매개변수 양 조정
change-color() 함수 - 색상 매개변수 새 값 설정
scale-color() 함수 - 색상 매개변수 조정
rgba() 함수 - 불투명도 조절한 색깔 생성
lighten() 함수 - 명도 높은 색깔 생성
darken() 함수 - 명도 낮은 색깔 생성
saturate() 함수 - 채도 높은 색깔 색성
desaturate() 함수 - 채도 낮은 색깔 생성
opacify() 함수 - 더 불투명한 색깔 생성
fade-in(() 함수 - 더 불투명한 색깔 생성
transparentize() 함수 - 더 투명한 색깔 생성
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
주소 복사
랜덤 이동