Skip to content

Instantly share code, notes, and snippets.

@vhugogarcia

vhugogarcia/material-design-3-colors-sample.json

Created August 30, 2024 19:38
Show Gist options
  • Save vhugogarcia/8f71087e8f09b653cb1b83e125ea8c41 to your computer and use it in GitHub Desktop.
Save vhugogarcia/8f71087e8f09b653cb1b83e125ea8c41 to your computer and use it in GitHub Desktop.
Download ZIP
Material Design 3 - Colors JSON Sample
Raw
material-design-3-colors-sample.json
{
"description": "TYPE: CUSTOM\nMaterial Theme Builder export 2024-08-30 01:36:01",
"seed": "#769CDF",
"coreColors": {
"primary": "#769CDF"
},
"extendedColors": [],
"schemes": {
"light": {
"primary": "#415F91",
"surfaceTint": "#415F91",
"onPrimary": "#FFFFFF",
"primaryContainer": "#D6E3FF",
"onPrimaryContainer": "#001B3E",
"secondary": "#565F71",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#DAE2F9",
"onSecondaryContainer": "#131C2B",
"tertiary": "#705575",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#FAD8FD",
"onTertiaryContainer": "#28132E",
"error": "#BA1A1A",
"onError": "#FFFFFF",
"errorContainer": "#FFDAD6",
"onErrorContainer": "#410002",
"background": "#F9F9FF",
"onBackground": "#191C20",
"surface": "#F9F9FF",
"onSurface": "#191C20",
"surfaceVariant": "#E0E2EC",
"onSurfaceVariant": "#44474E",
"outline": "#74777F",
"outlineVariant": "#C4C6D0",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#2E3036",
"inverseOnSurface": "#F0F0F7",
"inversePrimary": "#AAC7FF",
"primaryFixed": "#D6E3FF",
"onPrimaryFixed": "#001B3E",
"primaryFixedDim": "#AAC7FF",
"onPrimaryFixedVariant": "#284777",
"secondaryFixed": "#DAE2F9",
"onSecondaryFixed": "#131C2B",
"secondaryFixedDim": "#BEC6DC",
"onSecondaryFixedVariant": "#3E4759",
"tertiaryFixed": "#FAD8FD",
"onTertiaryFixed": "#28132E",
"tertiaryFixedDim": "#DDBCE0",
"onTertiaryFixedVariant": "#573E5C",
"surfaceDim": "#D9D9E0",
"surfaceBright": "#F9F9FF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F3F3FA",
"surfaceContainer": "#EDEDF4",
"surfaceContainerHigh": "#E7E8EE",
"surfaceContainerHighest": "#E2E2E9"
},
"light-medium-contrast": {
"primary": "#234373",
"surfaceTint": "#415F91",
"onPrimary": "#FFFFFF",
"primaryContainer": "#5875A8",
"onPrimaryContainer": "#FFFFFF",
"secondary": "#3A4354",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#6C7588",
"onSecondaryContainer": "#FFFFFF",
"tertiary": "#523A58",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#876B8C",
"onTertiaryContainer": "#FFFFFF",
"error": "#8C0009",
"onError": "#FFFFFF",
"errorContainer": "#DA342E",
"onErrorContainer": "#FFFFFF",
"background": "#F9F9FF",
"onBackground": "#191C20",
"surface": "#F9F9FF",
"onSurface": "#191C20",
"surfaceVariant": "#E0E2EC",
"onSurfaceVariant": "#40434A",
"outline": "#5C5F67",
"outlineVariant": "#787A83",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#2E3036",
"inverseOnSurface": "#F0F0F7",
"inversePrimary": "#AAC7FF",
"primaryFixed": "#5875A8",
"onPrimaryFixed": "#FFFFFF",
"primaryFixedDim": "#3E5C8E",
"onPrimaryFixedVariant": "#FFFFFF",
"secondaryFixed": "#6C7588",
"onSecondaryFixed": "#FFFFFF",
"secondaryFixedDim": "#535C6F",
"onSecondaryFixedVariant": "#FFFFFF",
"tertiaryFixed": "#876B8C",
"onTertiaryFixed": "#FFFFFF",
"tertiaryFixedDim": "#6D5372",
"onTertiaryFixedVariant": "#FFFFFF",
"surfaceDim": "#D9D9E0",
"surfaceBright": "#F9F9FF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F3F3FA",
"surfaceContainer": "#EDEDF4",
"surfaceContainerHigh": "#E7E8EE",
"surfaceContainerHighest": "#E2E2E9"
},
"light-high-contrast": {
"primary": "#00214A",
"surfaceTint": "#415F91",
"onPrimary": "#FFFFFF",
"primaryContainer": "#234373",
"onPrimaryContainer": "#FFFFFF",
"secondary": "#192232",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#3A4354",
"onSecondaryContainer": "#FFFFFF",
"tertiary": "#301A35",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#523A58",
"onTertiaryContainer": "#FFFFFF",
"error": "#4E0002",
"onError": "#FFFFFF",
"errorContainer": "#8C0009",
"onErrorContainer": "#FFFFFF",
"background": "#F9F9FF",
"onBackground": "#191C20",
"surface": "#F9F9FF",
"onSurface": "#000000",
"surfaceVariant": "#E0E2EC",
"onSurfaceVariant": "#21242B",
"outline": "#40434A",
"outlineVariant": "#40434A",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#2E3036",
"inverseOnSurface": "#FFFFFF",
"inversePrimary": "#E5ECFF",
"primaryFixed": "#234373",
"onPrimaryFixed": "#FFFFFF",
"primaryFixedDim": "#042C5B",
"onPrimaryFixedVariant": "#FFFFFF",
"secondaryFixed": "#3A4354",
"onSecondaryFixed": "#FFFFFF",
"secondaryFixedDim": "#242D3D",
"onSecondaryFixedVariant": "#FFFFFF",
"tertiaryFixed": "#523A58",
"onTertiaryFixed": "#FFFFFF",
"tertiaryFixedDim": "#3B2440",
"onTertiaryFixedVariant": "#FFFFFF",
"surfaceDim": "#D9D9E0",
"surfaceBright": "#F9F9FF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F3F3FA",
"surfaceContainer": "#EDEDF4",
"surfaceContainerHigh": "#E7E8EE",
"surfaceContainerHighest": "#E2E2E9"
},
"dark": {
"primary": "#AAC7FF",
"surfaceTint": "#AAC7FF",
"onPrimary": "#0A305F",
"primaryContainer": "#284777",
"onPrimaryContainer": "#D6E3FF",
"secondary": "#BEC6DC",
"onSecondary": "#283141",
"secondaryContainer": "#3E4759",
"onSecondaryContainer": "#DAE2F9",
"tertiary": "#DDBCE0",
"onTertiary": "#3F2844",
"tertiaryContainer": "#573E5C",
"onTertiaryContainer": "#FAD8FD",
"error": "#FFB4AB",
"onError": "#690005",
"errorContainer": "#93000A",
"onErrorContainer": "#FFDAD6",
"background": "#111318",
"onBackground": "#E2E2E9",
"surface": "#111318",
"onSurface": "#E2E2E9",
"surfaceVariant": "#44474E",
"onSurfaceVariant": "#C4C6D0",
"outline": "#8E9099",
"outlineVariant": "#44474E",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E2E2E9",
"inverseOnSurface": "#2E3036",
"inversePrimary": "#415F91",
"primaryFixed": "#D6E3FF",
"onPrimaryFixed": "#001B3E",
"primaryFixedDim": "#AAC7FF",
"onPrimaryFixedVariant": "#284777",
"secondaryFixed": "#DAE2F9",
"onSecondaryFixed": "#131C2B",
"secondaryFixedDim": "#BEC6DC",
"onSecondaryFixedVariant": "#3E4759",
"tertiaryFixed": "#FAD8FD",
"onTertiaryFixed": "#28132E",
"tertiaryFixedDim": "#DDBCE0",
"onTertiaryFixedVariant": "#573E5C",
"surfaceDim": "#111318",
"surfaceBright": "#37393E",
"surfaceContainerLowest": "#0C0E13",
"surfaceContainerLow": "#191C20",
"surfaceContainer": "#1D2024",
"surfaceContainerHigh": "#282A2F",
"surfaceContainerHighest": "#33353A"
},
"dark-medium-contrast": {
"primary": "#B1CBFF",
"surfaceTint": "#AAC7FF",
"onPrimary": "#001634",
"primaryContainer": "#7491C7",
"onPrimaryContainer": "#000000",
"secondary": "#C2CBE0",
"onSecondary": "#0D1626",
"secondaryContainer": "#8891A5",
"onSecondaryContainer": "#000000",
"tertiary": "#E1C0E5",
"onTertiary": "#230E29",
"tertiaryContainer": "#A487A9",
"onTertiaryContainer": "#000000",
"error": "#FFBAB1",
"onError": "#370001",
"errorContainer": "#FF5449",
"onErrorContainer": "#000000",
"background": "#111318",
"onBackground": "#E2E2E9",
"surface": "#111318",
"onSurface": "#FBFAFF",
"surfaceVariant": "#44474E",
"onSurfaceVariant": "#C8CAD4",
"outline": "#A0A3AC",
"outlineVariant": "#80838C",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E2E2E9",
"inverseOnSurface": "#282A2F",
"inversePrimary": "#294878",
"primaryFixed": "#D6E3FF",
"onPrimaryFixed": "#00112B",
"primaryFixedDim": "#AAC7FF",
"onPrimaryFixedVariant": "#133665",
"secondaryFixed": "#DAE2F9",
"onSecondaryFixed": "#081121",
"secondaryFixedDim": "#BEC6DC",
"onSecondaryFixedVariant": "#2E3647",
"tertiaryFixed": "#FAD8FD",
"onTertiaryFixed": "#1D0823",
"tertiaryFixedDim": "#DDBCE0",
"onTertiaryFixedVariant": "#452E4A",
"surfaceDim": "#111318",
"surfaceBright": "#37393E",
"surfaceContainerLowest": "#0C0E13",
"surfaceContainerLow": "#191C20",
"surfaceContainer": "#1D2024",
"surfaceContainerHigh": "#282A2F",
"surfaceContainerHighest": "#33353A"
},
"dark-high-contrast": {
"primary": "#FBFAFF",
"surfaceTint": "#AAC7FF",
"onPrimary": "#000000",
"primaryContainer": "#B1CBFF",
"onPrimaryContainer": "#000000",
"secondary": "#FBFAFF",
"onSecondary": "#000000",
"secondaryContainer": "#C2CBE0",
"onSecondaryContainer": "#000000",
"tertiary": "#FFF9FA",
"onTertiary": "#000000",
"tertiaryContainer": "#E1C0E5",
"onTertiaryContainer": "#000000",
"error": "#FFF9F9",
"onError": "#000000",
"errorContainer": "#FFBAB1",
"onErrorContainer": "#000000",
"background": "#111318",
"onBackground": "#E2E2E9",
"surface": "#111318",
"onSurface": "#FFFFFF",
"surfaceVariant": "#44474E",
"onSurfaceVariant": "#FBFAFF",
"outline": "#C8CAD4",
"outlineVariant": "#C8CAD4",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E2E2E9",
"inverseOnSurface": "#000000",
"inversePrimary": "#002959",
"primaryFixed": "#DDE7FF",
"onPrimaryFixed": "#000000",
"primaryFixedDim": "#B1CBFF",
"onPrimaryFixedVariant": "#001634",
"secondaryFixed": "#DEE7FD",
"onSecondaryFixed": "#000000",
"secondaryFixedDim": "#C2CBE0",
"onSecondaryFixedVariant": "#0D1626",
"tertiaryFixed": "#FCDDFF",
"onTertiaryFixed": "#000000",
"tertiaryFixedDim": "#E1C0E5",
"onTertiaryFixedVariant": "#230E29",
"surfaceDim": "#111318",
"surfaceBright": "#37393E",
"surfaceContainerLowest": "#0C0E13",
"surfaceContainerLow": "#191C20",
"surfaceContainer": "#1D2024",
"surfaceContainerHigh": "#282A2F",
"surfaceContainerHighest": "#33353A"
}
},
"palettes": {
"primary": {
"0": "#000000",
"5": "#00102B",
"10": "#001B3E",
"15": "#002551",
"20": "#002F64",
"25": "#033A77",
"30": "#194683",
"35": "#285290",
"40": "#365E9D",
"50": "#5177B8",
"60": "#6B91D3",
"70": "#86ACF0",
"80": "#AAC7FF",
"90": "#D6E3FF",
"95": "#ECF0FF",
"98": "#F9F9FF",
"99": "#FDFBFF",
"100": "#FFFFFF"
},
"secondary": {
"0": "#000000",
"5": "#09111E",
"10": "#141C29",
"15": "#1E2634",
"20": "#29313F",
"25": "#343C4A",
"30": "#3F4756",
"35": "#4B5362",
"40": "#575E6F",
"50": "#707788",
"60": "#8991A2",
"70": "#A4ABBD",
"80": "#BFC6D9",
"90": "#DBE2F6",
"95": "#ECF0FF",
"98": "#F9F9FF",
"99": "#FDFBFF",
"100": "#FFFFFF"
},
"tertiary": {
"0": "#000000",
"5": "#1B0A21",
"10": "#27142C",
"15": "#321F37",
"20": "#3D2942",
"25": "#49344D",
"30": "#553F59",
"35": "#614B65",
"40": "#6E5772",
"50": "#886F8B",
"60": "#A288A6",
"70": "#BEA2C1",
"80": "#DABDDD",
"90": "#F7D9FA",
"95": "#FFEBFE",
"98": "#FFF7FB",
"99": "#FFFBFF",
"100": "#FFFFFF"
},
"neutral": {
"0": "#000000",
"5": "#101113",
"10": "#1B1B1E",
"15": "#252628",
"20": "#303033",
"25": "#3B3B3E",
"30": "#464649",
"35": "#525255",
"40": "#5E5E61",
"50": "#77777A",
"60": "#919093",
"70": "#ACABAE",
"80": "#C7C6C9",
"90": "#E3E2E5",
"95": "#F2F0F3",
"98": "#FAF9FC",
"99": "#FDFBFF",
"100": "#FFFFFF"
},
"neutral-variant": {
"0": "#000000",
"5": "#0E1117",
"10": "#191C22",
"15": "#23262C",
"20": "#2E3037",
"25": "#393B42",
"30": "#44474D",
"35": "#505259",
"40": "#5C5E65",
"50": "#75777E",
"60": "#8E9098",
"70": "#A9ABB3",
"80": "#C5C6CE",
"90": "#E1E2EA",
"95": "#EFF0F9",
"98": "#F9F9FF",
"99": "#FDFBFF",
"100": "#FFFFFF"
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment