[D3] d3-color 사용법

여러 색상 공간의 색을 표현하고 다루는 기능을 제공합니다. 이 모듈은 RGB, HSL, Lab 등 다양한 색상 표현 방식을 지원하며, 주로 색상의 생성, 변환, 분해 및 조작을 위해 사용됩니다.

이 모듈을 사용하면 특정 색상을 나타내는 객체를 만들고, 그 색상을 다른 색상 공간으로 변환하거나 조작할 수 있습니다. 또한 색상 간 gradient을 위해 사용되기도 합니다. 색상 보간을 위해 d3-interpolate 모듈을 참조하면 됩니다.

const color = d3.color("steelblue")

color의 값은 rgb와 opacity로 표현이 됩니다.

const color = d3.color("steelblue")
const hsl = d3.hsl(color)

rgb의 값에서 hsl의 값으로 변환됩니다. 변환된 값에서 색상을 90도 만큼 회전시키고 채도를 20%를 늘리면

const color = d3.color("steelblue")
const hsl = d3.hsl(color)
hsl.h += 90
hsl.s += 0.2
const color2 = d3.color(hsl)

 

hsl로 변경된 값을 rgb의 형태로 반환됩니다.

 

color(specifier)

유효하지 않은 파라미터가 오면 null이 반환됩니다.

• rgb(255, 255, 255)
• rgb(10%, 20%, 30%)
• rgba(255, 255, 255, 0.4)
• rgba(10%, 20%, 30%, 0.4)
• hsl(120, 50%, 20%)
• hsla(120, 50%, 20%, 0.4)
• #ffeeaa
• #fea
• #ffeeaa22
• #fea2
• steelblue

color.opacity

opacity를 통해 불투명도를 조절할 수 있습니다.

const color = d3.color("steelblue")
color.opacity = 0.5
console.log(color)

 

color.rgb()

color의 rgb값을 반환합니다.

const color = d3.color("steelblue")
console.log(color.rgb())

 

color.copy(values)

color의 복사본을 반환합니다. 값이 있으면 반환되는 색상에 할당됩니다.

const color = d3.color("steelblue")
const copyColor = color.copy({opacity: 0.5})
console.log(copyColor)

 

color.brighter(k)

color 밝기를 제어합니다. k를 지정하지 않으면 기본값은 1입니다. 해당 색상을 더 밝게 만들어 줍니다.

const color = d3.color("steelblue")
const brighter = color.brighter()
console.log(brighter)

 

color.darker(k)

주어진 색상보다 더 어두운 색상의 색상을 반환합니다. k를 지정하지 않으면 기본값은 1입니다.

const color = d3.color("steelblue")
const darker = color.darker()
console.log(darker)

 

color.displayable()

표준 하드웨어에서 색상을 표시할 수 있는지 여부를 판단합니다. 예를 들어, RGB 색상에서 채널 값이 0보다 작거나 255보다 큰 경우 (반올림했을 때), 또는 투명도(opacity) 값이 [0, 1] 범위에 속하지 않는 경우, 이 함수는 false를 반환합니다.

이 함수는 해당 색상이 표준 하드웨어에서 적절하게 표현될 수 있는지를 평가합니다. 색상의 채널 값이 유효한 범위 내에 있고 투명도 값이 올바른 범위 내에 있는지를 확인하여 표시 가능 여부를 결정합니다.

const color = d3.color("steelblue")
console.log(color.displayable()) // true
const copy = color.copy({opacity: -1})
console.log(copy.displayable())  // false

 

color.formatHex()

RGB 공간에서 해당 색상을 나타내는 16진수 문자열을 반환합니다. 이 문자열은 주로 #과 6자리의 16진수 문자로 표현됩니다. 표시 가능하지 않는 색상이면 표시 가능한 색상으로 변환됩니다.

const color = d3.color("steelblue")
console.log(color.formatHex()) // #4682b4
const copy = color.copy({r: -1}) // displayable() : false
console.log(copy.formatHex()) // #0082b4

 

color.formatHex8()

RGBA 공간에서 해당 색상을 나타내는 16진수 문자열을 반환합니다. 이 문자열은 일반적으로 #과 8자리의 16진수 문자로 표현됩니다. 여기서 마지막 2자리는 투명도(Opacity)를 나타냅니다. 표시 가능하지 않는 색상이면 표시 가능한 색상으로 변환됩니다.

const color = d3.color("steelblue")
console.log(color.formatHex8()) // #4682b4ff
const copy = color.copy({opacity: -1})
console.log(copy.formatHex8()) // #4682b400

 

