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).

Bun.js

This project requires Bun.js. It can be installed from here:

• https://bun.sh/

Project Setup

bun install

Compile and Hot-Reload for Development

bun run dev

Type-Check, Compile and Minify for Production

bun run build

Run Unit Tests with Vitest

bun run test:unit

Lint with ESLint

bun run lint