Skip to content

Commit

Permalink
fix(css): Organize sections as per template guidelines (mdn#34170)
Browse files Browse the repository at this point in the history
fix sections
  • Loading branch information
dipikabh committed Jun 14, 2024
1 parent acc5072 commit 99f984f
Showing 1 changed file with 17 additions and 15 deletions.
32 changes: 17 additions & 15 deletions files/en-us/web/css/hue/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,21 @@ spec-urls: https://drafts.csswg.org/css-color/#typedef-hue
The **`<hue>`** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the hue angle of a color.
It is used in the color functions that accept hue expressed as a single value, specifically [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), [`lch()`](/en-US/docs/Web/CSS/color_value/lch), and [`oklch()`](/en-US/docs/Web/CSS/color_value/oklch) functional notations.

## Syntax

A `<hue>` can be either an `<angle>` or a `<number>`.

### Values

- {{CSSXref("&lt;angle&gt;")}}
- : An angle expressed in degrees, gradians, radians, or turns using the `deg`, `grad`, `rad`, or `turn`, respectively.
- `<number>`
- : A real number, representing degrees of the hue angle.

As an `<angle>` is periodic, `<hue>` is normalized to the range `[0deg, 360deg)`. It implicitly wraps around such that `480deg` is the same as `120deg`, `-120deg` is the same as `240deg`, `-1turn` is the same as `1turn`, and so on.

## Description

![An sRGB color wheel](color_wheel.svg)

The color wheel above shows hues at all angles in the [sRGB](https://en.wikipedia.org/wiki/SRGB) {{glossary("color space")}}. In particular, _red_ is at `0deg`, _yellow_ is at `60deg`, _lime_ is at `120deg`, _cyan_ is at `180deg`, _blue_ is at `240deg`, and _magenta_ is at `300deg`.
Expand Down Expand Up @@ -106,24 +121,11 @@ The following table lists typical colors at various angles in the sRGB (used by
</tbody>
</table>

## Syntax

A `<hue>` can be either an `<angle>` or a `<number>`.

### Values

- {{CSSXref("&lt;angle&gt;")}}
- : An angle expressed in degrees, gradians, radians, or turns using the `deg`, `grad`, `rad`, or `turn`, respectively.
- `<number>`
- : A real number, representing degrees of the hue angle.

As an `<angle>` is periodic, `<hue>` is normalized to the range `[0deg, 360deg)`. It implicitly wraps around such that `480deg` is the same as `120deg`, `-120deg` is the same as `240deg`, `-1turn` is the same as `1turn`, and so on.

### Interpolation
## Interpolation of `<hue>` values

`<hue>` values are interpolated as {{CSSXref("&lt;angle&gt;")}} values, and the default interpolation algorithm is [`shorter`](/en-US/docs/Web/CSS/hue-interpolation-method#values). In some color-related CSS functions, this can be overridden by the {{CSSXref("&lt;hue-interpolation-method&gt;")}} component.

### Formal syntax
## Formal syntax

{{csssyntax}}

Expand Down

0 comments on commit 99f984f

Please sign in to comment.