Material Color Converter

Convert any CSS color to a similar color of the Material Design.

Description

This web application was created to make it easier to pick the most similar color of the Material Design color system. This is especially useful if one knows a color tone already, but wants to convert it to match the material design. The colors of the material design are all coordinated, so that they offer suitable contrasts and complement each other very well.

The Material Color Converter supports the input of all data types of the CSS color definitions:

Data type	Example
Keyword	red
HEX	#ff0000
RGB	rgb(255,0,0)
HSL	hsl(0,50%,100%)

After the input of the color the converter compares the color with the Material Design color palette and suggests five colors which are close to the input color. Each of these suggested colors can be selected by clicking on it to highlight the color in the color palette. This allows the user to see where the suggested color is located. In the color palette each color can be selected so that one can find out the respective HEX values.

Development

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint