# Color API

색을 컨트롤 할 수 있는 몇가지 함수들 입니다.

# Color 문자열 변환

// hex
color.format({ r : 255, g : 255, b : 255 }, 'hex')  // #FFFFFF
=
color.hex(255, 255, 255)

// rgb
color.format({ r : 255, g : 255, b : 255 }, 'rgb') // rgba(255, 255, 255, 0.5);

// rgba
color.format({ r : 255, g : 255, b : 255, a : 0.5 }, 'rgb') // rgba(255, 255, 255, 0.5);

// hsl 
color.format({ h: 220, s: 10, l: 10}, 'hsl') // hsl(220, 10%, 10%)

// hsla 
color.format({ h: 220, s: 10, l: 10, a: 0.5}, 'hsl') // hsla(220, 10%, 10%, 0.5)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Color 파서

rgb, hex, hsl 형식의 문자열에서 컬러값을 구한다.

color.parse("#FF0000") === { r : 255, g : 0, b : 0 }

color.parse("rgb(255, 0, 0)") == { r : 255, g : 0, b :0 }

color.parse("rgba(255, 0, 0, 0)") == { r : 255, g : 0, b :0, a: 0 }

color.parse(0xff0000) == { r : 255, g : 0, b : 0 }

color.parse(0xff000000) == { r : 255, g : 0, b : 0, a: 0 }

color.parse("hsl(255, 0%, 0%)") == { h : 255, s : 0, l :0 }

color.parse("hsla(255, 0%, 0%, 0)") == { h : 255, s : 0, l :0, a: 0 }
1
2
3
4
5
6
7
8
9
10
11
12
13

# Color 멀티 파서

하나의 문자열에서 색상 코드와 색상의 위치를 찾아준다.

Color.matches(str) 
1

실제 결과물을 보자.


console.log(Color.matches(' rgba(255, 0, 0, 1) thanks to hsl(100, 20%, 20%) and yellow '))

=>

