# Guide: How to change only your colors' hue with color.js

**URL:** <https://forums.fusetools.com/t/guide-how-to-change-only-your-colors-hue-with-color-js/3889>\
**Category:** How-to Discussions\
**Created:** [April 13, 2017, 10:44am UTC](https://forums.fusetools.com/t/guide-how-to-change-only-your-colors-hue-with-color-js/3889 "2017-04-13T10:44:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kristian\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_pedersen/32/57_2.png) [@Kristian\_Pedersen](https://forums.fusetools.com/u/Kristian_Pedersen)\
**Post date:** [April 13, 2017, 10:44am UTC](https://forums.fusetools.com/t/guide-how-to-change-only-your-colors-hue-with-color-js/3889/1 "2017-04-13T10:44:51Z")

</div>

# Changing hue in Fuse with color.js

Hi! I’ve seen that [the color documentation](https://www.fusetools.com/docs/uno/color) mentions a bunch of Uno color functions, but I can’t find any examples on how to use them.

Whenever I read up on color in Fuse, it seems hex RGB is used.

To change only the hue of my colors, I’m using color.js: [https://github.com/Automattic/Color.js](https://github.com/Automattic/Color.js)

Hue goes from 0-360, while saturation and lightness go from 0-100:

`Color({h: 120, s: 50, l: 50}) // -> "#00ff00"`

## Code

**MainView.ux** - change background color with slider

```auto
<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var Color = require("color"); // https://github.com/Automattic/Color.js -> /dist/color.js

		var hue = Observable(0);
		var hexColor = Observable("#bada55");

		function update() {
			hexColor.value = Color({h: hue.value, s: 100, l: 50}).toString();
			console.log(hexColor.value);
		}

		module.exports = {
			hue,
			hexColor,
			update
		};
	</JavaScript>

	<Slider Value="{hue}" Minimum="0" Maximum="360" ValueChanged="{update}" />
	<Rectangle Color="{hexColor}" Layer="Background" />
</App>

```

**.unoproj.**

```auto
{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS"
  ],
  "Includes": [
    "*",
    "color.js:Bundle"
  ]
}

```

## Feature request/help: Hue in UX markup

Is it possible to work with hue in UX instead, like this?

```auto
<Rectangle Color="HSV(180, 50, 50)" />

```

This was all I found though: [https://www.fusetools.com/docs/ux-markup/expressions#functions](https://www.fusetools.com/docs/ux-markup/expressions#functions)

And this is a bit over my head at the moment:

- [https://www.fusetools.com/community/forums/howto\_discussions/can\_i\_call\_uno\_function\_or\_change\_uno\_properties\_f](https://www.fusetools.com/community/forums/howto_discussions/can_i_call_uno_function_or_change_uno_properties_f)
- [https://www.fusetools.com/docs/native-interop/native-js-modules](https://www.fusetools.com/docs/native-interop/native-js-modules)

---

<div class="post-metadata">

**Author:** ![kusma](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kusma/32/595_2.png) [@kusma](https://forums.fusetools.com/u/kusma)\
**Post date:** [April 25, 2017, 12:57pm UTC](https://forums.fusetools.com/t/guide-how-to-change-only-your-colors-hue-with-color-js/3889/2 "2017-04-25T12:57:02Z")

</div>

The UX-expression system is pretty new, so we haven’t had much time to implement all useful functions yet. Luckily, it’s relatively easy to add your own UX expression functions, so you can for instance add this in your project:

```auto
using Uno.UX;

[UXFunction("colorFromHsv")]
public class ColorFromHsv: Fuse.Reactive.TernaryOperator
{
	[UXConstructor]
	public ColorFromHsv([UXParameter("H")] Fuse.Reactive.Expression h,
	                    [UXParameter("S")] Fuse.Reactive.Expression s,
	                    [UXParameter("V")] Fuse.Reactive.Expression v) : base(h, s, v)
	{
	}

	protected override object Compute(object first, object second, object third)
	{
		var h = Fuse.Marshal.ToFloat(first);
		var s = Fuse.Marshal.ToFloat(second);
		var v = Fuse.Marshal.ToFloat(third);
		return Uno.Color.FromHsv(float3(h, s, v));
	}
}

```

Which allows you to do this:

```auto
<Rectangle Color="colorFromHsv(0,0.75,0.5)" />

```