Color

Usage

Colors are available from the core package. Colors are usable in CSS:

@import '@pluralsight/ps-design-system-core';
.mySelector {
color: var(--psColorsBlue6);
}

Colors are also usable in JavaScript:

import {
colorsBlue
/* other named exports */
} from '@pluralsight/ps-design-system-core'
myCssInJsSolution({
color: colorsBlue[6]
})

Background colors

There are three background colors available to use for surfaces in the app. The lower the number, the lower the elevation of the surface. Background 1 Is the app background.

Dark

Background - Dark 1
CSS: psColorsBackgroundDark1
JS: colorsBackgroundDark[1]
#0D0F12
Background - Dark 2
CSS: psColorsBackgroundDark2
JS: colorsBackgroundDark[2]
#181C20
Background - Dark 3
CSS: psColorsBackgroundDark3
JS: colorsBackgroundDark[3]
#1E2429

Light

Background - Light 1
CSS: psColorsBackgroundLight1
JS: colorsBackgroundLight[1]
#F0F3F5
Background - Light 2
CSS: psColorsBackgroundLight2
JS: colorsBackgroundLight[2]
#F7F9FA
Background - Light 3
CSS: psColorsBackgroundLight3
JS: colorsBackgroundLight[3]
#FFFFFF

Utility color

Use utility color with transparency to lighten or darken backgrounds beyond the three colors provided.

Utility base coma seperated values

Utility
CSS: psColorsBackgroundUtilityCsv
JS: colorsBackgroundUtilityCsv
N/A (138,153,168)

Utility with transparency on a dark background

Utility-25
CSS: psColorsBackgroundUtility25
JS: colorsBackgroundUtility[25]
rgba(138,153,168, 0.25)
Utility-30
CSS: psColorsBackgroundUtility30
JS: colorsBackgroundUtility[30]
rgba(138,153,168, 0.30)
Utility-40
CSS: psColorsBackgroundUtility40
JS: colorsBackgroundUtility[40]
rgba(138,153,168, 0.40)

Utility with transparency on a light background

Utility-25
CSS: psColorsBackgroundUtility25
JS: colorsBackgroundUtility[25]
rgba(138,153,168, 0.25)
Utility-30
CSS: psColorsBackgroundUtility30
JS: colorsBackgroundUtility[30]
rgba(138,153,168, 0.30)
Utility-40
CSS: psColorsBackgroundUtility40
JS: colorsBackgroundUtility[40]
rgba(138,153,168, 0.40)
Primary Action - Background
CSS: psColorsPrimaryActionBackground
JS: colorsPrimaryAction.background
#0074AB
Primary Action Text - On Dark
CSS: psColorsPrimaryActionTextDarkTheme
JS: colorsPrimaryAction.textDarkTheme
#2EA0D6
Primary Action Text - On Light
CSS: psColorsPrimaryActionTextLightTheme
JS: colorsPrimaryAction.textLightTheme
#0074AB

Status colors

Status - Success
CSS: psColorsStatusSuccess
JS: colorsStatus.success
#009E52
Status - Warning
CSS: psColorsStatusWarning
JS: colorsStatus.warning
#FAD000
Status - Error
CSS: psColorsStatusError
JS: colorsStatus.error
#D21C09
Status - Info
CSS: psColorsStatusInfo
JS: colorsStatus.info
#0084BD

Text & icon colors

On dark backgrounds

Text & Icons - On Dark - High Contrast
CSS: psColorsTextIconHighOnDark
JS: colorsTextIcon.highOnDark
#FFFFFF, 95% opacity
Text & Icons - On Dark - Low Contrast
CSS: psColorsTextIconLowOnDark
JS: colorsTextIcon.lowOnDark
#FFFFFF, 65% opacity

On light backgrounds

Text & Icons - On Light - High Contrast
CSS: psColorsTextIconHighOnLight
JS: colorsTextIcon.highOnLight
#000000, 95% opacity
Text & Icons - On Light - Low Contrast
CSS: psColorsTextIconLowOnLight
JS: colorsTextIcon.lowOnLight
#000000, 55% opacity

Border colors

On dark backgrounds

Border - On Dark - High Contrast
CSS: psColorsBorderHighOnDark
JS: colorsBorder.highOnDark
#FFFFFF, 30% opacity
Border - On Dark - Low Contrast
CSS: psColorsBorderLowOnDark
JS: colorsBorder.lowOnDark
#FFFFFF, 15% opacity

On light backgrounds

Border - On Light - High Contrast
CSS: psColorsBorderHighOnLight
JS: colorsBorder.highOnLight
#000000, 30% opacity
Border - On Light - Low Contrast
CSS: psColorsBorderLowOnLight
JS: colorsBorder.lowOnLight
#000000, 15% opacity

Brand gradients

Brand Gradient - Skills
CSS: psColorsGradientSkillsBackground
JS: colorsGradient.skillsBackground
#E80A89 to #F15B2A
Brand Gradient - Flow
CSS: psColorsGradientFlowBackground
JS: colorsGradient.flowBackground
#2968B2 to #27AAE1

