# colors

[CSS](..) ⟩ [values]() ⟩ 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](colors/hsl "mention")
{% 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="👥 相關" %}
* [gradient](../../browser/canvas/state/styles/gradient "mention") - need to define gradient colors with CSS colors.
* [svg](../../browser/svg "mention") ⟩ [attributes](../../browser/svg/attributes "mention") (fill, stroke)
* [canvas](../../browser/canvas "mention") ⟩ [colors](../../browser/canvas/state/styles/colors "mention")
{% endtab %}
{% endtabs %}
