@salesforce-ux/design-system/design-tokens/aliases/color-palettes.yml

Salesforce Lightning Design System

# Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
# Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

aliases:
  ## COOL GRAYS
  PALETTE_COOL_GRAY_1: "#FFFFFF"
  PALETTE_COOL_GRAY_2: "#F9F9FA"
  PALETTE_COOL_GRAY_3: "#F2F2F3"
  PALETTE_COOL_GRAY_4: "#E9EAEC"
  PALETTE_COOL_GRAY_5: "#D9DBDD"
  PALETTE_COOL_GRAY_6: "#C4C6CA"
  PALETTE_COOL_GRAY_7: "#ABADB0"
  PALETTE_COOL_GRAY_8: "#919297"
  PALETTE_COOL_GRAY_9: "#6B6D70"
  PALETTE_COOL_GRAY_10: "#4E5356"
  PALETTE_COOL_GRAY_11: "#3E4041"
  PALETTE_COOL_GRAY_12: "#292C2E"
  PALETTE_COOL_GRAY_13: "#070808"

  ## WARM GRAYS
  PALETTE_WARM_GRAY_1: "#FFFFFF"
  PALETTE_WARM_GRAY_2: "#fafaf9"
  PALETTE_WARM_GRAY_3: "#f3f2f2"
  PALETTE_WARM_GRAY_4: "#ecebea"
  PALETTE_WARM_GRAY_5: "#dddbda"
  PALETTE_WARM_GRAY_6: "#c9c7c5"
  PALETTE_WARM_GRAY_7: "#b0adab"
  PALETTE_WARM_GRAY_8: "#969492"
  PALETTE_WARM_GRAY_9: "#706e6b"
  PALETTE_WARM_GRAY_10: "#514f4d"
  PALETTE_WARM_GRAY_11: "#3e3e3c"
  PALETTE_WARM_GRAY_12: "#2B2826"
  PALETTE_WARM_GRAY_13: "#080707"

  ## GRAYS (APPLIED)
  PALETTE_GRAY_1: "{!PALETTE_WARM_GRAY_1}"
  PALETTE_GRAY_2: "{!PALETTE_WARM_GRAY_2}"
  PALETTE_GRAY_3: "{!PALETTE_WARM_GRAY_3}"
  PALETTE_GRAY_4: "{!PALETTE_WARM_GRAY_4}"
  PALETTE_GRAY_5: "{!PALETTE_WARM_GRAY_5}"
  PALETTE_GRAY_6: "{!PALETTE_WARM_GRAY_6}"
  PALETTE_GRAY_7: "{!PALETTE_WARM_GRAY_7}"
  PALETTE_GRAY_8: "{!PALETTE_WARM_GRAY_8}"
  PALETTE_GRAY_9: "{!PALETTE_WARM_GRAY_9}"
  PALETTE_GRAY_10: "{!PALETTE_WARM_GRAY_10}"
  PALETTE_GRAY_11: "{!PALETTE_WARM_GRAY_11}"
  PALETTE_GRAY_12: "{!PALETTE_WARM_GRAY_12}"
  PALETTE_GRAY_13: "{!PALETTE_WARM_GRAY_13}"

  ## TRANSPARENT GRAYS BASED ON DARKEST GRAY (PALETTE_GRAY_12)
  PALETTE_DARK_GRAY_TRANSPARENT_10: "rgba(8, 7, 7, 0.1)"
  PALETTE_DARK_GRAY_TRANSPARENT_20: "rgba(8, 7, 7, 0.2)"
  PALETTE_DARK_GRAY_TRANSPARENT_30: "rgba(8, 7, 7, 0.3)"
  PALETTE_DARK_GRAY_TRANSPARENT_40: "rgba(8, 7, 7, 0.4)"
  PALETTE_DARK_GRAY_TRANSPARENT_50: "rgba(8, 7, 7, 0.5)"
  PALETTE_DARK_GRAY_TRANSPARENT_60: "rgba(8, 7, 7, 0.6)"
  PALETTE_DARK_GRAY_TRANSPARENT_70: "rgba(8, 7, 7, 0.7)"
  PALETTE_DARK_GRAY_TRANSPARENT_80: "rgba(8, 7, 7, 0.8)"
  PALETTE_DARK_GRAY_TRANSPARENT_90: "rgba(8, 7, 7, 0.9)"

  ## TRANSPARENT GRAYS BASED ON LIGHTEST GRAY (PALETTE_GRAY_1)
  PALETTE_LIGHT_GRAY_TRANSPARENT_10: "rgba(255, 255, 255, 0.1)"
  PALETTE_LIGHT_GRAY_TRANSPARENT_20: "rgba(255, 255, 255, 0.2)"
  PALETTE_LIGHT_GRAY_TRANSPARENT_30: "rgba(255, 255, 255, 0.3)"
  PALETTE_LIGHT_GRAY_TRANSPARENT_40: "rgba(255, 255, 255, 0.4)"
  PALETTE_LIGHT_GRAY_TRANSPARENT_50: "rgba(255, 255, 255, 0.5)"
  PALETTE_LIGHT_GRAY_TRANSPARENT_60: "rgba(255, 255, 255, 0.6)"
  PALETTE_LIGHT_GRAY_TRANSPARENT_70: "rgba(255, 255, 255, 0.7)"
  PALETTE_LIGHT_GRAY_TRANSPARENT_80: "rgba(255, 255, 255, 0.8)"
  PALETTE_LIGHT_GRAY_TRANSPARENT_90: "rgba(255, 255, 255, 0.9)"

  ## WHITES (APPLIED)
  WHITE: "#FFFFFF"
  WHITE_TRANSPARENT_10: "rgba(255, 255, 255, 0.10)"
  WHITE_TRANSPARENT_15: "rgba(255, 255, 255, 0.15)"
  WHITE_TRANSPARENT_20: "rgba(255, 255, 255, 0.20)"
  WHITE_TRANSPARENT_30: "rgba(255, 255, 255, 0.30)"
  WHITE_TRANSPARENT_40: "rgba(255, 255, 255, 0.40)"
  WHITE_TRANSPARENT_50: "rgba(255, 255, 255, 0.50)"
  WHITE_TRANSPARENT_60: "rgba(255, 255, 255, 0.60)"
  WHITE_TRANSPARENT_75: "rgba(255, 255, 255, 0.75)"
  WHITE_TRANSPARENT_80: "rgba(255, 255, 255, 0.80)"
  WHITE_TRANSPARENT_90: "rgba(255, 255, 255, 0.90)"
  WHITE_TRANSPARENT_97: "rgba(255, 255, 255, 0.97)"

  ## BLACKS (APPLIED)
  BLACK: "#000000"
  BLACK_TRANSPARENT_05: "rgba(0, 0, 0, 0.05)"
  BLACK_TRANSPARENT_07: "rgba(0, 0, 0, 0.07)"
  BLACK_TRANSPARENT_10: "rgba(0, 0, 0, 0.10)"
  BLACK_TRANSPARENT_16: "rgba(0, 0, 0, 0.16)"
  BLACK_TRANSPARENT_20: "rgba(0, 0, 0, 0.20)"
  BLACK_TRANSPARENT_24: "rgba(0, 0, 0, 0.24)"
  BLACK_TRANSPARENT_30: "rgba(0, 0, 0, 0.30)"
  BLACK_TRANSPARENT_40: "rgba(0, 0, 0, 0.40)"
  BLACK_TRANSPARENT_50: "rgba(0, 0, 0, 0.50)"
  BLACK_TRANSPARENT_60: "rgba(0, 0, 0, 0.60)"
  BLACK_TRANSPARENT_70: "rgba(0, 0, 0, 0.70)"
  BLACK_TRANSPARENT_80: "rgba(0, 0, 0, 0.80)"
  BLACK_TRANSPARENT_90: "rgba(0, 0, 0, 0.90)"

  ## Brand
  BRAND_PRIMARY: "#1589ee"
  BRAND_PRIMARY_ACTIVE: "#007add"
  BRAND_LIGHT: "#f4f6fe"
  BRAND_LIGHT_ACTIVE: "#e3e5ed"
  BRAND_DARK: "#182337"
  BRAND_DARK_ACTIVE: "#253045"
  BRAND_ACCESSIBLE: "#0070d2"
  BRAND_ACCESSIBLE_ACTIVE: "#005fb2"
  BRAND_DISABLED: "#c9c7c5"
  BRAND_CONTRAST: "#1a1b1e"
  BRAND_CONTRAST_ACTIVE: "#0d0e12"
  BRAND_BACKGROUND_PRIMARY: "#b0c4df"
  BRAND_BACKGROUND_DARK: "#195594"
  BRAND_TEXT_LINK: "#006DCC"
  BRAND_TEXT_LINK_ACTIVE: "#005fb2"