Color Shades & Tints Generator
Paste a color and get a full tint-to-shade scale: Tints toward white, Shades toward black, both live. Computed in your browser, never sent.
Developer notes
Classical linear RGB mix, not HSL-lightness mixing: tint_i = base + (white - base) * i/steps, shade_i = base + (black - base) * i/steps, channel-wise in sRGB. colorjs.io parses the pasted color only. The mix itself is plain interpolation, with no other color library. At i = steps the last tint is exactly white and the last shade is exactly black, with no rounding drift. Both scales always render together: there is no direction toggle or a third "tones" (gray-mix) scale. swatchFormat picks one CSS format at a time for every swatch; paste a swatch's value into Color Converter for a full format breakdown.
Options
- Steps — Number of swatches generated in each of the Tints and Shades scales. 5–15, default 10: a 5-step scale suits a quick check, 10–15 suits a full design-token palette.
- Swatch format — The CSS format shown and copied for every swatch, across both scales: HEX, RGB, or HSL. Default HEX, the universal paste-ready format.
Related CSS tools
Hub: Color & CSS Tools. Convert a swatch to every format with Color Converter and check contrast with Color Contrast Checker. Shrink and format stylesheets with Minify CSS and Beautify CSS.
Color Shades & Tints Generator FAQ
Local tint and shade scale generator
What's the difference between Tints and Shades?
Tints mix your base color toward white; Shades mix it toward black. Both scales are always generated together from the same base color and step count.
How many steps can each scale have?
5 to 15 steps per scale, 10 by default, which is the widely recognized design-token scale size. Both scales always share the same step count.
Is this the same as a 'tones' generator?
No. Tones mix toward gray, which this tool does not generate. It only produces tints toward white and shades toward black, the classical definition.
Are my colors uploaded anywhere?
No. Parsing and mixing run entirely in your browser. FastMinify never sends the pasted color to a server.
Color & CSS Tools
Paste-local WCAG contrast checking with modern CSS color syntax — pair and matrix views, never uploaded.
Explore other tool categories
- Minify
Shrink code and assets for production — minify JavaScript, CSS, HTML, JSON and XML before gzip or CDN deploy.
- Unminify
Expand minified or compressed code — unminify JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML and other formats when debugging or reviewing.
- Conversion
Transform data between JSON, YAML, XML and CSV locally — no server uploads.
- Encoding
Encode or decode Base64, URL components and HTML entities — client-side only.
- Serialization
Serialize and deserialize PHP data structures beside JSON workflows.
- JSON Tools
Validate, format, diff and explore JSON payloads — complementary to minifiers and converters.
- SVG Tools
Preview, optimize with SVGO, export Data URI, resize, beautify, convert to JSX and validate SVG — all in your browser.
- Beautify
Make code readable with consistent indentation — beautify JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML and more in your browser.
- CSS preprocessors
Compile SCSS or LESS to standard CSS in the browser — pair with beautify or minify for a full stylesheet workflow.
- DevOps & Infra
Terraform HCL format/validate/minify, Dockerfile format & lint, Docker Compose and .env validation.
- CI/CD
GitHub Actions and GitLab CI — format YAML and check workflow/job structure in your browser.
- Logs & observability
Line-oriented JSON/NDJSON and Nginx/Apache access logs — format, filter, validate, and CSV/TSV.
- Kubernetes
Multi-doc manifests, structural validate, Ingress/Deployment starters, and Helm values formatting.
- Networking / IP
CIDR, subnets, and IPv4/IPv6 helpers — in your browser.
- Security & tokens
JWKS, X.509 certificates, and secrets scan — browser-local.
- API & schemas
OpenAPI tools to format, validate, and lint your specs.
- HTTP Tools
Paste-local cURL, HTTP messages, URLs, HAR files, and Cookie / Set-Cookie headers — format and inspect in your browser, never sent.
- SEO / Web Tools
Generate meta tags, Open Graph, and Twitter Card output locally — previews simulated from your inputs, never fetched from your live site.
- Developer utilities
Timestamps, UUID, ULID, Nanoid, cron, passwords, regex, slugify, number bases, case, text diff, and chmod — all client-side.
- Text & Markdown
Count words, build Markdown TOCs, and clean line lists — all in your browser.
- AI & LLM
Token counting, pricing estimates, and context-window fit — 100% browser-local.
- Test Data
Synthetic field values for fixtures and DB seed — reserved-range phone numbers first.
- Barcode labels
Draw Code 128, EAN-13, and UPC-A label images in the browser — PNG and SVG download, not a GS1 lookup.