Color

Styles

Note that not all colors combine with one another with sufficient color contrast to meet WCAG AA standards. Each of the following cards includes the associated accessible accent color.

CSS custom props

:root {

  /* gray */
  --prs-c-gray-900: #080808; /* blackish */
  --prs-c-gray-800: #242424; /* ultra-dark */
  --prs-c-gray-700: #383838; /* very-dark */
  --prs-c-gray-600: #686868; /* dark */
  --prs-c-gray-500: #989898; /* medium-dark */
  --prs-c-gray: var(--prs-c-gray-500);
  --prs-c-gray-400: #C8C8C8; /* medium */
  --prs-c-gray-300: #DDDDDD; /* light */
  --prs-c-gray-200: #F3F3F3; /* very-light */
  --prs-c-gray-100: #F8F8F8; /* off-white */
  /* aqua */
  --prs-c-aqua-600: #205460; /* dark */
  --prs-c-aqua-500: #00758E; /* DEFAULT */
  --prs-c-aqua: var(--prs-c-aqua-500);
  --prs-c-aqua-400: #45A5B5; /* medium */
  --prs-c-aqua-300: #A2D6DD; /* light */
  --prs-c-aqua-200: #CFF3F9; /* very-light */
  /* red */
  --prs-c-red-600: #A51426; /* dark */
  --prs-c-red-500: #DA1B2C; /* DEFAULT */
  --prs-c-red: var(--prs-c-red-500);
  --prs-c-red-400: #EF5656; /* medium */
  --prs-c-red-300: #FFAFAF; /* light */
  --prs-c-red-200: #FFE7E5; /* very-light */
  /* green */
  --prs-c-green-600: #2C5E20; /* dark */
  --prs-c-green-500: #3B822E; /* DEFAULT */
  --prs-c-green: var(--prs-c-green-500);
  --prs-c-green-400: #68B75F; /* medium */
  --prs-c-green-300: #ACDBA2; /* light */
  --prs-c-green-200: #DAF4D4; /* very-light */
  /* blue */
  --prs-c-blue-600: #004C72; /* dark */
  --prs-c-blue-500: #006EB8; /* DEFAULT */
  --prs-c-blue: var(--prs-c-blue-500);
  --prs-c-blue-400: #3192D3; /* medium */
  --prs-c-blue-300: #B0DAFF; /* light */
  --prs-c-blue-200: #E0F1FF; /* very-light */
  /* orange */
  --prs-c-orange-600: #A83D0E; /* dark */
  --prs-c-orange-500: #DD5714; /* DEFAULT */
  --prs-c-orange: var(--prs-c-orange-500);
  --prs-c-orange-400: #FF8A57; /* medium */
  --prs-c-orange-300: #FFC196; /* light */
  --prs-c-orange-200: #FFE5D3; /* very-light */
  /* teal */
  --prs-c-teal-600: #16664B; /* dark */
  --prs-c-teal-500: #218466; /* DEFAULT */
  --prs-c-teal: var(--prs-c-teal-500);
  --prs-c-teal-400: #5FB79C; /* medium */
  --prs-c-teal-300: #AEE5D3; /* light */
  --prs-c-teal-200: #DBFFF3; /* very-light */
  /* yellow */
  --prs-c-yellow-600: #74600C; /* dark */
  --prs-c-yellow-500: #B79E25; /* DEFAULT */
  --prs-c-yellow: var(--prs-c-yellow-500);
  --prs-c-yellow-400: #E5D676; /* medium */
  --prs-c-yellow-300: #FAF2A9; /* light */
  --prs-c-yellow-200: #FFFBD7; /* very-light */
  /* purple */
  --prs-c-purple-600: #543B50; /* dark */
  --prs-c-purple-500: #865F7F; /* DEFAULT */
  --prs-c-purple: var(--prs-c-purple-500);
  --prs-c-purple-400: #B286AF; /* medium */
  --prs-c-purple-300: #E5C6E3; /* light */
  --prs-c-purple-200: #FFE6FD; /* very-light */
  /* magenta */
  --prs-c-magenta-600: #562135; /* dark */
  --prs-c-magenta-500: #882345; /* DEFAULT */
  --prs-c-magenta: var(--prs-c-magenta-500);
  --prs-c-magenta-400: #B26487; /* medium */
  --prs-c-magenta-300: #EDB0CE; /* light */
  --prs-c-magenta-200: #FFE6F3; /* very-light */
}

