# 2D HSL Effect

#### <a class="anchor" id="bkmrk--6"></a>Description

This chapter briefly describes how to use the 2D HSL effect.

<div class="contents" id="bkmrk-ensure-that-this-eff"><div class="contents"><div class="textblock"><dl class="note"><dt></dt><dd><p class="callout info">Ensure that this effect is supported by the device platform in use.</p>

</dd></dl></div></div></div>#### **Configure a 2D HSL Effect** 

##### <a class="anchor" id="bkmrk--8"></a>HSL Effect

The [BitmapBrushHslBlend](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_bitmap_brush_hsl_blend.html "Output a bitmap image, apply a HSL transformation, and blend it with the store buffer. Same as chaining (BitmapBrush + HslCorrectionEffect + BlendEffect)") effect outputs an bitmap image having applied hue, saturation and lightness correction and blended with the store buffer.

Following properties of a HSL effect can be configured:

##### <a class="anchor" id="bkmrk--9"></a>Hue

Hue is one of the main properties of a color, defined, technically, as the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, yellow, orange and violet. The image below shows the circle of hues for the color red (R=255, G=0, B=0).

<div drawio-diagram="2680"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-4-1677467179.png" alt=""/></div>

 On the HSL effect, the hue is expressed as degrees in the interval \[-180 .. 180\]; the original color is at a hue value of 0.

##### <a class="anchor" id="bkmrk--11"></a>Saturation

Saturation describes the intensity of a color, defined as a range from pure color to gray.

<div drawio-diagram="2681"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-4-1677467197.png" alt=""/></div>

<div class="contents" id="bkmrk--1"><div class="contents"><div class="textblock">  
</div></div></div>On the HSL effect, "0" means grayscale, "1" means color unchanged and "-1" means color inverted.

##### <a class="anchor" id="bkmrk--13"></a>Lightness

Lightness measures the relative degree of black or white that's been mixed with a given hue.

<div drawio-diagram="2682"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-4-1677467220.png" alt=""/></div>

<div class="contents" id="bkmrk--3"><div class="contents"><div class="textblock">  
</div></div></div>On the HSL effect "0" means black, "1" means the color unchanged.

##### <a class="anchor" id="bkmrk--15"></a>Example

Following is an example of a HSL effect configured with hue = 120, saturation = -1 and lightness = 1.3:

<div drawio-diagram="2683"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-4-1677467235.png" alt=""/></div>

<div class="contents" id="bkmrk--5"><div class="contents"><div class="textblock">  
</div></div></div>Refer to <span style="color: rgb(230, 126, 35);">[SceneComposer User Manual](https://doc316en.candera.eu/books/scene-design/page/effects)</span> about how to configure a [BitmapBrushHslBlend](http://dev.doc.cgistudio.at/APILINK/class_candera_1_1_bitmap_brush_hsl_blend.html "Output a bitmap image, apply a HSL transformation, and blend it with the store buffer. Same as chaining (BitmapBrush + HslCorrectionEffect + BlendEffect)") effect in a 2D scene.

#### **Modify 2D HSL Effect Properties**

##### <a class="anchor" id="bkmrk--17"></a>Set Hue, Saturation and Lightness

In order to change the BitmapBrushHslBlend effect properties, call the corresponding method on the HslCorrectionEffect as shown bellow:

```
            m_bitmap_hslBlend = <a class="code" href="http://dev.doc.cgistudio.at/APILINK/group___c_o_u_r_i_e_r___v_i_s_u_a_l_i_z_a_t_i_o_n.html#ggaf0e93dc4242f607c3c8d13dafd036af9aaabfa5309af24986d3111a092449f857">BitmapBrushHslBlend::Create</a>();
            m_bitmap_hslBlend->GetBitmapBrush().Image().Set(m_image.GetPointerToSharedInstance());

            HslCorrectionEffect& hslCorrection = m_bitmap_hslBlend->GetHslCorrectionEffect();
            hslCorrection.Hue() = 17.0F;
            hslCorrection.Saturation() = -0.5F;
            hslCorrection.Lightness() = 1.2F;
```