color.formatHsl()

CSS Color Module Level 3 사양에 따라 해당 색상을 나타내는 문자열을 반환합니다. 이 함수는 hsl() 또는 hsla() 형태로 표현됩니다. 여기서, 첫 번째 값은 색상의 색상(Hue)을, 두 번째 값은 채도(Saturation)를, 세 번째 값은 명도(Lightness)를 나타냅니다. 마지막 값은 투명도(Opacity)를 나타냅니다. 표시 가능하지 않는 색상이면 S와 L 채널 값이 [0, 100] 범위로 제한됩니다.

const color = d3.color("steelblue")
console.log(color.formatHsl()) // hsl(207.27272727272728, 44%, 49.01960784313726%)

 

color.formatRgb()

CSS Object Model 사양에 따라 해당 색상을 나타내는 문자열을 반환합니다. 이 함수는 일반적으로 rgb() 또는 rgba() 형태로 표현됩니다. 여기서 각 값은 색상의 빨강(Red), 녹색(Green), 파랑(Blue) 채널 값을 나타냅니다. 마지막 값은 투명도(Opacity)를 나타냅니다. 해당 색상이 표시 가능하지 않은 경우, RGB 채널 값이 [0, 255] 범위로 제한됩니다.

const color = d3.color("steelblue")
console.log(color.formatRgb()) // rgb(70, 130, 180)

 

color.toString()

color.formatRgb의 별칭입니다.

const color = d3.color("steelblue")
console.log(color.toString()) // rgb(70, 130, 180)

 

rgb(color)

CSS Color Module Level 3 명세에 따른 색상 표현을 받아 해당 색상을 RGB 색상 공간으로 변환합니다. 반환된 인스턴스는 r, g, b 속성으로 채널 값을 노출합니다.

const rgb = d3.rgb("steelblue")
console.log(rgb)
const color = d3.color("steelblue")
const colorRgb = color.rgb()
color.opacity = 0
console.log(colorRgb) // opacity 0

 

rgb.clamp()

rgb 채널이 [0, 255] 범위에 맞게 조정하고 범위를 벗어나는 채널 값은 유효한 범위 내에서 가장 가까운 정수값으로 조정됩니다. 

const rgb = d3.rgb(-1,255,0).clamp()
console.log(rgb) // -1이 0으로 변환

 

hsl(color)

새로운 HSL (색조, 채도, 밝기) 색상을 생성합니다. 반환된 인스턴스에서는 h (색조), s (채도), l (밝기)와 같은 채널 값이 속성으로 노출됩니다. rgb값으로 값이 넘겨지면 hsl로 변환이 됩니다.

const hsl = d3.hsl("rgb(255,255,0)")
console.log(hsl) // hsl로 변환

 

hsl.clamp()

h채널이 [0, 360] 범위에 고정되고 s, l, opacity는 [0, 1] 범위로 고정이됩니다.

const hsl = d3.hsl(255,255,0).clamp()
console.log(hsl) // 255, 1, 0 , 1로 변환

 

lab(color)

CIELAB 색상을 생성합니다. 밝기(l)의 값은 [0, 100] 범위에 있으며, a 및 b는 [-160, +160] 범위에 있습니다. rgb로 들어올 경우 lab로 변환되는 과정이 있고 hcl은 직접 변환됩니다.

const lab = d3.lab("red")
console.log(lab)

 

gray(I, opacity)

I의 값과 a = b = 0을 사용하여 새로운 lab을 구성합니다.

const gray = d3.gray(50, 0.5)
console.log(gray) // l: 50, a: 0, b: 0, opacity: 0.5

 

hcl(color), lch(color)

l (밝기), c (채도), h (색상)와 같은 채널 값이 속성으로 노출됩니다. 밝기 (l)의 값은 일반적으로 [0, 100] 범위에 있으며, 채도 (c)는 일반적으로 [0, 230] 범위에 있으며, 색상 (h)은 일반적으로 [0, 360] 범위에 있습니다.

 

const hcl = d3.hcl("red")
console.log(hcl)
const lch = d3.lch("red")
console.log(lch)

 

cubehelix(color)

h는 각도를, s는 채도를 (0에서 1 사이의 값), l은 밝기를 (0에서 1 사이의 값) 나타냅니다. 생성된 색상에 불투명도를 추가할 수 있습니다.

const cubehelix = d3.cubehelix("red")
console.log(cubehelix)