Tailwind Config

theme: {
  extend: {
    colors: {
      gray: {
        900: '#080808',
        800: '#242424',
        700: '#383838',
        600: '#686868',
        DEFAULT: '#989898',
        500: '#989898'
        400: '#C8C8C8',
        300: '#DDDDDD',
        200: '#F3F3F3',
        100: '#F8F8F8',
      }
      aqua: {
        600: '#205460',
        DEFAULT: '#00758E',
        500: '#00758E'
        400: '#45A5B5',
        300: '#A2D6DD',
        200: '#CFF3F9',
      }
      red: {
        600: '#A51426',
        DEFAULT: '#DA1B2C',
        500: '#DA1B2C'
        400: '#EF5656',
        300: '#FFAFAF',
        200: '#FFE7E5',
      }
      green: {
        600: '#2C5E20',
        DEFAULT: '#3B822E',
        500: '#3B822E'
        400: '#68B75F',
        300: '#ACDBA2',
        200: '#DAF4D4',
      }
      blue: {
        600: '#004C72',
        DEFAULT: '#006EB8',
        500: '#006EB8'
        400: '#3192D3',
        300: '#B0DAFF',
        200: '#E0F1FF',
      }
      orange: {
        600: '#A83D0E',
        DEFAULT: '#DD5714',
        500: '#DD5714'
        400: '#FF8A57',
        300: '#FFC196',
        200: '#FFE5D3',
      }
      teal: {
        600: '#16664B',
        DEFAULT: '#218466',
        500: '#218466'
        400: '#5FB79C',
        300: '#AEE5D3',
        200: '#DBFFF3',
      }
      yellow: {
        600: '#74600C',
        DEFAULT: '#B79E25',
        500: '#B79E25'
        400: '#E5D676',
        300: '#FAF2A9',
        200: '#FFFBD7',
      }
      purple: {
        600: '#543B50',
        DEFAULT: '#865F7F',
        500: '#865F7F'
        400: '#B286AF',
        300: '#E5C6E3',
        200: '#FFE6FD',
      }
      magenta: {
        600: '#562135',
        DEFAULT: '#882345',
        500: '#882345'
        400: '#B26487',
        300: '#EDB0CE',
        200: '#FFE6F3',
      }
    }
  }
}

colors.json

{
  "gray": {
    "blackish": "#080808",
    "ultra-dark": "#242424",
    "very-dark": "#383838",
    "dark": "#686868",
    "medium-dark": "#989898",
    "medium": "#C8C8C8",
    "light": "#DDDDDD",
    "very-light": "#F3F3F3",
    "off-white": "#F8F8F8"
  },
  "aqua": {
    "dark": "#205460",
    "default": "#00758E",
    "medium": "#45A5B5",
    "light": "#A2D6DD",
    "very-light": "#CFF3F9"
  },
  "red": {
    "dark": "#A51426",
    "default": "#DA1B2C",
    "medium": "#EF5656",
    "light": "#FFAFAF",
    "very-light": "#FFE7E5"
  },
  "green": {
    "dark": "#2C5E20",
    "default": "#3B822E",
    "medium": "#68B75F",
    "light": "#ACDBA2",
    "very-light": "#DAF4D4"
  },
  "blue": {
    "dark": "#004C72",
    "default": "#006EB8",
    "medium": "#3192D3",
    "light": "#B0DAFF",
    "very-light": "#E0F1FF"
  },
  "orange": {
    "dark": "#A83D0E",
    "default": "#DD5714",
    "medium": "#FF8A57",
    "light": "#FFC196",
    "very-light": "#FFE5D3"
  },
  "teal": {
    "dark": "#16664B",
    "default": "#218466",
    "medium": "#5FB79C",
    "light": "#AEE5D3",
    "very-light": "#DBFFF3"
  },
  "yellow": {
    "dark": "#74600C",
    "default": "#B79E25",
    "medium": "#E5D676",
    "light": "#FAF2A9",
    "very-light": "#FFFBD7"
  },
  "purple": {
    "dark": "#543B50",
    "default": "#865F7F",
    "medium": "#B286AF",
    "light": "#E5C6E3",
    "very-light": "#FFE6FD"
  },
  "magenta": {
    "dark": "#562135",
    "default": "#882345",
    "medium": "#B26487",
    "light": "#EDB0CE",
    "very-light": "#FFE6F3"
  }
}