Colors

Wiki ▸ API Reference ▸ Core ▸ Colors

시각화 작업에는 색상 작업이 동반되기도 한다. 물론 브라우저가 대부분의 색을 이해하기는 하지만 자바스크립트로 색상 조절을 하기에 이 것만으론 부족한다. D3는 색공간간의 보간(interpolation)이 가능하고 색의 밝기 조절(brigher, darker)이 가능한 RGP와 HSL 색상 표현을 지원한다. 색상 조절에 대한 더 자세한 내용은 위키피디아의 RGB의 HSL를 참고하라.

참고: 직접 색상을 다루다 보면 D3에 내장된 interpolateRgb, interpolateHsl, scales를 참고해야 할 수도 있다.

색상 팔레트를 찾고 있다면 ordinal scales를 참고하라.

RGB

# d3.rgb(r, g, b)

주어진 r, g, b 채널값으로 신규 RGB 색상을 생성한다. 각 채널에서는 [0,255] 범위내의 정수값을 사용해야 한다. 반환 객체의 r, g, b 속성이 각 채널이다.

# d3.rgb(color)

color 문자열을 파싱해서 신규 RGB 색상을 생성한다. color 가 문자열이 아니면, 문자열로 강제한다. 그러므로 생성자는 이미 존재하는 색상의 사본을 생성하거나 d3.hsl 색상을 RBG로 전환하는데 사용할 수 있다. 색상 문자열 형태는 다음과 같다.

• 10진수 rgb - "rgb(255,255,255)"
• 10진수 hsl - "hsl(120,50%,20%)"
• 16진수 rgb - "#ffeeaa"
• 단축 16진수 rgb - "#fea"
• 색상명 - "red", "white", "blue"

결과 색상은 [0,255] 범위의 빨강, 녹색, 파랑 정수값으로 저장된다. 반환 객체의 r, g, b 속성이 각 채널이다. 색상명은 CSS 표준안의 색상명 목록을 지원한다. HSL 색상이라면 hsl.rgb과 동일방식으로 RGB로 변환한다.

# rgb.brighter([k])

원래 색상보다 좀 더 밝은 색상 사본을 반환한다. 각 채널에 0.7 ^ -k 를 곱한다. 감마 값 k 를 생략하면 기본값은 1이다. 채널값의 유효범위는 최대 255, 최소 30이다.

# rgb.darker([k])

원래 색상보다 좀 더 어두운 색상 사본을 반환한다. 각 채널에 0.7 ^ k 를 곱한다. 감마값 k 를 생략하면 기본값은 1이다.

# rgb.hsl()

HSL 색공간에서의 동일 색상을 반환한다. 반환객체에 대한 상세 내용은 d3.hsl를 참고하라. CSS3 Color Module Level 3에서 HSL의 RGB 변환을 설명하고 있는데 이 연산자는 그 반대 역활의 연산자다.

# rgb.toString()

RGB 색상을 "#f7eaba"같은 16진수 문자열로 변환한다.

HSL

# d3.hsl(h, s, l)

주어진 색조(hue) h, 채도(saturation) s, 명도(lightness) l 값으로 신규 HSL 색상을 생성한다. 색조은 [0,360] 범위내의 숫자여야만 하고, 채도와 명도는 [0,1] (백분률이 아님) 범위내 여야 한다. 반환 객체의 h, s, l 속성이 이들 값을 나타낸다.

# d3.hsl(color)

color 문자열을 파싱해서 신규 RGB 색상을 생성한다. color 가 문자열이 아니면 문자열로 강제한다. 그러므로 생성자는 이미 존재하는 생상의 사본을 생성하거나 d3.rgb 색상을 HSL로 전환하는데 사용할 수 있다. 색상 문자열 형태는 다음과 같다.

• 10진수 rgb - "rgb(255,255,255)"
• 10진수 hsl - "hsl(120,50%,20%)"
• 16진수 rgb - "#ffeeaa"
• 단축 16진수 rgb - "#fea"
• 색상명 - "red", "white", "blue"

결과 색상은 [0,360] 범위의 색조과 [0,1] 범위의 채도, 명도로 저장된다. 반환 객체의 'h', 's', 'l' 속성이 각 해당 값이다. CSS 표준안의 색상명 목록을 지원한다. RGB 색상이라면 rgb.hsl과 동일방식으로 HSL로 변환한다.

# hsl.brighter([k])

원래 색상보다 좀 더 밝은 색상 사본을 반환한다. 명도 채널에 0.7 ^ -k 를 곱한다. 감마 값 k 를 생략하면 기본값은 1이다.

# hsl.darker([k])

원래 색상보다 좀 더 어두운 색상 사본을 반환한다. 명도 채널에 0.7 ^ k 를 곱한다. 감마값 k 를 생략하면 기본값은 1이다.

# hsl.rgb()

RGB 색공간에서의 동일 색상을 반환한다. 반환객체에 대한 상세 내용은 d3.rgb를 참고하라. CSS3 Color Module Level 3에서 HSL의 RGB 변환을 설명하고 있다.

# hsl.toString()

HSL 색상을 "#f7eaba"같은 RGB 16진수 문자열로 변환한다.

HCL

# d3.hcl(h, c, l)

…

# d3.hcl(color)

…

# hcl.brighter([k])

…

# hcl.darker([k])

…

# hcl.rgb()

…

# hcl.toString()

HCL 색상을 "#f7eaba"같은 RGB 16진수 문자열로 변환한다.

L*a*b*

# d3.lab(l, a, b)

…

# d3.lab(color)

…

# lab.brighter([k])

…

# lab.darker([k])

…

# lab.rgb()

…

# lab.toString()

L*a*b* 색상을 "#f7eaba"같은 RGB 16진수 문자열로 변환한다.