Code colors

Code - White
CSS: psColorsCodeWhite
JS: colorsCode.white
#F2F2F2
Code - Gray
CSS: psColorsCodeGray
JS: colorsCode.gray
#AAAAAA
Code - Orange
CSS: psColorsCodeOrange
JS: colorsCode.orange
#FF9466
Code - Yellow
CSS: psColorsCodeYellow
JS: colorsCode.yellow
#FFCA80
Code - Green
CSS: psColorsCodeGreen
JS: colorsCode.green
#B8CC7A
Code - Turquoise
CSS: psColorsCodeTurquoise
JS: colorsCode.turquoise
#ABD9C6
Code - Blue
CSS: psColorsCodeBlue
JS: colorsCode.blue
#8AC7E6
Code - Purple
CSS: psColorsCodePurple
JS: colorsCode.purple
#E695BD
Code - Sand
CSS: psColorsCodeSand
JS: colorsCode.sand
#D99077

Neutrals

Black
CSS: psColorsBlack
JS: colorsBlack
#000000
White
CSS: psColorsWhite
JS: colorsWhite
#FFFFFF

All colors

These are additional colors beyond the core set. They can be used for things like illustrations, complex data visualizations, etc.

Blue 1
CSS: psColorsBlue1
JS: colorsBlue[1]
#D9F1FF
Blue 2
CSS: psColorsBlue2
JS: colorsBlue[2]
#B9E4FD
Blue 3
CSS: psColorsBlue3
JS: colorsBlue[3]
#8ED1F6
Blue 4
CSS: psColorsBlue4
JS: colorsBlue[4]
#58B9EB
Blue 5
CSS: psColorsBlue5
JS: colorsBlue[5]
#2EA0D6
Blue 6
CSS: psColorsBlue6
JS: colorsBlue[6]
#0084BD
Blue 7
CSS: psColorsBlue7
JS: colorsBlue[7]
#0074AB
Blue 8
CSS: psColorsBlue8
JS: colorsBlue[8]
#006395
Blue 9
CSS: psColorsBlue9
JS: colorsBlue[9]
#005685
Blue 10
CSS: psColorsBlue10
JS: colorsBlue[10]
#00446B
Teal 1
CSS: psColorsTeal1
JS: colorsTeal[1]
#D5FAF5
Teal 2
CSS: psColorsTeal2
JS: colorsTeal[2]
#AFFAEF
Teal 3
CSS: psColorsTeal3
JS: colorsTeal[3]
#84F0E1
Teal 4
CSS: psColorsTeal4
JS: colorsTeal[4]
#5CE6D4
Teal 5
CSS: psColorsTeal5
JS: colorsTeal[5]
#2FD1BE
Teal 6
CSS: psColorsTeal6
JS: colorsTeal[6]
#00BAA5
Teal 7
CSS: psColorsTeal7
JS: colorsTeal[7]
#00A894
Teal 8
CSS: psColorsTeal8
JS: colorsTeal[8]
#009380
Teal 9
CSS: psColorsTeal9
JS: colorsTeal[9]
#007A6A
Teal 10
CSS: psColorsTeal10
JS: colorsTeal[10]
#006658
Green 1
CSS: psColorsGreen1
JS: colorsGreen[1]
#D9FAE5
Green 2
CSS: psColorsGreen2
JS: colorsGreen[2]
#ADF0C8
Green 3
CSS: psColorsGreen3
JS: colorsGreen[3]
#82E2AB
Green 4
CSS: psColorsGreen4
JS: colorsGreen[4]
#57D08E
Green 5
CSS: psColorsGreen5
JS: colorsGreen[5]
#2BB970
Green 6
CSS: psColorsGreen6
JS: colorsGreen[6]
#009E52
Green 7
CSS: psColorsGreen7
JS: colorsGreen[7]
#008F46
Green 8
CSS: psColorsGreen8
JS: colorsGreen[8]
#007C3A
Green 9
CSS: psColorsGreen9
JS: colorsGreen[9]
#00672E
Green 10
CSS: psColorsGreen10
JS: colorsGreen[10]
#005724
Lime 1
CSS: psColorsLime1
JS: colorsLime[1]
#ECFFC7
Lime 2
CSS: psColorsLime2
JS: colorsLime[2]
#DEFFA3
Lime 3
CSS: psColorsLime3
JS: colorsLime[3]
#CCFC7A
Lime 4
CSS: psColorsLime4
JS: colorsLime[4]
#B8F052
Lime 5
CSS: psColorsLime5
JS: colorsLime[5]
#A3E029
Lime 6
CSS: psColorsLime6
JS: colorsLime[6]
#8CCA08
Lime 7
CSS: psColorsLime7
JS: colorsLime[7]
#7BB600
Lime 8
CSS: psColorsLime8
JS: colorsLime[8]
#6BA300
Lime 9
CSS: psColorsLime9
JS: colorsLime[9]
#588A00
Lime 10
CSS: psColorsLime10
JS: colorsLime[10]
#4C7700
Yellow 1
CSS: psColorsYellow1
JS: colorsYellow[1]
#FFFBCC
Yellow 2
CSS: psColorsYellow2
JS: colorsYellow[2]
#FFF7A8
Yellow 3
CSS: psColorsYellow3
JS: colorsYellow[3]
#FFF380
Yellow 4
CSS: psColorsYellow4
JS: colorsYellow[4]
#FFEB57
Yellow 5
CSS: psColorsYellow5
JS: colorsYellow[5]
#FFDF29
Yellow 6
CSS: psColorsYellow6
JS: colorsYellow[6]
#FAD000
Yellow 7
CSS: psColorsYellow7
JS: colorsYellow[7]
#E2B500
Yellow 8
CSS: psColorsYellow8
JS: colorsYellow[8]
#CC9E00
Yellow 9
CSS: psColorsYellow9
JS: colorsYellow[9]
#B28300
Yellow 10
CSS: psColorsYellow10
JS: colorsYellow[10]
#946500
Orange 1
CSS: psColorsOrange1
JS: colorsOrange[1]
#FFECD1
Orange 2
CSS: psColorsOrange2
JS: colorsOrange[2]
#FFDCAD
Orange 3
CSS: psColorsOrange3
JS: colorsOrange[3]
#FFCD8A
Orange 4
CSS: psColorsOrange4
JS: colorsOrange[4]
#FFBA61
Orange 5
CSS: psColorsOrange5
JS: colorsOrange[5]
#FFA43E
Orange 6
CSS: psColorsOrange6
JS: colorsOrange[6]
#F59127
Orange 7
CSS: psColorsOrange7
JS: colorsOrange[7]
#E27A18
Orange 8
CSS: psColorsOrange8
JS: colorsOrange[8]
#CB670B
Orange 9
CSS: psColorsOrange9
JS: colorsOrange[9]
#B85500
Orange 10
CSS: psColorsOrange10
JS: colorsOrange[10]
#9E4100
Red 1
CSS: psColorsRed1
JS: colorsRed[1]
#FFD6D6
Red 2
CSS: psColorsRed2
JS: colorsRed[2]
#FFB3B3
Red 3
CSS: psColorsRed3
JS: colorsRed[3]
#FF8A8A
Red 4
CSS: psColorsRed4
JS: colorsRed[4]
#F86968
Red 5
CSS: psColorsRed5
JS: colorsRed[5]
#E94A3F
Red 6
CSS: psColorsRed6
JS: colorsRed[6]
#D21C09
Red 7
CSS: psColorsRed7
JS: colorsRed[7]
#C00F00
Red 8
CSS: psColorsRed8
JS: colorsRed[8]
#AB0600
Red 9
CSS: psColorsRed9
JS: colorsRed[9]
#920000
Red 10
CSS: psColorsRed10
JS: colorsRed[10]
#750000
Pink 1
CSS: psColorsPink1
JS: colorsPink[1]
#FFDDEB
Pink 2
CSS: psColorsPink2
JS: colorsPink[2]
#FFC2DB
Pink 3
CSS: psColorsPink3
JS: colorsPink[3]
#FFA3C8
Pink 4
CSS: psColorsPink4
JS: colorsPink[4]
#FF8AB5
Pink 5
CSS: psColorsPink5
JS: colorsPink[5]
#F66FA1
Pink 6
CSS: psColorsPink6
JS: colorsPink[6]
#E7558B
Pink 7
CSS: psColorsPink7
JS: colorsPink[7]
#D1487B
Pink 8
CSS: psColorsPink8
JS: colorsPink[8]
#C13368
Pink 9
CSS: psColorsPink9
JS: colorsPink[9]
#A22554
Pink 10
CSS: psColorsPink10
JS: colorsPink[10]
#8A1A45
Purple 1
CSS: psColorsPurple1
JS: colorsPurple[1]
#E9DEFF
Purple 2
CSS: psColorsPurple2
JS: colorsPurple[2]
#D6C2FF
Purple 3
CSS: psColorsPurple3
JS: colorsPurple[3]
#C0A3FF
Purple 4
CSS: psColorsPurple4
JS: colorsPurple[4]
#A883F8
Purple 5
CSS: psColorsPurple5
JS: colorsPurple[5]
#956CED
Purple 6
CSS: psColorsPurple6
JS: colorsPurple[6]
#8359DF
Purple 7
CSS: psColorsPurple7
JS: colorsPurple[7]
#7048C6
Purple 8
CSS: psColorsPurple8
JS: colorsPurple[8]
#5934AC
Purple 9
CSS: psColorsPurple9
JS: colorsPurple[9]
#482592
Purple 10
CSS: psColorsPurple10
JS: colorsPurple[10]
#351973