> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/values/colors.md).

# colors

[CSS](/web/css.md) ⟩ [values](/web/css/values.md) ⟩ colors

{% tabs %}
{% tab title="🛠 工具" %}

* [Color Hunt](https://colorhunt.co)
* [hhhue](https://fffuel.co/hhhue/) - color palettes
  {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %} <mark style="color:yellow;">**new syntax**</mark>

* <mark style="color:orange;">**no commas**</mark> between the numbers.
* <mark style="color:orange;">**alpha**</mark> value **separated** with a <mark style="color:orange;">**slash**</mark>.
* <mark style="color:blue;">`rgba()`</mark> and <mark style="color:blue;">`hsla()`</mark> <mark style="color:red;">**no longer necessary**</mark>.
  {% endhint %}

```css
/* old syntax             new syntax             */
/* --------------------------------------------- */
rgb(0, 0, 0)              rgb(0 0 0)
rgba(255, 0, 0, 0.5)      rgb(255 0 0 / 0.5)    /* #FF00007F */
hsl(120, 50%, 50%)        hsl(120 50% 50%)
hsla(120, 50%, 50%, 0.75) hsl(120 50% 50% / 0.75)
```

{% endtab %}

{% tab title="🔴 主題" %}

* [HSL](/web/css/values/colors/hsl.md)
  {% endtab %}

{% tab title="📘 手冊" %}

* [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) ⟩ [\<color value>](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
  {% endtab %}

{% tab title="👥 相關" %}

* [gradients](/web/browser/canvas/state/styles/gradient.md) - need to define gradient colors with CSS colors.
* [SVG](/web/browser/svg.md) ⟩ [Attributes](/web/browser/svg/attributes.md) (fill, stroke)
* [\<canvas>](/web/browser/canvas.md) ⟩ [colors](/web/browser/canvas/state/styles/colors.md)
  {% endtab %}
  {% endtabs %}