Tint, Shade & Tone Generator

Generate color variations by adjusting lightness (tints & shades) or saturation (tones).

Base Color

Choose Color

Number of Steps: 5

Variation Type

Tints are created by adding white to the base color, making it lighter.

Export

tints of #6366f1

Base

#8082F4

#9899F6

#B4B5F8

#CBCCFB

#E8E8FD

Base

#6366f1

tints 1

#8082F4

tints 2

#9899F6

tints 3

#B4B5F8

tints 4

#CBCCFB

tints 5

#E8E8FD

Full Lightness Scale (0-100%)

#FFFFFF

#D0D1FB

#A1A3F7

#7274F3

#4346EF

#1418EB

#1013BC

#0C0E8D

#080A5E

#04052F

#000000

0% L50% L100% L

CSS Output

:root {
  --base-color: #6366f1;
  --tints-1: #8082F4;
  --tints-2: #9899F6;
  --tints-3: #B4B5F8;
  --tints-4: #CBCCFB;
  --tints-5: #E8E8FD;
}

Tints, Shades, and Tones

These three terms describe how you modify a base color. Understanding the difference helps you create cohesive color systems.

Tints

Base color + white. Lighter versions. Use for backgrounds, hover states, and subtle highlights.

Shades

Base color + black. Darker versions. Use for text, borders, shadows, and depth.

Tones

Base color + gray. Muted versions. Use for sophisticated, professional designs with reduced saturation.

Building Color Scales

Design systems use color scales - typically 10 steps from lightest to darkest. This generator creates scales you can use directly in CSS variables or design tokens.

Example scale structure

50 (lightest tint):Backgrounds, subtle borders

100-200 (light tints):Hover states, highlights

300-400 (mid tints):Secondary elements

500 (base color):Primary actions, brand

600-700 (mid shades):Hover states, emphasis

800-900 (dark shades):Text, headings

Other Free Tools

Search tools

CSS Color Palette Generator

Generate harmonious color palettes from images or color theory rules. Export CSS variables and Tailwind config. Free online color palette generator for web design.

CSS Color Converter

Convert colors between HEX, RGB, HSL, HSV, OKLCH, and more. Get CSS-ready color values instantly. Free online CSS color converter for designers and developers.

Color Contrast Checker

Test color combinations for WCAG AA and AAA accessibility compliance. Ensure readable text and UI colors. Free online color contrast checker for web designers.

CSS Gradient Generator

Create linear, radial, and conic gradients with live preview. Generate CSS gradient code for backgrounds and UI. Free online gradient maker.

CSS Mesh Gradient Generator

Create stunning multi-point mesh gradients with smooth color transitions. Generate CSS and SVG mesh gradients. Free online mesh gradient tool.

Dark Mode CSS Generator

Generate prefers-color-scheme dark mode CSS from your color palette. Create accessible dark themes instantly. Free online dark mode CSS generator.

Google Fonts Pairing Tool

Discover and preview harmonious Google Fonts combinations. Find perfect heading and body pairings. Free online font pairing tool.

Letter Spacing & Line Height Visualizer

Adjust and preview letter-spacing and line-height values for perfect typography rhythm. Free online type visualizer.

CSS Filter Generator

Apply blur, brightness, contrast, hue-rotate, and more filters visually. Generate CSS filter code instantly. Free online CSS filter generator.

CSS Button Generator

Design beautiful buttons with hover effects, gradients, and shadows. Generate production-ready CSS button styles. Free online CSS button maker.

CSS Border Radius Generator

Create asymmetric border-radius values with live preview. Generate organic, smooth corner shapes for modern UI design. Free online border radius tool.

CSS Box Shadow Generator

Create multi-layer box shadows with blur, spread, and inset options. Generate beautiful shadows for buttons, cards, and UI elements. Free online CSS shadow tool.

Glassmorphism Generator

Create glassmorphism effects with backdrop-filter, blur, and transparency. Generate modern frosted glass CSS. Free online glassmorphism generator.

Neumorphism Generator

Create soft UI neumorphic effects with subtle shadows and highlights. Generate modern soft design CSS. Free online neumorphism generator.

CSS Pattern Generator

Generate repeating patterns — stripes, dots, checkerboard, waves — using CSS and SVG. Free online CSS pattern generator for backgrounds.

CSS Background Noise Generator

Generate subtle noise and grain textures using CSS and SVG filters. Add depth and texture to backgrounds with this free online CSS noise generator.

CSS Text Shadow Generator

Create multi-layer text shadows with blur, spread, and color. Generate beautiful text effects. Free online CSS text shadow generator.

CSS Shape Generator

Create triangles, arrows, speech bubbles, and more using pure CSS. Generate shape code instantly. Free online CSS shape maker.

CSS Clip Path Maker

Draw custom clip-path shapes — polygons, circles, ellipses — with visual editor. Generate CSS clip-path code instantly. Free online clip path generator.

CSS Transition Previewer

Preview and compare CSS transition easing functions. Test built-in and custom cubic-bezier curves. Free online transition previewer.

Cubic Bezier Editor

Visually create custom cubic-bezier easing functions. Generate smooth, natural animations. Free online cubic-bezier editor for CSS transitions.

CSS Animation Generator

Create CSS keyframe animations with live preview. Generate smooth, performant animations for web projects with customizable easing, duration, and iteration. Free online CSS animation builder.

CSS Loader Generator

Create pure CSS loading spinners, dots, and bars. Customize size, color, and animation speed. Free online CSS loader generator.

CSS Grid Generator

Create CSS Grid layouts visually. Generate grid-template-areas, gap, and responsive breakpoints. Free online CSS Grid layout builder.

Flexbox Playground

Experiment with Flexbox properties interactively. Generate flex container and item CSS with live preview. Free online Flexbox learning tool.

CSS Spacing Scale Generator

Generate consistent spacing and size scales for design tokens. Create 4px, 8px, 16px base scales. Free online spacing scale generator.

Fluid Space Calculator

Generate clamp()-based responsive spacing that scales with viewport. Create fluid design systems. Free online fluid space calculator.

Fluid Typography Calculator

Create responsive font sizes using CSS clamp() for smooth scaling between breakpoints. Free online fluid typography generator.

PX to REM Converter

Convert pixels to REM and EM units with configurable root font size. Generate accessible, scalable CSS. Free online px to rem converter.

Viewport Unit Converter

Convert between vw, vh, vmin, vmax, and px units. Generate responsive viewport-based CSS. Free online viewport unit converter.