Color code

After reading and 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

--s-accent-color-h --s-accent-color-l --s-accent-color-s --s-accent-color-a

#9932CC

`$primary-color`

Color name

CSS variable

Hex

primary

--s-primary-color-h --s-primary-color-s --s-primary-color-l --s-primary-color-a

#5755D9

`$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`

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`

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`

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-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

#EEF0F3

`$error-color`

Color name

CSS variable

Hex

error-color

#E85600

`$info-color`

Color name

CSS variable

Hex

info-color

#D9EDF7

`$success-color`

Color name

CSS variable

Hex

success-color

#32B643

`$warning-color`

Color name

CSS variable

Hex

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.

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-color

#F1F1FC

secondary dark

secondary-color-dark

$secondary-color-dark

#E5E5F9

secondary light

secondary-color-light

$secondary-color-light

#FEFEFF

gray

$gray-color

#BCC3CE

gray dark

gray-color-dark

$gray-color-dark

#66758C

gray light

gray-color-light

$gray-color-light

#F7F8F9

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-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

PreviousUsing CSS variable color NextOther

Last updated 2 years ago

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

--s-accent-color-h --s-accent-color-l --s-accent-color-s --s-accent-color-a

#9932CC

`$primary-color`

Color name

CSS variable

Hex

primary

--s-primary-color-h --s-primary-color-s --s-primary-color-l --s-primary-color-a

#5755D9

`$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`

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`

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`

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-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

#EEF0F3

`$error-color`

Color name

CSS variable

Hex

error-color

#E85600

`$info-color`

Color name

CSS variable

Hex

info-color

#D9EDF7

`$success-color`

Color name

CSS variable

Hex

success-color

#32B643

`$warning-color`

Color name

CSS variable

Hex

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.

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-color

#F1F1FC

secondary dark

secondary-color-dark

$secondary-color-dark

#E5E5F9

secondary light

secondary-color-light

$secondary-color-light

#FEFEFF

gray

$gray-color

#BCC3CE

gray dark

gray-color-dark

$gray-color-dark

#66758C

gray light

gray-color-light

$gray-color-light

#F7F8F9

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-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