Material Color Properties
This package streamlines the process of accessing properties from the Material Design 3 theme.
[!WARNING]
This repository is used for personal purposes. It is not recommended to use this package in production.
Quick Setup
Add @webhead/material-color-properties dependency to your project, also add @material/material-color-utilities if you haven't already.
# Using pnpm
pnpm i @webhead/material-color-properties
# Using yarn
yarn add @webhead/material-color-properties
# Using npm
npm install @webhead/material-color-propertiesExample
Getting the theme via the themeFromSourceColor function
import {argbFromHex, CustomColor, Theme, themeFromSourceColor} from "@material/material-color-utilities";
const theme: Theme = themeFromSourceColor(argbFromHex('#ff0088'), [
{
name: 'Arab Green',
value: '#22a45a',
blend: true,
}
])Getting the properties via the propertiesFromTheme function
import {propertiesFromTheme} from '@webhead/material-color-properties'
// Default
const options = {
tones: [0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
dark: false,
brightnessSuffix: true,
prefix: {
palette: 'md-ref-palette-',
color: 'md-sys-color-',
customColor: 'md-custom-color-',
}
}
const properties = propertiesFromTheme(theme, options) Example Output
{
// Palette Primary
"--md-ref-palette-primary0": "#000000",
"--md-ref-palette-primary5": "#111111",
"--md-ref-palette-primary10": "#1b1b1b",
"--md-ref-palette-primary20": "#303030",
"--md-ref-palette-primary30": "#474747",
"--md-ref-palette-primary40": "#5e5e5e",
"--md-ref-palette-primary50": "#777777",
"--md-ref-palette-primary60": "#919191",
"--md-ref-palette-primary70": "#ababab",
"--md-ref-palette-primary80": "#c6c6c6",
"--md-ref-palette-primary95": "#f1f1f1",
"--md-ref-palette-primary99": "#fcfcfc",
"--md-ref-palette-primary100": "#ffffff",
// Palette Secondary
"--md-ref-palette-secondary0": "#000000",
"--md-ref-palette-secondary5": "#111111",
"--md-ref-palette-secondary10": "#1b1b1b",
"--md-ref-palette-secondary20": "#303030",
"--md-ref-palette-secondary30": "#474747",
"--md-ref-palette-secondary40": "#5e5e5e",
"--md-ref-palette-secondary50": "#777777",
"--md-ref-palette-secondary60": "#919191",
"--md-ref-palette-secondary70": "#ababab",
"--md-ref-palette-secondary80": "#c6c6c6",
"--md-ref-palette-secondary95": "#f1f1f1",
"--md-ref-palette-secondary99": "#fcfcfc",
"--md-ref-palette-secondary100": "#ffffff",
// Palette Tertiary
"--md-ref-palette-tertiary0": "#000000",
"--md-ref-palette-tertiary5": "#111111",
"--md-ref-palette-tertiary10": "#1b1b1b",
"--md-ref-palette-tertiary20": "#303030",
"--md-ref-palette-tertiary30": "#474747",
"--md-ref-palette-tertiary40": "#5e5e5e",
"--md-ref-palette-tertiary50": "#777777",
"--md-ref-palette-tertiary60": "#919191",
"--md-ref-palette-tertiary70": "#ababab",
"--md-ref-palette-tertiary80": "#c6c6c6",
"--md-ref-palette-tertiary95": "#f1f1f1",
"--md-ref-palette-tertiary99": "#fcfcfc",
"--md-ref-palette-tertiary100": "#ffffff",
// Palette Neutral
"--md-ref-palette-neutral0": "#000000",
"--md-ref-palette-neutral5": "#111111",
"--md-ref-palette-neutral10": "#1b1b1b",
"--md-ref-palette-neutral20": "#303030",
"--md-ref-palette-neutral30": "#474747",
"--md-ref-palette-neutral40": "#5e5e5e",
"--md-ref-palette-neutral50": "#777777",
"--md-ref-palette-neutral60": "#919191",
"--md-ref-palette-neutral70": "#ababab",
"--md-ref-palette-neutral80": "#c6c6c6",
"--md-ref-palette-neutral95": "#f1f1f1",
"--md-ref-palette-neutral99": "#fcfcfc",
"--md-ref-palette-neutral100": "#ffffff",
// Palette Neutral Variant
"--md-ref-palette-neutral-variant0": "#000000",
"--md-ref-palette-neutral-variant5": "#111111",
"--md-ref-palette-neutral-variant10": "#1b1b1b",
"--md-ref-palette-neutral-variant20": "#303030",
"--md-ref-palette-neutral-variant30": "#474747",
"--md-ref-palette-neutral-variant40": "#5e5e5e",
"--md-ref-palette-neutral-variant50": "#777777",
"--md-ref-palette-neutral-variant60": "#919191",
"--md-ref-palette-neutral-variant70": "#ababab",
"--md-ref-palette-neutral-variant80": "#c6c6c6",
"--md-ref-palette-neutral-variant95": "#f1f1f1",
"--md-ref-palette-neutral-variant99": "#fcfcfc",
"--md-ref-palette-neutral-variant100": "#ffffff",
// Palette Error
"--md-ref-palette-error0": "#000000",
"--md-ref-palette-error5": "#111111",
"--md-ref-palette-error10": "#1b1b1b",
"--md-ref-palette-error20": "#303030",
"--md-ref-palette-error30": "#474747",
"--md-ref-palette-error40": "#5e5e5e",
"--md-ref-palette-error50": "#777777",
"--md-ref-palette-error60": "#919191",
"--md-ref-palette-error70": "#ababab",
"--md-ref-palette-error80": "#c6c6c6",
"--md-ref-palette-error95": "#f1f1f1",
"--md-ref-palette-error99": "#fcfcfc",
"--md-ref-palette-error100": "#ffffff",
// Scheme
"--md-sys-color-primary": "#ffb1c7",
"--md-sys-color-on-primary": "#650032",
"--md-sys-color-primary-container": "#8e0049",
"--md-sys-color-on-primary-container": "#ffd9e2",
"--md-sys-color-secondary": "#e3bdc6",
"--md-sys-color-on-secondary": "#422931",
"--md-sys-color-secondary-container": "#5b3f47",
"--md-sys-color-on-secondary-container": "#ffd9e2",
"--md-sys-color-tertiary": "#efbd93",
"--md-sys-color-on-tertiary": "#47290b",
"--md-sys-color-tertiary-container": "#613f1f",
"--md-sys-color-on-tertiary-container": "#ffdcc1",
"--md-sys-color-error": "#ffb4ab",
"--md-sys-color-on-error": "#690005",
"--md-sys-color-error-container": "#93000a",
"--md-sys-color-on-error-container": "#ffdad6",
"--md-sys-color-background": "#201a1b",
"--md-sys-color-on-background": "#ece0e1",
"--md-sys-color-surface": "#201a1b",
"--md-sys-color-on-surface": "#ece0e1",
"--md-sys-color-surface-variant": "#514346",
"--md-sys-color-on-surface-variant": "#d5c2c5",
"--md-sys-color-outline": "#9e8c90",
"--md-sys-color-outline-variant": "#514346",
"--md-sys-color-shadow": "#000000",
"--md-sys-color-scrim": "#000000",
"--md-sys-color-inverse-surface": "#ece0e1",
"--md-sys-color-inverse-on-surface": "#352f30",
"--md-sys-color-inverse-primary": "#ba0061",
// Scheme Light
"--md-sys-color-primary-light": "#ba0061",
"--md-sys-color-on-primary-light": "#ffffff",
"--md-sys-color-primary-container-light": "#ffd9e2",
"--md-sys-color-on-primary-container-light": "#3e001d",
"--md-sys-color-secondary-light": "#74565e",
"--md-sys-color-on-secondary-light": "#ffffff",
"--md-sys-color-secondary-container-light": "#ffd9e2",
"--md-sys-color-on-secondary-container-light": "#2b151c",
"--md-sys-color-tertiary-light": "#7c5635",
"--md-sys-color-on-tertiary-light": "#ffffff",
"--md-sys-color-tertiary-container-light": "#ffdcc1",
"--md-sys-color-on-tertiary-container-light": "#2e1500",
"--md-sys-color-error-light": "#ba1a1a",
"--md-sys-color-on-error-light": "#ffffff",
"--md-sys-color-error-container-light": "#ffdad6",
"--md-sys-color-on-error-container-light": "#410002",
"--md-sys-color-background-light": "#fffbff",
"--md-sys-color-on-background-light": "#201a1b",
"--md-sys-color-surface-light": "#fffbff",
"--md-sys-color-on-surface-light": "#201a1b",
"--md-sys-color-surface-variant-light": "#f2dde1",
"--md-sys-color-on-surface-variant-light": "#514346",
"--md-sys-color-outline-light": "#837376",
"--md-sys-color-outline-variant-light": "#d5c2c5",
"--md-sys-color-shadow-light": "#000000",
"--md-sys-color-scrim-light": "#000000",
"--md-sys-color-inverse-surface-light": "#352f30",
"--md-sys-color-inverse-on-surface-light": "#faeeef",
"--md-sys-color-inverse-primary-light": "#ffb1c7",
// Scheme Dark
"--md-sys-color-primary-dark": "#ba0061",
"--md-sys-color-on-primary-dark": "#ffffff",
"--md-sys-color-primary-container-dark": "#ffd9e2",
"--md-sys-color-on-primary-container-dark": "#3e001d",
"--md-sys-color-secondary-dark": "#74565e",
"--md-sys-color-on-secondary-dark": "#ffffff",
"--md-sys-color-secondary-container-dark": "#ffd9e2",
"--md-sys-color-on-secondary-container-dark": "#2b151c",
"--md-sys-color-tertiary-dark": "#7c5635",
"--md-sys-color-on-tertiary-dark": "#ffffff",
"--md-sys-color-tertiary-container-dark": "#ffdcc1",
"--md-sys-color-on-tertiary-container-dark": "#2e1500",
"--md-sys-color-error-dark": "#ba1a1a",
"--md-sys-color-on-error-dark": "#ffffff",
"--md-sys-color-error-container-dark": "#ffdad6",
"--md-sys-color-on-error-container-dark": "#410002",
"--md-sys-color-background-dark": "#fffbff",
"--md-sys-color-on-background-dark": "#201a1b",
"--md-sys-color-surface-dark": "#fffbff",
"--md-sys-color-on-surface-dark": "#201a1b",
"--md-sys-color-surface-variant-dark": "#f2dde1",
"--md-sys-color-on-surface-variant-dark": "#514346",
"--md-sys-color-outline-dark": "#837376",
"--md-sys-color-outline-variant-dark": "#d5c2c5",
"--md-sys-color-shadow-dark": "#000000",
"--md-sys-color-scrim-dark": "#000000",
"--md-sys-color-inverse-surface-dark": "#352f30",
"--md-sys-color-inverse-on-surface-dark": "#faeeef",
"--md-sys-color-inverse-primary-dark": "#ffb1c7",
// Surface Level
"--md-sys-color-surface-level0": "#ff008800",
"--md-sys-color-surface-level1": "#ff00880d",
"--md-sys-color-surface-level2": "#ff008814",
"--md-sys-color-surface-level3": "#ff00881c",
"--md-sys-color-surface-level4": "#ff00881f",
"--md-sys-color-surface-level5": "#ff008824",
// Surface Level Light
"--md-sys-color-surface-level0-light": "#ff008800",
"--md-sys-color-surface-level1-light": "#ff00880d",
"--md-sys-color-surface-level2-light": "#ff008814",
"--md-sys-color-surface-level3-light": "#ff00881c",
"--md-sys-color-surface-level4-light": "#ff00881f",
"--md-sys-color-surface-level5-light": "#ff008824",
// Surface Level Dark
"--md-sys-color-surface-level0-dark": "#ff008800",
"--md-sys-color-surface-level1-dark": "#ff00880d",
"--md-sys-color-surface-level2-dark": "#ff008814",
"--md-sys-color-surface-level3-dark": "#ff00881c",
"--md-sys-color-surface-level4-dark": "#ff00881f",
"--md-sys-color-surface-level5-dark": "#ff008824",
// Custom Color Palette
"--md-ref-palette-arab-green0": "#000000",
"--md-ref-palette-arab-green5": "#00150d",
"--md-ref-palette-arab-green10": "#002116",
"--md-ref-palette-arab-green20": "#003828",
"--md-ref-palette-arab-green30": "#00513b",
"--md-ref-palette-arab-green40": "#006c50",
"--md-ref-palette-arab-green50": "#008865",
"--md-ref-palette-arab-green60": "#05a47b",
"--md-ref-palette-arab-green70": "#3cc095",
"--md-ref-palette-arab-green80": "#5ddcaf",
"--md-ref-palette-arab-green95": "#bcffe1",
"--md-ref-palette-arab-green99": "#f4fff7",
"--md-ref-palette-arab-green100": "#ffffff",
// Custom Color Scheme
"--md-custom-color-arab-green": "#8ed96d",
"--md-custom-color-on-arab-green": "#0e3900",
"--md-custom-color-arab-green-container": "#185200",
"--md-custom-color-on-arab-green-container": "#a9f686",
// Custom Color Scheme Light
"--md-custom-color-arab-green-light": "#276c0a",
"--md-custom-color-on-arab-green-light": "#ffffff",
"--md-custom-color-arab-green-container-light": "#a9f686",
"--md-custom-color-on-arab-green-container-light": "#052100",
// Custom Color Scheme Dark
"--md-custom-color-arab-green-dark": "#276c0a",
"--md-custom-color-on-arab-green-dark": "#ffffff",
"--md-custom-color-arab-green-container-dark": "#a9f686",
"--md-custom-color-on-arab-green-container-dark": "#052100",
// Scheme RGB Values
"--md-sys-color-primary-rgb": "255, 177, 199",
"--md-sys-color-on-primary-rgb": "101, 0, 50",
"--md-sys-color-primary-container-rgb": "142, 0, 73",
"--md-sys-color-on-primary-container-rgb": "255, 217, 226",
"--md-sys-color-secondary-rgb": "227, 189, 198",
"--md-sys-color-on-secondary-rgb": "66, 41, 49",
"--md-sys-color-secondary-container-rgb": "91, 63, 71",
"--md-sys-color-on-secondary-container-rgb": "255, 217, 226",
"--md-sys-color-tertiary-rgb": "239, 189, 147",
"--md-sys-color-on-tertiary-rgb": "71, 41, 11",
"--md-sys-color-tertiary-container-rgb": "97, 63, 31",
"--md-sys-color-on-tertiary-container-rgb": "255, 220, 193",
"--md-sys-color-error-rgb": "255, 180, 171",
"--md-sys-color-on-error-rgb": "105, 0, 5",
"--md-sys-color-error-container-rgb": "147, 0, 10",
"--md-sys-color-on-error-container-rgb": "255, 218, 214",
"--md-sys-color-background-rgb": "32, 26, 27",
"--md-sys-color-on-background-rgb": "236, 224, 225",
"--md-sys-color-surface-rgb": "32, 26, 27",
"--md-sys-color-on-surface-rgb": "236, 224, 225",
"--md-sys-color-surface-variant-rgb": "81, 67, 70",
"--md-sys-color-on-surface-variant-rgb": "213, 194, 197",
"--md-sys-color-outline-rgb": "158, 140, 144",
"--md-sys-color-outline-variant-rgb": "81, 67, 70",
"--md-sys-color-shadow-rgb": "0, 0, 0",
"--md-sys-color-scrim-rgb": "0, 0, 0",
"--md-sys-color-inverse-surface-rgb": "236, 224, 225",
"--md-sys-color-inverse-on-surface-rgb": "53, 47, 48",
"--md-sys-color-inverse-primary-rgb": "186, 0, 97",
// Scheme Light RGB Values
"--md-sys-color-primary-light-rgb": "186, 0, 97",
"--md-sys-color-on-primary-light-rgb": "255, 255, 255",
"--md-sys-color-primary-container-light-rgb": "255, 217, 226",
"--md-sys-color-on-primary-container-light-rgb": "62, 0, 29",
"--md-sys-color-secondary-light-rgb": "116, 86, 94",
"--md-sys-color-on-secondary-light-rgb": "255, 255, 255",
"--md-sys-color-secondary-container-light-rgb": "255, 217, 226",
"--md-sys-color-on-secondary-container-light-rgb": "43, 21, 28",
"--md-sys-color-tertiary-light-rgb": "124, 86, 53",
"--md-sys-color-on-tertiary-light-rgb": "255, 255, 255",
"--md-sys-color-tertiary-container-light-rgb": "255, 220, 193",
"--md-sys-color-on-tertiary-container-light-rgb": "46, 21, 0",
"--md-sys-color-error-light-rgb": "186, 26, 26",
"--md-sys-color-on-error-light-rgb": "255, 255, 255",
"--md-sys-color-error-container-light-rgb": "255, 218, 214",
"--md-sys-color-on-error-container-light-rgb": "65, 0, 2",
"--md-sys-color-background-light-rgb": "255, 251, 255",
"--md-sys-color-on-background-light-rgb": "32, 26, 27",
"--md-sys-color-surface-light-rgb": "255, 251, 255",
"--md-sys-color-on-surface-light-rgb": "32, 26, 27",
"--md-sys-color-surface-variant-light-rgb": "242, 221, 225",
"--md-sys-color-on-surface-variant-light-rgb": "81, 67, 70",
"--md-sys-color-outline-light-rgb": "131, 115, 118",
"--md-sys-color-outline-variant-light-rgb": "213, 194, 197",
"--md-sys-color-shadow-light-rgb": "0, 0, 0",
"--md-sys-color-scrim-light-rgb": "0, 0, 0",
"--md-sys-color-inverse-surface-light-rgb": "53, 47, 48",
"--md-sys-color-inverse-on-surface-light-rgb": "250, 238, 239",
"--md-sys-color-inverse-primary-light-rgb": "255, 177, 199",
// Scheme Dark RGB Values
"--md-sys-color-primary-dark-rgb": "255, 177, 199",
"--md-sys-color-on-primary-dark-rgb": "101, 0, 50",
"--md-sys-color-primary-container-dark-rgb": "142, 0, 73",
"--md-sys-color-on-primary-container-dark-rgb": "255, 217, 226",
"--md-sys-color-secondary-dark-rgb": "227, 189, 198",
"--md-sys-color-on-secondary-dark-rgb": "66, 41, 49",
"--md-sys-color-secondary-container-dark-rgb": "91, 63, 71",
"--md-sys-color-on-secondary-container-dark-rgb": "255, 217, 226",
"--md-sys-color-tertiary-dark-rgb": "239, 189, 147",
"--md-sys-color-on-tertiary-dark-rgb": "71, 41, 11",
"--md-sys-color-tertiary-container-dark-rgb": "97, 63, 31",
"--md-sys-color-on-tertiary-container-dark-rgb": "255, 220, 193",
"--md-sys-color-error-dark-rgb": "255, 180, 171",
"--md-sys-color-on-error-dark-rgb": "105, 0, 5",
"--md-sys-color-error-container-dark-rgb": "147, 0, 10",
"--md-sys-color-on-error-container-dark-rgb": "255, 218, 214",
"--md-sys-color-background-dark-rgb": "32, 26, 27",
"--md-sys-color-on-background-dark-rgb": "236, 224, 225",
"--md-sys-color-surface-dark-rgb": "32, 26, 27",
"--md-sys-color-on-surface-dark-rgb": "236, 224, 225",
"--md-sys-color-surface-variant-dark-rgb": "81, 67, 70",
"--md-sys-color-on-surface-variant-dark-rgb": "213, 194, 197",
"--md-sys-color-outline-dark-rgb": "158, 140, 144",
"--md-sys-color-outline-variant-dark-rgb": "81, 67, 70",
"--md-sys-color-shadow-dark-rgb": "0, 0, 0",
"--md-sys-color-scrim-dark-rgb": "0, 0, 0",
"--md-sys-color-inverse-surface-dark-rgb": "236, 224, 225",
"--md-sys-color-inverse-on-surface-dark-rgb": "53, 47, 48",
"--md-sys-color-inverse-primary-dark-rgb": "186, 0, 97",
// Custom Color RGB Values
"--md-custom-color-arab-green-rgb": "142, 217, 109",
"--md-custom-color-on-arab-green-rgb": "14, 57, 0",
"--md-custom-color-arab-green-container-rgb": "24, 82, 0",
"--md-custom-color-on-arab-green-container-rgb": "169, 246, 134",
"--md-custom-color-arab-green-light-rgb": "39, 108, 10",
"--md-custom-color-on-arab-green-light-rgb": "255, 255, 255",
"--md-custom-color-arab-green-container-light-rgb": "169, 246, 134",
"--md-custom-color-on-arab-green-container-light-rgb": "5, 33, 0",
"--md-custom-color-arab-green-dark-rgb": "39, 108, 10",
"--md-custom-color-on-arab-green-dark-rgb": "255, 255, 255",
"--md-custom-color-arab-green-container-dark-rgb": "169, 246, 134",
"--md-custom-color-on-arab-green-container-dark-rgb": "5, 33, 0"
}