← Vanilla JSData-Driven Styling

Base

import kleur from "@driangle/kleur";

const color = kleur("#3a6bd5");
const { r, g, b } = color.toRgb();
// => { r: 58, g: 107, b: 213 }

// Use channels individually
element.style.borderColor =
  `rgba(${r}, ${g}, ${b}, 0.5)`;
// => "rgba(58, 107, 213, 0.5)"

// Or use toCss() directly
element.style.backgroundColor =
  color.lighten(0.2).toCss();
// => "rgba(97,137,221,1)"

R

58

G

107

B

213

darken(0.2)#2653b3

base#3a6bd5

lighten(0.2)#6189dd

Styled elementborder: rgba(58, 107, 213, 0.5)bg: rgba(97,137,221,1)