Skip to main content

Class: MaterialColor

Defined in: modules/material-color/MaterialColor.ts:45

Build Material color scheme to map dynamic color, use as fallback colors, or implement a branded theme

All the science have been done by @material/material-color-utilities, except a module of how to get source color from image's bitmap for non Web platform.

There are ways to build material color with this class. You can choose one of these ways

  • Instantiate this class with Hex color code in the constructor argument
  • Quickly build it from an hex color with the MaterialColor.fromSourceColorHexInt static method
  • You can also use the MaterialColor.fromSourceImage or MaterialColor.fromSourceImageUri static method to get material color

Implements​

Constructors​

Constructor​

new MaterialColor(sourceColor, options?): MaterialColor

Defined in: modules/material-color/MaterialColor.ts:214

Parameters​

sourceColor​

string

Seed hex color for building a Material color scheme to map dynamic color

options?​

MaterialColorOptions

Returns​

MaterialColor

Methods​

dynamicScheme()​

dynamicScheme(): DynamicScheme

Defined in: modules/material-color/MaterialColor.ts:197

You can get the original DynamicScheme result from @material/material-color-utilitites

Returns​

DynamicScheme

fromSourceColorHexInt()​

static fromSourceColorHexInt(hexInt, options?): MaterialColor

Defined in: modules/material-color/MaterialColor.ts:156

Build Material Color from a hex color code in decimal or hexadecimal, e.g. 0xFFFFFF, 16777215 (white in decimal)

Parameters​

hexInt​

number

options?​

MaterialColorOptions

Returns​

MaterialColor

fromSourceImage()​

static fromSourceImage(source, options?, processingOptions?): Promise<MaterialColor>

Defined in: modules/material-color/MaterialColor.ts:103

Get the source color from an image and return MaterialColor in promise.

If you wish to get the source color only from an image, you can use ImageUtils.sourceColorFromImageUri(), or ImageUtils.sourceHexColorFromImageUri()

If you already have the URI, for instance you get an image from a file/document picker, or an online image, you can use MaterialColor.fromSourceImageUri

Parameters​

source​

ImageSourcePropType

options?​

MaterialColorOptions

processingOptions?​

SourceColorFromImageProcessingOptions

Returns​

Promise<MaterialColor>

Example​

import {
	MaterialColor,
} from "react-native-material-color"

function yourMethod() {
	MaterialColor
		.sourceColorFromImage(
			// you can still use the ESM import
			require("./your-image.png"),
			{
				variant: MaterialColor.Variant.TONAL_SPOT,
			}, // optional argument
			{
				timeout: 10000,
			}, // optional argument
		)
		.then(materialColor => {
			if(materialColor) {
				// your logics here
			}
		})
		.catch(err => {
			// Thrown by
			// - an timeout (provided in the third argument object)
			// - your own AbortSignal (provided in the third argument object)
			// - something from "@material/material-color-utilities"
		})
}

Platform​

Android

Platform​

iOS

Platform​

macOS

Platform​

Web

fromSourceImageUri()​

static fromSourceImageUri(uri, options?, processingOptions?): Promise<MaterialColor>

Defined in: modules/material-color/MaterialColor.ts:134

Get the source color from an image uri and return MaterialColor in promise.

Similar as the MaterialColor.fromSourceImage, but you can provide the uri only, whether it's an online image, or local file uri that you get by importing a file, or file/gallery picker

Parameters​

uri​

string

options?​

MaterialColorOptions

processingOptions?​

SourceColorFromImageProcessingOptions

Returns​

Promise<MaterialColor>

Platform​

Android

Platform​

iOS

Platform​

macOS

Platform​

Web

Properties​

colorScheme​

readonly colorScheme: ColorScheme

Defined in: modules/material-color/MaterialColor.ts:168

Implementation of​

MaterialColorInterface.colorScheme

contrastLevel​

readonly contrastLevel: number

Defined in: modules/material-color/MaterialColor.ts:172

Implementation of​

MaterialColorInterface.contrastLevel

errorPalette​

readonly errorPalette: ColorPaletteHex

Defined in: modules/material-color/MaterialColor.ts:187

Implementation of​

MaterialColorInterface.errorPalette

neutralPalette​

readonly neutralPalette: ColorPaletteHex

Defined in: modules/material-color/MaterialColor.ts:189

Implementation of​

MaterialColorInterface.neutralPalette

neutralVariantPalette​

readonly neutralVariantPalette: ColorPaletteHex

Defined in: modules/material-color/MaterialColor.ts:191

Implementation of​

MaterialColorInterface.neutralVariantPalette

platform​

readonly platform: Platform

Defined in: modules/material-color/MaterialColor.ts:174

Implementation of​

MaterialColorInterface.platform

primaryPalette​

readonly primaryPalette: ColorPaletteHex

Defined in: modules/material-color/MaterialColor.ts:181

Implementation of​

MaterialColorInterface.primaryPalette

secondaryPalette​

readonly secondaryPalette: ColorPaletteHex

Defined in: modules/material-color/MaterialColor.ts:183

Implementation of​

MaterialColorInterface.secondaryPalette

sourceColor​

readonly sourceColor: string

Defined in: modules/material-color/MaterialColor.ts:166

Your original source color in hex code

Implementation of​

MaterialColorInterface.sourceColor

specVersion​

readonly specVersion: SpecVersion

Defined in: modules/material-color/MaterialColor.ts:176

Implementation of​

MaterialColorInterface.specVersion

tertiaryPalette​

readonly tertiaryPalette: ColorPaletteHex

Defined in: modules/material-color/MaterialColor.ts:185

Implementation of​

MaterialColorInterface.tertiaryPalette

theme​

readonly theme: "light" | "dark"

Defined in: modules/material-color/MaterialColor.ts:170

Implementation of​

MaterialColorInterface.theme

variant​

readonly variant: Variant

Defined in: modules/material-color/MaterialColor.ts:178

Implementation of​

MaterialColorInterface.variant

ContrastLevelPresets​

static ContrastLevelPresets: object

Defined in: modules/material-color/MaterialColor.ts:50

DEFAULT​

readonly DEFAULT: 0 = 0.0

HIGH​

readonly HIGH: 1 = 1.0

MEDIUM​

readonly MEDIUM: 0.5 = 0.5

REDUCED​

readonly REDUCED: -1 = -1.0

SourceImageException​

static SourceImageException: typeof SourceColorFromImageException = ImageUtils.SourceColorFromImageException

Defined in: modules/material-color/MaterialColor.ts:57

Variant​

static Variant: typeof Variant

Defined in: modules/material-color/MaterialColor.ts:47