• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

1,345  

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

 

 

Color 설정 함수

rgb(red, green, blue)

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

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

자세히 보기

(예제)

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

 


rgba(red, green, blue, alpha)

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

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

자세히 보기

(예제)

rgba(0, 0, 255, 0.3); 

 


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(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(color)

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

(예제)

grayscale(#7fffd4);

Result: #c6c6c6

 


complement(color)

색깔의 보완색 설정.

(예제)

complement(#7fffd4);

Result: #ff7faa

 


invert(color, weight)

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

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

(예제)

invert(white);

Result: black

 

 

Color 얻기 함수

red(color)

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

(예제)

red(#7fffd4);

Result: 127

red(red);

Result: 255

 


green(color)

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

(예제)

green(#7fffd4);

Result: 255

green(blue);

Result: 0

 


blue(color)

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

(예제)

blue(#7fffd4);

Result: 212

blue(blue);

Result: 255

 


hue(color)

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

(예제)

hue(#7fffd4);

Result: 160deg

 


saturation(color)

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

(예제)

saturation(#7fffd4);

Result: 100%

 


lightness(color)

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

(예제)

lightness(#7fffd4);

Result: 74.9%

 


alpha(color)

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

(예제)

alpha(#7fffd4);

Result: 1

 


opacity(color)

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

(예제)

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

Result: 0.5

 

 

Color 제어 함수

mix(color1, color2, weight)

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

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

weight 작을수록 color2 비중 증대.



adjust-hue(color, degrees)

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

(예제)

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

Result: #8080ff

 


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

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

(예제)

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

Result:

 


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

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

(예제)

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

Result: #ffffd4

 


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

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

 


rgba(color, alpha)

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

(예제)

rgba(#7fffd4, 30%);

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

 


lighten(color, amount)

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

 


darken(color, amount)

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

 


saturate(color, amount)

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

 


desaturate(color, amount)

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



opacify(color, amount)

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

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

 


fade-in(color, amount)

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

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

 


transparentize(color, amount)

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

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

 


fade-out(color, amount)

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

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

 

 

PS.

SASS color 함수

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

 


분류 제목
basic SASS - Home (입문)
basic SASS - Intro (소개)・Comments (주석)
basic SASS - Installation (설치)
basic SASS - Variables (변수)
basic SASS - Nesting (안긴 형태)
basic SASS - @import (가져오기)
basic SASS - @mixin (믹스인)・@include (인클루드)
basic SASS - @extend (상속・확장)
func SASS - String Functions (문자열 함수) 종류
func SASS - Numeric Functions (숫자 함수) 종류
func SASS - List Functions (리스트 함수) 종류
func SASS - Map Functions (맵 함수) 종류
func SASS - Selector Functions (선택자 함수) 종류
func SASS - Introspection Functions (내부검사 함수) 종류
func SASS - Color Functions (색상/색깔 함수) 종류
목록
찾아주셔서 감사합니다. Since 2012