UD5 Toolkit
Stepped Color Shade Generator - Online Tailwind‑Style Palette
Pick a base color and generate a full palette of 10 shades (50 to 900) like Tailwind CSS. Copy as hex or hsl.
Tailwind Color Palette Viewer - Online See All 22 Palettes
Tailwind Color Palette Viewer
Explore all 22 expertly crafted color palettes. Click any swatch to copy its hex code or class name.
Frequently Asked Questions
Tailwind CSS ships with 22 professionally designed color palettes. Each palette contains 11 shades ranging from 50 (lightest) to 950 (darkest).
These are subtle neutral palettes. Slate is cool, gray is true neutral, zinc is slightly warm, neutral is nearly achromatic, and stone is warm. Choose based on your UI mood.
You can use utility classes like
bg-red-500, text-blue-700, or border-emerald-300. Also customize them in tailwind.config.js.The swatches are displayed on a white background for accurate color perception, but the page inherits your site's theme. You can preview how colors look on different backgrounds by toggling the background color manually.
Yes! Use the toggle above to switch between copying the hex color code (e.g., #3b82f6) or the Tailwind class name (e.g., blue-500). Then click any color swatch.
Tip: Tailwind colors follow a numeric scale — 50 is lightest, 500 is the base hue, and 950 is darkest. Ideal for building accessible UI components.
Named CSS Colors Explorer - Online Preview All 148
Grid of all 148 named CSS colors. Hover to see detail, click to copy the name or hex. Essential frontend reference.
Color Trend Inspector - Online Pick Year & See Palette
See the Pantone Colors of the Year and popular palettes from past years. Get hex codes. Design inspiration.
Color Swatch to CSS - Online Palette to Variables
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
Random Color Generator - Online Hex & RGB Palette
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Website Color Theme Extractor - Online Grab Palette from CSS
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
HDR Color Preview - Online See Wide Gamut Colors
Test if your display supports HDR colors by rendering a gradient in Rec.2020 space. See what you're missing. Canvas based.
CSS Variable Theme Switcher - Online Dark/Light Generator
Design a light and dark theme by picking colors for backgrounds, text, and links. Get the CSS for both themes. Local.
Text to Color Palette - Online Emotion to Hex
Type a word like 'sunset' or 'calm' and generate a color palette inspired by that mood. Simple associative mapping.
color() Display‑P3 Generator - Online Wide Gamut CSS
Pick a color in the Display‑P3 space and get the CSS color() function. See the difference from sRGB. For modern design.
Image Color Palette Extractor - Online Upload & Get Hex
Upload an image and instantly get a 6‑color palette with the most dominant shades. Click to copy hex codes. Canvas‑based.
light‑dark() Function Tester - Online Color Switch
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
Accessible Color Contrast Grid - Online Test Combinations
Enter a palette of colors and see a grid showing whether each foreground/background pair passes AA or AAA contrast. Must for designers.
CSS Color Extractor - Online Find All Hex in Stylesheet
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
Color Name to Hex - Online Official CSS Colors
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
HSV Color Picker - Online Traditional Hue Wheel
Classic HSV color wheel with sliders. See hex, RGB, and HSL equivalents. Intuitive for artists. No server interaction.
HTML Color Names - Online Complete List with Hex & Preview
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
Color Readability Tester - Online Visual Contrast Meter
Paste body text and test different font/background combos. See an actual passage rendered, not just a ratio. True feel for legibility.
Cocktail Recipe by Color - Online Pick Your Hue
Select a color and see which cocktails match it roughly. Blue for Blue Lagoon, red for Negroni. Fun bar guide.
contrast‑color() Preview - Online Automatic Text Color
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
CSS color‑mix() Function Playground - Online Tester
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
RGB to HEX Converter - Online Color Translator
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.
HTML Color Input Explorer - Online Native Picker & Events
Use <input type='color'> and see its change events and value in hex. Understand the native color picker. Quick demo.
Color Name Finder - Online Hex to Name Dictionary
Find the official name of any hex color from the extended color dictionary. Search by name to get the hex code. Handy for CSS and design language.
CMYK Color Preview - Online See Print vs Screen
Preview how a CMYK value will look on screen (approximate). Compare with its RGB equivalent. Pre‑press check.
Custom Range Slider CSS Generator - Online Styled Input
Style an `<input type='range'>` with custom track and thumb. Cross‑browser CSS. Preview and copy the code.
Flexbox Froggy Simulator - Online Learn CSS Flexbox Game
A replica of the famous Flexbox Froggy game: solve alignment puzzles by writing CSS. Progress saved locally. Fun frontend learning.
accent‑color Tester - Online Form Control Styling
Set a custom accent color for checkboxes, radios, range, and progress. See the browser’s rendering. Copy the CSS.
HEX to RGB Converter - Online Color Code Translator
Quickly convert HEX color codes to RGB values and vice versa. See the color preview. Indispensable for web developers and graphic designers.
RGB to HSL Converter - Online Color Space Translator
Input RGB values and see the HSL equivalent with a color preview. Understand lightness and saturation. Local.