[
    {
        "color": "rgba(255, 0, 0, 1)",
        "startIndex": 1,
        "endIndex": 19
    },
    {
        "color": "hsl(100, 20%, 20%)",
        "startIndex": 30,
        "endIndex": 48
    },
    {
        "color": "yellow",
        "nameColor": "rgb(255, 255, 0)",
        "startIndex": 53,
        "endIndex": 59
    }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 멀티 파서 2

console.log(Color.convertMatches(' rgba(255, 0, 0, 1) thanks to hsl(100, 20%, 20%) and yellow ', ','))

=> 

{
    str: ' @0 thanks to @1 and @2 ',
    matches : [
        {
            "color": "rgba(255, 0, 0, 1)",
            "startIndex": 1,
            "endIndex": 19
        },
        {
            "color": "hsl(100, 20%, 20%)",
            "startIndex": 30,
            "endIndex": 48
        },
        {
            "color": "yellow",
            "nameColor": "rgb(255, 255, 0)",
            "startIndex": 53,
            "endIndex": 59
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 멀티파서 2 복구하기

const ret = Color.convertMatches(' rgba(255, 0, 0, 1) thanks to hsl(100, 20%, 20%) and yellow ', ','))

console.log(Color.reverseMatches (ret.str, ret.matches))

=> 

' rgba(255, 0, 0, 1) thanks to hsl(100, 20%, 20%) and yellow '
1
2
3
4
5
6
7

# Color 변환

# RGB to HSL

Color.RGBtoHSL(r, g, b) => { h, s, l }
1

# HSL to RGB

Color.HSLtoRGB(h, s, l) => { r, g, b }
1

# RGB to CMYK

CMYK 는 C (Cyan), M (Magent), Y(Yellow), K (Black) 으로 이루어진 색입니다. 색을 더할 수록 어두워 집니다. 출력물을 뽑을 때 많이 사용하는 형식입니다.

Color.RGBtoCMYK(r, g, b) => { c, m, y, k }
1

# CMYK to RGB

Color.CMYKtoRGB(c, m, y, k) => { r, g, b }
1

# HSV to RGB

HSV 형식을 RGB 로 변환합니다. 컬러피커에서 만들어진 HSV 코드로 실제 RGB 컬러를 얻을 수 있습니다.

Color.HSVtoRGB(h, s, v) => { r, g, b }
1

# RGB to HSV

Color.RGBtoHSV(r, g, b) => { h, s, v }
1

# HSV to HSL

HSV 형식을 HSL 로 변환합니다. 컬러피커에서 만들어진 HSV 코드로 실제 HSL 컬러를 얻을 수 있습니다.

Color.HSVtoHSL(h, s, v) => { h, s, l }
1

# HSL to HSV

Color.HSLtoHSV(h, s, l) => { h, s, v }
1

# Gray Scale

Gray Scale 은 명도만 갖는 색으로 변환합니다. 즉 흰색에서 검은색 사이에 있는 값을 가리킵니다.

Color.c(r, g, b) => { r, g, b }  
Color.RGBtoSimpleGray(r, g, b) => { r, g, b} 
Color.RGBtoGray(r, g, b) => { r, g, b}      // YCrCb 에서 Y 값으로 Gray Scale 만들기
1
2
3

TIP

Gray Scale 정보는 http://blog.ggaman.com/965 여기에서 확인 하시기 바랍니다.

# RGB to YCrCb

RGB 를 YCrCb 로 변환합니다. YUV 표현 방법중 하나입니다. Y 라는 밝기를 유지한채 Cr, Cb 의 상대값을 나타냅니다.

Y 는 밝기 정보, Cr 는 밝기 정보에서 빨간색의 차이, Cb 는 밝기 정보에서 파란색의 차이
1

밝기 정보만 있으면 Gray Scale 로 사용할 수 있습니다.

Color.RGBtoYCrCb(r, g, b) => { y, cr, cb } 
1

TIP

YCrCb 영상 시스템에서 사용되는 색공간의 일종이다. Y 는 휘도 성분이며 Cb 와 Cr 은 색차 성분이다. YCrCb 은 가끔 YCC 라고 줄여 부르기도 한다. YCrCb 은 절대 색공간 이 아니며 RGB 정보를 인코딩하는 방식의 하나로, 실제로 보이는 이미지의 색은 신호를 디스플레이 하기 위해 사용된 원본 RGB 정보에 의존한다. 따라서 YCrCb 로 표현된 값은 표준 RGB 색상이 사용된 경우거나, 색상을 변환하기 위해 사용할 ICC 프로파일을 첨부한 경우에만 예측할 수 있다.

출처: https://ko.wikipedia.org/wiki/YCbCr

# YCrCb to RGB

Color.YCrCbtoRGB(y, cr, cb, bit)  => { r, g, b }
1

# XYZ to RGB

Color.XYZtoRGB(x, y, z) => { r, g, b }
1

# RGB to XYZ

Color.RGBtoXYZ(r, g, b) => { x, y, z }
1

# LAB to XYZ

Color.LABtoXYZ(l, a, b) => { x, y, z }
1

# XYZ to LAB

Color.XYZtoLAB(x, y, z)  => { l, a, b }
1

# RGB to LAB

Color.RGBtoLAB(r, g, b) => { l, a, b }
1

TIP

Lab 색 공간의 가장 큰 장점은 RGB나 CMYK와 달리 매체에 독립적이라는 것이다. 디스플레이 장비나 인쇄 매체에 따라 색이 달라지는 색 공간과 달리 Lab* 색 공간은 인간의 시각에 대한 연구를 바탕으로 정의되었다. 특히 휘도 축인 L 값은 인간이 느끼는 밝기에 대응하도록 설계되었다.

Lab 색 공간의 색역은 컴퓨터 디스플레이나 인쇄 매체는 물론 인간이 지각할 수 있는 색 영역보다도 훨씬 크다. 따라서 RGB나 CMYK보다 더 정밀한 값으로 표현해야 한다. 80년대까지 대부분의 이미지 포맷은 8비트만을 지원하였으므로 Lab 색 공간을 표현하기에 부적합했으나, 지금은 대부분의 포맷이 16비트 이미지를 지원하므로 이러한 문제가 없다.

출처 : https://ko.wikipedia.org/wiki/Lab_%EC%83%89_%EA%B3%B5%EA%B0%84

# LAB to RGB

Color.LABtoRGB(l, a, b) => { r, g, b}
1

TIP

CIE Lab* 색 공간에서 L* 값은 밝기를 나타낸다. L* = 0 이면 검은색이며, L* = 100 이면 흰색을 나타낸다. a은 빨강과 초록 중 어느쪽으로 치우쳤는지를 나타낸다. a이 음수이면 초록에 치우친 색깔이며, 양수이면 빨강/보라 쪽으로 치우친 색깔이다. b은 노랑과 파랑을 나타낸다. b이 음수이면 파랑이고 b*이 양수이면 노랑이다.

또한, 인간의 색 지각이 비선형이라는 연구 결과에 따라, Lab* 색 공간은 실제 빛의 파장과 비선형적 관계를 갖는다. 또한 Lab* 공간에서 서로 다른 두 색의 거리는 인간이 느끼는 색깔의 차이와 비례하도록 설계되었다.

RGB 및 CMYK 색 공간은 매체에 독립적이지 않기 때문에, 이들 색 공간을 Lab* 색 공간으로 변환하려면 먼저 sRGB나 어도비 RGB 등의 절대 색 공간으로 변환해야 한다.

출처 : https://ko.wikipedia.org/wiki/Lab_%EC%83%89_%EA%B3%B5%EA%B0%84

# Color 늘리기

Color 늘리기는 연속성을 갖는 색을 찾는 방법입니다. 어떤 것이 있는지 한번 보시죠.

# Saturation(채도) Scale

Color.scaleS(color, 100, 'hex');   // Saturation 
1

# Value(명도) Scale

Color.scaleV(color, 100, 'hex');   // Value 
1

# Template Scale

Color.scale.hsv(40);
1
Color.scale.parula(20);
1
Color.scale.jet(20);
1
Color.scale.hot(20);
1
Color.scale.pink(20);
1
Color.scale.bone(20);
1
Color.scale.copper(20);
1

# Custom Scale

Color.scale(['red', 'rgba(255, 255, 0, 0.5)'], 50);
1
Color.scale(['red', 'blue'], 25);
1
Color.scale(['red', 'black'], 105);
1

TIP

scale 에 정의되는 count 는 이전 색과 이후 색의 간격(개수)입니다.

# Gradient Scale

gradient 는 색의 범위를 나눠서 구성할 수 있다.

Color.gradient('red, black', 30);
1

# alpha scale

Color.gradient('red, rgba(255, 255, 0, 0.5)', 30);
1

# color stop

color stop-over 형태로 색을 입력하면 연속된 결과 중에 지정된 위치에 색이 나열된다.

Color.gradient('red, rgba(255, 255, 0, 0.8) 0.3, yellow 0.7, black', 100);
1

TIP

gradient 에 정의되는 count 는 전체 색의 개수입니다.

Last Updated: 2019. 11. 21. 오후 7:55:49