# lch()

The `lch()` functional notation expresses a given color in the LCH color space. It has the same L axis as `lab()`, but uses polar coordinates C (Chroma) and H (Hue).

## Syntax

``````lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);
lch(52.2345% 72.2 56.2 / .5);
``````

### Values

Functional notation: `lch(L C H[ / A])`

`L`

A `<number>` between `0` and `100` or a `<percentage>` between `0%` and `100%` that specifies the CIE Lightness where the number `0` corresponds to `0%` (black) and the number `100` corresponds to `100%` (white).

`C`

A `<number>` or a `<percentage>` where `0%` is `0` and `100%` is the number `150`. It is a measure of the chroma (roughly representing the "amount of color"). Its minimum useful value is `0`, while its maximum is theoretically unbounded (but in practice does not exceed `230`).

`H`

A `<number>` or a `<angle>` that specifies the hue angle along the positive "a" axis (toward purplish red), `90deg` points along the positive "b" axis (toward mustard yellow), `180deg` points along the negative "a" axis (toward greenish cyan), and `270deg` points along the negative "b" axis (toward sky blue).

`A` Optional

An `<alpha-value>`, where the number `1` corresponds to `100%` (full opacity).

Note: Usually when percentage values have a numeric equivalent in CSS, `100%` is equal to the number `1`. This case is notable where `100%` is equal to the number `100` for the `L` value and `150` for the `C` value.

### Formal syntax

`<lch()> =   lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  <hue> =   <number>  |  <angle>   <alpha-value> =   <number>      |  <percentage>  `

## Examples

### Adjusting lightness, chroma, and hue with lch()

The following example shows the effect of varying the `L` (lightness), `C` (chroma), and `H` (hue) values of the `lch()` functional notation.

#### HTML

``````<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-chroma"></div>

<div data-color="green"></div>
<div data-color="green-hue"></div>
``````

#### CSS

``````[data-color="blue"] {
background-color: lch(0% 100 240);
}
[data-color="blue-light"] {
background-color: lch(100% 100 240);
}

[data-color="red"] {
background-color: lch(50% 130 20);
}
[data-color="red-chroma"] {
background-color: lch(100% 30 20);
}

[data-color="green"] {
background-color: lch(50% 132 130);
}
[data-color="green-hue"] {
background-color: lch(50% 132 180);
}
``````

#### Result

The following example shows the effect of varying the `A` (alpha) value of the `lch()` functional notation. The `red` and `red-alpha` elements overlap the `#background-div` element to demonstrate the effect of opacity. Giving `A` a value of `0.4` makes the color 40% opaque.

#### HTML

``````<div id="background-div">
<div data-color="red"></div>
<div data-color="red-alpha"></div>
</div>
``````

#### CSS

``````[data-color="red"] {
background-color: lch(50% 130 20);
}
[data-color="red-alpha"] {
background-color: lch(50% 130 20 / 0.4);
}
``````

## Specifications

Specification
CSS Color Module Level 4
# lab-colors

## Browser compatibility

BCD tables only load in the browser