Colors Schemes
Main Colors
Variables | Value | Properties |
---|---|---|
hsl(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l)) | ||
hsl(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l)) | ||
hsl(var(--ob-body-light-h), var(--ob-body-light-s), var(--ob-body-light-l)) | ||
hsl(var(--ob-body-dark-h), var(--ob-body-dark-s), var(--ob-body-dark-l)) |
Typography Colors
Variables | Value | Properties |
---|---|---|
hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 1) | ||
hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 0.75) | ||
hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 0.55) | ||
hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 1) | ||
hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 0.6) | ||
hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 0.55) |
Base Colors
Primary
Variables | Value | Properties |
---|---|---|
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-50)) | ||
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-100)) | ||
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-200)) | ||
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-300)) | ||
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-400)) | ||
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-500)) | ||
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-600)) | ||
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-700)) | ||
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-800)) | ||
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-900)) |
Secondary
Variables | Value | Properties |
---|---|---|
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-50)) | ||
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-100)) | ||
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-200)) | ||
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-300)) | ||
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-400)) | ||
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-500)) | ||
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-600)) | ||
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-700)) | ||
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-800)) | ||
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-900)) |
Tertiary
Variables | Value | Properties |
---|---|---|
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-50)) | ||
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-100)) | ||
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-200)) | ||
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-300)) | ||
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-400)) | ||
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-500)) | ||
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-600)) | ||
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-700)) | ||
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-800)) | ||
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-900)) |
Neutral
Variables | Value | Properties |
---|---|---|
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-50)) | ||
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-100)) | ||
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-200)) | ||
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-300)) | ||
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-400)) | ||
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-500)) | ||
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-600)) | ||
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-700)) | ||
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-800)) | ||
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-900)) |
Accent
Variables | Value | Properties |
---|---|---|
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-50)) | ||
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-100)) | ||
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-200)) | ||
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-300)) | ||
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-400)) | ||
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-500)) | ||
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-600)) | ||
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-700)) | ||
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-800)) | ||
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-900)) |
Feedback Colors
Informative
Variables | Value | Properties |
---|---|---|
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-50)) | ||
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-100)) | ||
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-200)) | ||
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-300)) | ||
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-400)) | ||
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-500)) | ||
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-600)) | ||
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-700)) | ||
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-800)) | ||
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-900)) |
Success
Variables | Value | Properties |
---|---|---|
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-50)) | ||
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-100)) | ||
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-200)) | ||
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-300)) | ||
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-400)) | ||
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-500)) | ||
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-600)) | ||
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-700)) | ||
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-800)) | ||
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-900)) |
Warning
Variables | Value | Properties |
---|---|---|
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-50)) | ||
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-100)) | ||
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-200)) | ||
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-300)) | ||
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-400)) | ||
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-500)) | ||
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-600)) | ||
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-700)) | ||
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-800)) | ||
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-900)) |
Error
Variables | Value | Properties |
---|---|---|
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-50)) | ||
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-100)) | ||
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-200)) | ||
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-300)) | ||
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-400)) | ||
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-500)) | ||
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-600)) | ||
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-700)) | ||
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-800)) | ||
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-900)) |
Elevations Colors
Variables | Value | Properties |
---|---|---|
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.16), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.16)), var(--ob-body-dark) | ||
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.15), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.15)), var(--ob-body-dark) | ||
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.14), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.14)), var(--ob-body-dark) | ||
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.12), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.12)), var(--ob-body-dark) | ||
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.11), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.11)), var(--ob-body-dark) | ||
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.09), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.09)), var(--ob-body-dark) | ||
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.08), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.08)), var(--ob-body-dark) | ||
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.07), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.07)), var(--ob-body-dark) | ||
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.05), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.05)), var(--ob-body-dark) | ||
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.01), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-secondary-l), 0.01)), var(--ob-body-dark) |
White Opacity Colors
Variables | Value | Properties |
---|---|---|
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.9) | ||
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.8) | ||
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.7) | ||
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.6) | ||
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.5) | ||
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.4) | ||
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.2) | ||
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.1) | ||
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.05) | ||
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.01) |