Color Shades Generator

Medium Slate Blue

100%

Color Range

100

200

300

400

500

600

700

800

900

950

.bg-medium-slate-blue-50 { background-color: #e4dffd; }
.bg-medium-slate-blue-100 { background-color: #c7bffb; }
.bg-medium-slate-blue-200 { background-color: #aaa0f8; }
.bg-medium-slate-blue-300 { background-color: #8983f5; }
.bg-medium-slate-blue-400 { background-color: #6366f1; }
.bg-medium-slate-blue-500 { background-color: #5657cb; }
.bg-medium-slate-blue-600 { background-color: #4949a6; }
.bg-medium-slate-blue-700 { background-color: #3c3b82; }
.bg-medium-slate-blue-800 { background-color: #2f2d60; }
.bg-medium-slate-blue-900 { background-color: #232041; }
.bg-medium-slate-blue-950 { background-color: #161423; }

Insert Color Range

Instructions

Change the base color with the edit button in the panel on the right, and the 11 shades and the example components update. Copy the scale as CSS, CSS variables, Tailwind or SwiftUI.

Example Components

New Release

Premium Wireless Headphones

High-fidelity audio with active noise cancellation, premium materials, and up to 30 hours of battery life. Perfect for music enthusiasts and professionals.

(128)

$249.99$299.9917% off

The Future of Web Development: AI-Powered Tools and Automation

Technology

Alex Chen

Mar 15, 2025

The Future of Web Development: AI-Powered Tools and Automation

Explore how artificial intelligence is revolutionizing web development workflows, making developers more productive and efficient than ever before.

8 min read

1205

15Apr

Workshop

Web Development Workshop 2025

Join us for an intensive workshop on modern web development practices. Learn about the latest frameworks, tools, and techniques from industry experts. This hands-on session will cover everything from frontend development to backend architecture and deployment strategies.

Tue, Apr 15, 2025

9:00 AM - 5:00 PM

Tech Innovation Hub

123 Developer Street, Silicon Valley, CA

45 going

5 spots left

$299

Revenue Overview

Monthly revenue performance and key metrics

Total Revenue

$48,234

12.5%

vs. last month

Average Order Value

$156

3.2%

vs. last month

Conversion Rate

3.8%

1.1%

vs. last month

Active Customers

1,429

8.4%

vs. last month

Button States

Demonstration of primary button states: normal, hover, active, and disabled

Normal State

Hover State

Active State

Interactive Example

Disabled State

Sarah Wilson

Senior Product Designer

Passionate about creating beautiful and functional user experiences. Focused on design systems and component-driven development.

Explore More Color Shades

Red Green Blue Yellow Cyan Magenta Black White Gray Orange Purple Brown Alice Blue Antique White Aquamarine Azure Beige Bisque Blanched Almond Blue Violet Burly Wood Cadet Blue Chartreuse Chocolate Coral Cornflower Blue Cornsilk Crimson Dark Blue Dark Cyan Dark Golden Rod Dark Gray Dark Green Dark Khaki Dark Magenta Dark Olive Green Dark Orange Dark Orchid Dark Red Dark Salmon Dark Sea Green Dark Slate Blue Dark Slate Gray Dark Turquoise Dark Violet Deep Pink Deep Sky Blue Dim Gray Dodger Blue Fire Brick Floral White Forest Green Gainsboro Ghost White Gold Golden Rod Green Yellow Honey Dew Hot Pink Indian Red Indigo Ivory Khaki Lavender Lavender Blush Lawn Green Lemon Chiffon Light Blue Light Coral Light Cyan Light Golden Rod Yellow Light Gray Light Green Light Pink Light Salmon Light Sea Green Light Sky Blue Light Slate Gray Light Steel Blue Light Yellow Lime Lime Green Linen Maroon Medium Aqua Marine Medium Blue Medium Orchid Medium Purple Medium Sea Green Medium Slate Blue Medium Spring Green Medium Turquoise Medium Violet Red Midnight Blue Mint Cream Misty Rose Moccasin Navajo White Navy Old Lace Olive Olive Drab Orange Red Orchid Pale Golden Rod Pale Green Pale Turquoise Pale Violet Red Papaya Whip Peach Puff Peru Pink Plum Powder Blue Rebecca Purple Rosy Brown Royal Blue Saddle Brown Salmon Sandy Brown Sea Green Sea Shell Sienna Silver Sky Blue Slate Blue Slate Gray Snow Spring Green Steel Blue Tan Teal Thistle Tomato Turquoise Violet Wheat White Smoke Yellow Green

Tints, shades and tones

A tint is a color mixed with white, a shade is a color mixed with black, and a tone is a color mixed with gray. A color scale puts tints on one side of your base color and shades on the other, from almost white to almost black, while keeping its hue. That gives you every light and dark version of one color that a design needs.

Why a 50–950 scale?

Tailwind CSS made it common to name the steps 50, 100, 200 and so on up to 900 and 950. Low numbers are light, high numbers are dark, and 500 sits in the middle. The generator uses the same 11 steps, so a scale fits straight into a Tailwind theme or a design system.

Each step has a fixed lightness target, measured as relative luminance, so the same step looks about as light in every color: a blue 500 and an orange 500 have similar lightness. Your base color keeps its exact value, at the step closest to its own lightness.

How to use the color shades generator

Pick a base color with the edit button in the panel on the right, or open one of the named colors in the list above.
Choose HEX, RGB, HSL, HSB or OKLCH for the values.
Check the example components on the left: buttons, cards and a dashboard widget, all drawn with your new scale.
Copy the scale as CSS, CSS variables, Tailwind or SwiftUI.

Using a color scale in a design

A common way to assign the steps:

50–100 for page and card backgrounds, and 200–300 for borders and dividers.
500–600 for the main color: buttons, links and icons.
700–900 for text on light backgrounds, and 100–200 for text on dark ones.

Check the contrast of every text color you pick. WCAG asks for at least 4.5:1 for normal text (AA) and 7:1 for AAA. Each named color page, such as red, shows its exact contrast on white and on black.

Frequently asked questions

What's the difference between a tint and a shade?

A tint is lighter: the color mixed with white. A shade is darker: the color mixed with black. In a 50–950 scale, the lower-numbered steps are tints of your base color and the higher-numbered steps are shades.

How many shades should a color palette have?

Eleven steps, 50 to 950, is the Tailwind convention and covers backgrounds, borders, the main color and text. A small project can use fewer. What matters most is that every color in the palette uses the same steps, so blue-100 and green-100 do the same job.

Can I use the shades in Tailwind CSS?

Yes. The Tailwind 4 export is an @theme block of --color-* variables: paste it into the CSS file that imports Tailwind, and each shade becomes a utility, such as bg-red-500 for a color named red. The Tailwind 3 export is a colors block for theme.extend in tailwind.config.js.

Where can I find a color's HEX, RGB, HSL and OKLCH codes?

Each named color in the list above has its own page with its HEX, RGB, HSL and OKLCH codes, its contrast as text, its 11 shades, and the named colors closest to it.