Color code
After reading Settable SCSS and 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
$accent-color| Color name | CSS variable | Hex |
|---|---|---|
accent | --s-accent-color-h --s-accent-color-l --s-accent-color-s --s-accent-color-a |
|
$primary-color
$primary-color| Color name | CSS variable | Hex |
|---|---|---|
primary | --s-primary-color-h --s-primary-color-s --s-primary-color-l --s-primary-color-a |
|
$primary-color-dark
$primary-color-dark| Color name | CSS variable | Hex |
|---|---|---|
primary-dark | --s-primary-color-dark-h --s-primary-color-dark-l --s-primary-color-dark-s --s-primary-color-dark-a | #4B49D6 |
$primary-color-light
$primary-color-light| Color name | CSS variable | Hex |
|---|---|---|
primary-light | --s-primary-color-light-h --s-primary-color-light-l --s-primary-color-light-s --s-primary-color-light-a | #6362DC |
$secondary-color
$secondary-color| Color name | CSS variable | Hex |
|---|---|---|
secondary | --s-secondary-color-h --s-secondary-color-l --s-secondary-color-s --s-secondary-color-a | #F1F1FC |
$secondary-color-dark
$secondary-color-dark| Color name | CSS variable | Hex |
|---|---|---|
secondary-dark | secondary-color-dark | #E5E5F9 |
$secondary-color-light
$secondary-color-light| Color name | CSS variable | Hex |
|---|---|---|
secondary-light | secondary-color-light | #FEFEFF |
$gray-color
$gray-color| Color name | CSS variable | Hex |
|---|---|---|
gray | gray-color | #BCC3CE |
$gray-color-dark
$gray-color-dark| Color name | CSS variable | Hex |
|---|---|---|
gray-dark | gray-color-dark | #66758C |
$gray-color-light
$gray-color-light| Color name | CSS variable | Hex |
|---|---|---|
gray-light | gray-color-light | #F7F8F9 |
$bg-color
$bg-color| Color name | CSS variable | Hex |
|---|---|---|
bg | bg-color | #F7F8F9 |
$bg-color-dark
$bg-color-dark| Color name | CSS variable | Hex |
|---|---|---|
bg-dark | bg-color-dark | #EEF0F3 |
$bg-color-light
$bg-color-light| Color name | CSS variable | Hex |
|---|---|---|
bg-light | bg-color-light | #FFFFFF |
$border-color
$border-color| Color name | CSS variable | Hex |
|---|---|---|
border | border-color | #DADEE4 |
$border-color-dark
$border-color-dark| Color name | CSS variable | Hex |
|---|---|---|
border-dark | border-color-dark | #BCC3CE |
$border-color-light
$border-color-light| Color name | CSS variable | Hex |
|---|---|---|
border-light | border-color-light | #F1F3F5 |
$disabled-color
$disabled-color| Color name | CSS variable | Hex |
|---|---|---|
disabled-color | disabled-color | #EEF0F3 |
$error-color
$error-color| Color name | CSS variable | Hex |
|---|---|---|
error-color | error-color | #E85600 |
$info-color
$info-color| Color name | CSS variable | Hex |
|---|---|---|
info-color | info-color | #D9EDF7 |
$success-color
$success-color| Color name | CSS variable | Hex |
|---|---|---|
success-color | success-color | #32B643 |
$warning-color
$warning-color| Color name | CSS variable | Hex |
|---|---|---|
warning-color | warning-color | #FFB700 |
$link-color
$link-color| Color name | CSS variable | Hex |
|---|---|---|
link | link-color | #5755D9 |
$link-color-dark
$link-color-dark| Color name | CSS variable | Hex |
|---|---|---|
link-dark | link-color-dark | #302ECD |
$link-color-light
$link-color-light| Color name | CSS variable | Hex |
|---|---|---|
link-light | link-color-light | #807FE2 |
$code-color
$code-color| Color name | CSS variable | Hex |
|---|---|---|
code | code-color | #D73E48 |
$highlight-color
$highlight-color| Color name | CSS variable | Hex |
|---|---|---|
highlight | highlight-color | #FFE9B3 |
$body-bg-color
$body-bg-color| Color name | CSS variable | Hex |
|---|---|---|
body-bg | body-bg-color | #FFFFFF |
$body-font-color
$body-font-color| Color name | CSS variable | Hex |
|---|---|---|
body-font | body-font-color | #3B4351 |
$parallax-fade-color
$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.
| Color name | CSS variable | SASS variable | Hex |
|---|---|---|---|
basic | - | - | - |
default | - | - | - |
dark | dark-color | $dark-color | #303742 |
light | light-color | $light-color | #FFFFFF |
accent | accent-color | $accent-color | #9932CC |
primary | primary-color | $primary-color | #5755D9 |
primary-dark | primary-color-dark | $primary-color-dark | #4B49D6 |
primary-light | primary-color-light | $primary-color-light | #6362DC |
secondary | secondary | $secondary-color | #F1F1FC |
secondary dark | secondary-color-dark | $secondary-color-dark | #E5E5F9 |
secondary light | secondary-color-light | $secondary-color-light | #FEFEFF |
gray | gray | $gray-color | #BCC3CE |
gray dark | gray-color-dark | $gray-color-dark | #66758C |
gray light | gray-color-light | $gray-color-light | #F7F8F9 |
bg | bg-color | $bg-color | #F7F8F9 |
bg-dark | bg-color-dark | $bg-color-dark | #EEF0F3 |
bg-light | bg-color-light | $bg-color-light | #FFFFFF |
border | border | $border-color | #DADEE4 |
border-dark | border-color-dark | $border-color-dark | #BCC3CE |
border-light | border-color-light | $border-color-light | #F1F3F5 |
disabled | disabled-color | $disabled-color | #EEF0F3 |
error | error-color | $error-color | #E85600 |
info | info-color | $info-color | #D9EDF7 |
success | success-color | $success-color | #32B643 |
warning | warning-color | $warning-color | #FFB700 |
link | link-color | $link-color | #5755D9 |
link-dark | link-color-dark | $link-color-dark | #302ECD |
link-light | link-color-light | $link-color-light | #807FE2 |
code | code-color | $code-color | #D73E48 |
highlight | highlight-color | $highlight-color | #FFE9B3 |
body-bg | body-bg-color | $body-bg-color | #FFFFFF |
body-font | body-font-color | $body-font-color | #3B4351 |
parallax-fade | parallax-fade-color | $parallax-fade-color | - |
Last updated