# Color code

After reading [Settable SCSS](https://spectrecss.angular-package.dev/variables/colors/settable-scss) and [Based on settable SCSS](https://spectrecss.angular-package.dev/variables/colors/based-on-settable-scss) section, I know what color names `Spectre.css` has, and I see it would be good to have a key or code that I can refer to while working with them. I'll remove the `color`, and that's it.

## Codes

The first column is the simplified color name - the color code that I want to use to input instead of the full-color name, which indicates the SASS or CSS variable.

### `$accent-color`

| Color name | CSS variable                                                                                |       Hex |
| ---------- | ------------------------------------------------------------------------------------------- | --------: |
| accent     | <p>--s-accent-color-h<br>--s-accent-color-l<br>--s-accent-color-s<br>--s-accent-color-a</p> | `#9932CC` |

### `$primary-color`

| Color name | CSS variable                                                                                    |       Hex |
| ---------- | ----------------------------------------------------------------------------------------------- | --------: |
| primary    | <p>--s-primary-color-h<br>--s-primary-color-s<br>--s-primary-color-l<br>--s-primary-color-a</p> | `#5755D9` |

### `$primary-color-dark`

| Color name   | CSS variable                                                                                                        |     Hex |
| ------------ | ------------------------------------------------------------------------------------------------------------------- | ------: |
| primary-dark | <p>--s-primary-color-dark-h<br>--s-primary-color-dark-l<br>--s-primary-color-dark-s<br>--s-primary-color-dark-a</p> | #4B49D6 |

### `$primary-color-light`

| Color name    | CSS variable                                                                                                            |     Hex |
| ------------- | ----------------------------------------------------------------------------------------------------------------------- | ------: |
| primary-light | <p>--s-primary-color-light-h<br>--s-primary-color-light-l<br>--s-primary-color-light-s<br>--s-primary-color-light-a</p> | #6362DC |

### `$secondary-color`

| Color name | CSS variable                                                                                            |     Hex |
| ---------- | ------------------------------------------------------------------------------------------------------- | ------: |
| secondary  | <p>--s-secondary-color-h<br>--s-secondary-color-l<br>--s-secondary-color-s<br>--s-secondary-color-a</p> | #F1F1FC |

### `$secondary-color-dark`

| Color name     | CSS variable         |     Hex |
| -------------- | -------------------- | ------: |
| secondary-dark | secondary-color-dark | #E5E5F9 |

### `$secondary-color-light`

| Color name      | CSS variable          |     Hex |
| --------------- | --------------------- | ------: |
| secondary-light | secondary-color-light | #FEFEFF |

### `$gray-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| gray       | gray-color   | #BCC3CE |

### `$gray-color-dark`

| Color name | CSS variable    |     Hex |
| ---------- | --------------- | ------: |
| gray-dark  | gray-color-dark | #66758C |

### `$gray-color-light`

| Color name | CSS variable     |     Hex |
| ---------- | ---------------- | ------: |
| gray-light | gray-color-light | #F7F8F9 |

### `$bg-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| bg         | bg-color     | #F7F8F9 |

### `$bg-color-dark`

| Color name | CSS variable  |     Hex |
| ---------- | ------------- | ------: |
| bg-dark    | bg-color-dark | #EEF0F3 |

### `$bg-color-light`

| Color name | CSS variable   |     Hex |
| ---------- | -------------- | ------: |
| bg-light   | bg-color-light | #FFFFFF |

### `$border-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| border     | border-color | #DADEE4 |

### `$border-color-dark`

| Color name  | CSS variable      |     Hex |
| ----------- | ----------------- | ------: |
| border-dark | border-color-dark | #BCC3CE |

### `$border-color-light`

| Color name   | CSS variable       |     Hex |
| ------------ | ------------------ | ------: |
| border-light | border-color-light | #F1F3F5 |

### `$disabled-color`

| Color name     | CSS variable   |     Hex |
| -------------- | -------------- | ------: |
| disabled-color | disabled-color | #EEF0F3 |

### `$error-color`

| Color name  | CSS variable |     Hex |
| ----------- | ------------ | ------: |
| error-color | error-color  | #E85600 |

### `$info-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| info-color | info-color   | #D9EDF7 |

### `$success-color`

| Color name    | CSS variable  |     Hex |
| ------------- | ------------- | ------: |
| success-color | success-color | #32B643 |

### `$warning-color`

| Color name    | CSS variable  |     Hex |
| ------------- | ------------- | ------: |
| warning-color | warning-color | #FFB700 |

### `$link-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| link       | link-color   | #5755D9 |

### `$link-color-dark`

| Color name | CSS variable    |     Hex |
| ---------- | --------------- | ------: |
| link-dark  | link-color-dark | #302ECD |

### `$link-color-light`

| Color name | CSS variable     |     Hex |
| ---------- | ---------------- | ------: |
| link-light | link-color-light | #807FE2 |

### `$code-color`

| Color name | CSS variable |     Hex |
| ---------- | ------------ | ------: |
| code       | code-color   | #D73E48 |

### `$highlight-color`

| Color name | CSS variable    |     Hex |
| ---------- | --------------- | ------: |
| highlight  | highlight-color | #FFE9B3 |

### `$body-bg-color`

| Color name | CSS variable  |     Hex |
| ---------- | ------------- | ------: |
| body-bg    | body-bg-color | #FFFFFF |

### `$body-font-color`

| Color name | CSS variable    |     Hex |
| ---------- | --------------- | ------: |
| body-font  | body-font-color | #3B4351 |

### `$parallax-fade-color`

| Color name    | CSS variable        | Hex |
| ------------- | ------------------- | --: |
| parallax-fade | parallax-fade-color |   - |

## List

An ordered list of the Spectre.css colors that should be respected to achieve order and naming consistency.

<table><thead><tr><th width="178">Color name</th><th width="199">CSS variable</th><th>SASS variable</th><th>Hex</th></tr></thead><tbody><tr><td>basic</td><td>-</td><td>-</td><td>-</td></tr><tr><td>default</td><td>-</td><td>-</td><td>-</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>dark</td><td>dark-color</td><td>$dark-color</td><td>#303742</td></tr><tr><td>light</td><td>light-color</td><td>$light-color</td><td>#FFFFFF</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>accent</td><td>accent-color</td><td>$accent-color</td><td>#9932CC</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>primary</td><td>primary-color</td><td>$primary-color</td><td>#5755D9</td></tr><tr><td>primary-dark</td><td>primary-color-dark</td><td>$primary-color-dark</td><td>#4B49D6</td></tr><tr><td>primary-light</td><td>primary-color-light</td><td>$primary-color-light</td><td>#6362DC</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>secondary</td><td>secondary</td><td>$secondary-color</td><td>#F1F1FC</td></tr><tr><td>secondary dark</td><td>secondary-color-dark</td><td>$secondary-color-dark</td><td>#E5E5F9</td></tr><tr><td>secondary light</td><td>secondary-color-light</td><td>$secondary-color-light</td><td>#FEFEFF</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>gray</td><td>gray</td><td>$gray-color</td><td>#BCC3CE</td></tr><tr><td>gray dark</td><td>gray-color-dark</td><td>$gray-color-dark</td><td>#66758C</td></tr><tr><td>gray light</td><td>gray-color-light</td><td>$gray-color-light</td><td>#F7F8F9</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>bg</td><td>bg-color</td><td>$bg-color</td><td>#F7F8F9</td></tr><tr><td>bg-dark</td><td>bg-color-dark</td><td>$bg-color-dark</td><td>#EEF0F3</td></tr><tr><td>bg-light</td><td>bg-color-light</td><td>$bg-color-light</td><td>#FFFFFF</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>border</td><td>border</td><td>$border-color</td><td>#DADEE4</td></tr><tr><td>border-dark</td><td>border-color-dark</td><td>$border-color-dark</td><td>#BCC3CE</td></tr><tr><td>border-light</td><td>border-color-light</td><td>$border-color-light</td><td>#F1F3F5</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>disabled</td><td>disabled-color</td><td>$disabled-color</td><td>#EEF0F3</td></tr><tr><td>error</td><td>error-color</td><td>$error-color</td><td>#E85600</td></tr><tr><td>info</td><td>info-color</td><td>$info-color</td><td>#D9EDF7</td></tr><tr><td>success</td><td>success-color</td><td>$success-color</td><td>#32B643</td></tr><tr><td>warning</td><td>warning-color</td><td>$warning-color</td><td>#FFB700</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>link</td><td>link-color</td><td>$link-color</td><td>#5755D9</td></tr><tr><td>link-dark</td><td>link-color-dark</td><td>$link-color-dark</td><td>#302ECD</td></tr><tr><td>link-light</td><td>link-color-light</td><td>$link-color-light</td><td>#807FE2</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>code</td><td>code-color</td><td>$code-color</td><td>#D73E48</td></tr><tr><td>highlight</td><td>highlight-color</td><td>$highlight-color</td><td>#FFE9B3</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>body-bg</td><td>body-bg-color</td><td>$body-bg-color</td><td>#FFFFFF</td></tr><tr><td>body-font</td><td>body-font-color</td><td>$body-font-color</td><td>#3B4351</td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>parallax-fade</td><td>parallax-fade-color</td><td>$parallax-fade-color</td><td>-</td></tr></tbody></table>