Skip to content
Primer Design System

Primer Design System

BrandAbout

Site navigation

  • Guides
    • Introduction
      • Introduction
      • Getting started
      • How to contribute
      • Getting started
      • Migration guides
      • Getting started
      • Theming
      • Theme reference
      • Linting
      • System props
      • Core concepts
      • Philosophy
      • Overriding styles
      • Hooks
    • Component lifecycle
    • Component status
      • Accessibility at GitHub
      • Guidelines
      • Tools
      • Alternative text for images
      • Assistive technology announcements
      • Descriptive buttons
      • Focus management
      • Headings
      • Links
      • Semantic HTML
      • Text resize and respacing
      • Tooltips
      • How to contribute
      • Design
      • Documentation
      • Handling new patterns
      • Adding new components
  • Foundations
      • Overview
      • Base scales
      • Accessibility
      • Getting started
      • Token names
      • Color
      • Size
      • Typography
      • Migrating
    • Responsive
      • Getting started
      • Animations
      • Borders
      • Box shadow
      • Colors
      • Details
      • Flexbox
      • Grid
      • Layout
      • Margin
      • Padding
      • Typography
    • Layout
    • Typography
      • Octicons
      • Octovisuals
      • Design guidelines
    • Content
  • UI patterns
    • Data visualization
    • Degraded experiences
    • Empty states
    • Feature onboarding
    • Forms
    • Loading
    • Navigation
    • Notification messaging
    • Progressive disclosure
    • Saving
  • Components
    • Action bar
    • Action list
    • Action menu
    • Anchored overlay
    • Autocomplete
    • Avatar
    • Avatar pair
    • Avatar stack
    • Banner
    • Blankslate
    • Border box
    • Box
    • Branch name
    • Breadcrumbs
    • Button
    • Button group
    • Checkbox
    • Checkbox group
    • Circle badge
    • Circle octicon
    • Clipboard copy
    • Close button
    • Comment box
    • Counter label
    • Data table
    • Details
    • Dialog
    • Form control
    • Header
    • Heading
    • Hidden text expander
    • Icon
    • Icon button
    • Image
    • Image crop
    • Inline message
    • Label
    • Label group
    • Layout
    • Link
    • Markdown
    • Nav list
    • Octicon symbols
    • Overlay
    • Pagehead
    • Page header
    • Page layout
    • Pagination
    • Popover
    • Pointer box
    • Progress bar
    • Radio
    • Radio group
    • Relative time
    • Segmented control
    • Select
    • Select panel
    • Skeleton avatar
    • Skeleton text
    • Skeleton box
    • Spinner
    • Split page layout
    • Stack
    • State label
    • Subnav
    • Tab container
    • Tab nav
    • Tab panels
    • Text
    • Text input
    • Text input with tokens
    • Textarea
    • Timeline
    • Toggle switch
    • Token
    • Tooltip
    • Tree view
    • Truncate
    • Underline nav
    • Underline panels
  • Deprecated components
    • Box overlay
    • Dropdown
    • Filter list
    • Filtered search
    • Flash
    • Menu
    • Select menu
    • Side nav
    • Toast
  • GitHub staff
    • GitHub shared components
  • Native
      • Getting started
      • Foundations
      • Components
      • Getting started
      • Foundations
      • Platforms
      • Foundations
  • GitHub

On this page

  • Foundational
  • Pattern
  1. Foundations
  2. Primitives
  3. Color

Color

An overview of all available color CSS variables
On this page
  • Foundational
  • Pattern

Foundational

Foreground

View in Storybook

Background

View in Storybook

Border

View in Storybook

Shadow

View in Storybook

Pattern

Button

View in Storybook

Control

View in Storybook

Data visualization

View in Storybook

Focus

View in Storybook

Overlay

View in Storybook

Footer

Edit this page on GitHub
2 contributorslukasoppermannlangermank
Last edited by lukasoppermann on June 13, 2024