NEOKYRU Free Online Tools

Design & Color Tools

100% Client-Side • 100% client-side privacy. All calculations and styling execute locally in your browser with zero server uploads.

Material Color Generator

Generate Google Material Design 50-900 tonal palettes and accent shades

Harmony:Theme:

Color #1 (Base)

#6366F1

Color #2

#F16366

Color #3

#8B5CF6

Color #4

#10B981

Color #5

#F59E0B

Color Blindness Vision Simulation

Test how people with various visual deficiencies perceive this palette in real-world scenarios.

Tailwind Matcher

Closest Tailwind CSS Color

Mathematically computed closest match in Tailwind's standard palette using perceptual Euclidean distance.

indigo-500

#6366f1

ΔE Distance: 0 (near identical)

bg-indigo-500 text-indigo-500

Material Design 3

Material 50 to 900 Tonal Palette

Derived shade scale for Android, Flutter, and web UI design systems based on #6366F1. Tap any swatch to copy HEX.

Export Color Scheme

CSS Variables

:root {
  --color-1: #6366F1;
  --color-2: #F16366;
  --color-3: #8B5CF6;
  --color-4: #10B981;
  --color-5: #F59E0B;
}

Tailwind Config

// tailwind.config.js theme.colors
colors: {
  brand: {
    100: '#6366F1',
    200: '#F16366',
    300: '#8B5CF6',
    400: '#10B981',
    500: '#F59E0B',
  }
}

JSON Palette

[
  {
    "name": "Color 1",
    "hex": "#6366F1"
  },
  {
    "name": "Color 2",
    "hex": "#F16366"
  },
  {
    "name": "Color 3",
    "hex": "#8B5CF6"
  },
  {
    "name": "Color 4",
    "hex": "#10B981"
  },
  {
    "name": "Color 5",
    "hex": "#F59E0B"
  }
]

About Material Color Generator

Generate complete Google Material Design tint and shade scales (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700) from any input color with contrast-safe text indicators.

Key Capabilities & Features

Generates full 10-shade tonal scale from 50 (lightest) to 900 (darkest)
Generates vibrant accent shades: A100, A200, A400, and A700
Calculates contrast-safe text color (white vs. dark slate) for every individual swatch
Click any shade to copy its hex code instantly to clipboard
Perfect for Android Jetpack Compose, Flutter, and Tailwind UI design systems

How to Use Material Color Generator

1

Input Base Brand Color

Pick or type your primary brand color hex code.

2

Inspect Material Scale

Examine the generated 50 to 900 tints and vibrant accent swatches.

3

Copy Shades

Click on any individual shade to copy its hex code directly.

Privacy & In-Browser Execution Guarantee

100% client-side privacy. All calculations and styling execute locally in your browser with zero server uploads.

Frequently Asked Questions

What is the 500 shade in Material Design?

The 500 shade is traditionally the primary brand color used for toolbars, app bars, and major interactive elements.

What do the 'A' shades represent?

The 'A' shades (A100, A200, A400, A700) represent high-saturation accent colors used for floating action buttons, highlights, and active switches.

Related Tools in this Suite

Color Palette Generator

Generate aesthetic harmonious color schemes and palettes with one click

Tailwind Color Converter

Match any custom HEX or RGB color to the closest Tailwind CSS color and shade

Contrast Checker

Calculate color contrast ratio between text and background with live preview

Pick, inspect, and copy HEX, RGB, HSL, and CMYK color codes instantly