tints.dev

tints.dev generates a 50–950 color palette and outputs it as Tailwind CSS theme variables, so you can paste the result straight into your CSS. The tool supports Tailwind CSS v4 and v3, and lets you export in oklch, hex, or hsl. The main condition to know: the Palette API returns a palette built from a single base hex value only — it does not apply your HSL tweaks (hue shift, saturation shift, lightness distribution) that you set in the visual creator.

Step 1: Generate the palette

Open the Palette Creator on tints.dev and set your starting point:

• Initial Value — enter a valid hexadecimal color. By default this maps to stop 500, but you can assign it to any stop from 50 to 950.
• Hue Shift — useful when your base color has 100% saturation; shifting the hue up or down makes the palette more interesting.
• Saturation Shift — for base colors with little saturation, increasing saturation at the extremes keeps the palette from looking washed out.
• Maximum / Minimum Lightness — spread the remaining colors toward white and black.
• Lightness vs. Luminance — switching between these modes produces a different spread of colors at the extremes.

These controls follow principles from the Refactoring UI book by Adam Wathan and Steve Schoger. Note that the same book actually recommends against automated palette tools — tints.dev exists to fast-track a first draft, not to replace design judgment.

Step 2: Pick your output format

Before copying, choose the color mode and Tailwind version:

The output is a set of CSS custom properties following Tailwind's color naming convention, from --color-<name>-50 through --color-<name>-950. For example, a blue palette in oklch looks like this:

@theme {
  --color-blue-50: oklch(0.965 0.015 273.9);
  --color-blue-100: oklch(0.924 0.033 272.8);
  --color-blue-200: oklch(0.847 0.071 271.55);
  --color-blue-300: oklch(0.771 0.108 268.07);
  --color-blue-400: oklch(0.701 0.144 265.29);
  --color-blue-500: oklch(0.623 0.188 259.81);
  --color-blue-600: oklch(0.532 0.171 258.32);
  --color-blue-700: oklch(0.426 0.139 258.76);
  --color-blue-800: oklch(0.33 0.107 258.44);
  --color-blue-900: oklch(0.234 0.077 258.58);
  --color-blue-950: oklch(0.189 0.063 258.86);
}

Step 3: Paste into your CSS

Use the Copy to Clipboard button, then paste the block into the CSS file that holds your Tailwind theme configuration. Because the variables use Tailwind's standard naming (--color-blue-500, etc.), utilities like bg-blue-500, text-blue-700, and border-blue-200 resolve to your new palette without any extra mapping.

Expected result: after saving, your Tailwind color utilities render with the generated values. If you use Tailwind v4, the @theme block is the correct place for these definitions; if you selected v3, use the output format that matches your v3 configuration.

Using the Palette API

The Palette API fetches a palette programmatically, which is handy for design tools that need to turn a single hex value into a full 50–950 scale. The important limitation: the API returns a palette using only the base hex value — there are no options to apply HSL tweaks. So if your design depends on hue shift, saturation shift, or custom lightness distribution, generate that palette in the creator and copy the output rather than calling the API.

Common snags

• Tweaks missing from API output. If a palette fetched via API looks flatter than what you saw in the creator, that's expected — the API ignores HSL adjustments.
• Wrong Tailwind version. The v3 and v4 outputs differ. Match the version selector to your project before copying.
• Color mode mismatch. oklch, hex, and hsl are all valid, but pick the one your project already uses to avoid mixing formats in one theme.

tints.dev was made by Simeon Griggs, built with Tailwind CSS, React Router, Headless UI, and HeroIcons, hosted on Cloudflare, with content in Sanity.io.

Cybersecurity is the practice of keeping your data, accounts, and services from being accessed, stolen, altered, or knocked offline by someone who shouldn't have them. For a personal site or small online presence, that reduces to a short list of concrete jobs: protect your login credentials, keep your software current, serve traffic over HTTPS, and lock down the domain and DNS layer that everything else depends on. You don't need an enterprise security team to cover the basics — but you do need to treat your registrar account and your hosting account as the two most valuable things you own, because whoever controls those controls the site.

What cybersecurity actually protects

It helps to separate the assets from the threats, because most small-site incidents come from a handful of causes.

The pattern: each asset has one or two controls that remove most of the risk. You don't need all of them on day one, but skipping the account and domain layers is the mistake that's hardest to undo.

The threat categories a small site actually faces

• Credential theft — reused or weak passwords, or credentials leaked from another breached service. This is the most common way small sites fall.
• Phishing — fake login pages or "your domain is expiring" emails designed to capture your registrar or hosting password.
• Malware and backdoors — usually arriving through an outdated CMS, plugin, or theme.
• DDoS — flooding a site until it's unreachable; often handled by your host or a CDN rather than by you.
• Misconfiguration — an open admin panel, directory listing, or default credentials left in place.

Notice that four of the five are about access, not exotic exploits. That's why the basics work.

Core protections to apply first

Use strong, unique passwords and a password manager

Every account tied to your site — registrar, host, CMS, email — should have a different password. A password manager makes this practical. The goal is that one leaked password can't be replayed anywhere else.

Turn on multi-factor authentication

MFA is the single highest-value control for your registrar and hosting accounts. Even if a password is stolen, an attacker without the second factor can't log in. Prefer an authenticator app or hardware key over SMS where the service supports it.

Serve everything over HTTPS

An HTTPS/TLS certificate encrypts traffic between visitors and your site and prevents browser "not secure" warnings. Most hosts and registrars offer a free certificate; the important part is that it's installed and that HTTP redirects to HTTPS.

Update promptly and keep the surface small

Apply CMS, plugin, and theme updates as they're released, and delete anything you're not using. Fewer components means fewer places for a known vulnerability to sit unpatched.

Apply least privilege

Give each person (and each integration) only the access they need. Don't run your site day-to-day from an administrator account, and don't hand out admin rights for tasks that don't require them.

Secure the domain and DNS layer

This layer is easy to overlook and expensive to lose, because a hijacked domain can point anywhere.

• Protect the registrar account with a unique password and MFA. Your registrar account is the root of control over the domain.
• Enable the registrar lock (often called a transfer lock or clientTransferProhibited) so the domain can't be moved without your action.
• Keep registrant contact email secure — that inbox is often the recovery path for the domain.
• Enable DNSSEC where your registrar and DNS provider support it, so responses can be cryptographically validated and spoofing is harder.
• Watch for unauthorized DNS changes — if records you didn't touch appear, treat it as a compromise.

Porkbun is an ICANN-accredited domain registrar, which means it operates under ICANN's registrar rules — relevant here because those rules govern transfers, locks, and registrant contact requirements. Its site lists Stripe among its payment platforms. Beyond that, check your specific registrar's and DNS provider's current feature set for lock and DNSSEC support, since availability varies.

Warning signs and first steps if something looks wrong

Watch for: unexpected DNS records, visitors reporting malware warnings, unexplained admin accounts, a sudden traffic drop, or emails about transfers you didn't request.

If you suspect a compromise:

1. Change passwords on registrar, hosting, and CMS accounts, starting with the registrar.
2. Revoke active sessions and reset MFA where possible.
3. Check DNS records against what you expect and revert unauthorized changes.
4. Restore from a known-good backup if files were altered.
5. Re-scan and update the software before reopening the site.

Containment first, then recovery — don't try to clean a live, still-compromised site.

What to outsource vs. manage yourself

Hosting-level security, CDN, and WAF are usually worth outsourcing because they require scale and constant attention. Account hygiene, MFA, updates, and domain/DNS protection are things you should keep in your own hands regardless of size — they're cheap to do and costly to skip.

OpenAPI-generated API documentation is reference documentation that is produced automatically from an OpenAPI description file rather than written by hand. You write (or generate) a machine-readable specification of your API — endpoints, parameters, request bodies, responses, schemas, and auth — and a documentation tool reads that file and renders a browsable, often interactive reference site. The spec becomes the single source of truth; the docs become a build artifact.

This differs from manually written docs in one fundamental way: with hand-written docs, the prose is the source of truth and the API is described separately. With spec-driven docs, the API description is the source, and every page, table, and code sample is derived from it.

How the workflow actually runs

A typical spec-driven documentation pipeline has five stages:

1. Author or generate the spec. You either write an OpenAPI document by hand (YAML or JSON), or generate it from code annotations, framework metadata, or a design-first editor. Design-first means the spec is written before implementation; code-first means it is extracted from existing code.
2. Validate and lint. The spec is checked against the OpenAPI schema and against style rules — consistent naming, required descriptions, no undocumented 4xx responses, no orphaned schemas.
3. Bundle and transform. Multi-file specs are combined, $ref pointers are resolved, and the document is optionally split into per-tag or per-version outputs.
4. Render. A documentation tool converts the spec into HTML: an endpoint list, a sidebar of operations, parameter tables, response schemas, and a "try it" console.
5. Publish and version. The rendered site is deployed, and each API version gets its own snapshot so consumers can read docs matching the version they call.

Steps 2 through 5 are usually automated in CI. If the spec fails validation, the docs build fails — which is the point.

Spec-driven vs. hand-written documentation

The practical conclusion most teams reach: generate the reference, write the guides. Reference material is repetitive and mechanical, which is exactly what generation is good at. Conceptual explanations, migration notes, and tutorials carry judgment that a spec cannot express.

What you get out of the box

Generated reference pages commonly include:

• An operation list grouped by tag or path, with HTTP method and path.
• Parameter tables showing name, location (path, query, header, cookie), type, required flag, and description.
• Request and response schemas rendered as expandable trees, including nested objects and arrays.
• Authentication details pulled from the securitySchemes section.
• Interactive request consoles that let a reader send a real call from the browser.
• Generated code samples in several languages, derived from the same schemas.
• Multiple output formats, such as a static site, a single HTML file, or a mock server.

Because all of these come from one document, changing a field name in the spec updates the parameter table, the schema tree, and every code sample at once.

Where spec-driven documentation breaks down

Generation is not free. The trade-offs are real:

Spec quality becomes documentation quality. A field with no description produces a table row with an empty cell. A vague summary produces a vague heading. Tools can enforce presence of descriptions via linting, but they cannot enforce that the description is useful.

Customization has limits. If you need a page that does not map to an OpenAPI concept — a conceptual overview, a pricing explanation, a comparison of two endpoints — you write it outside the generator and link to it.

Not everything is expressible. Webhooks, streaming responses, long-polling behavior, and complex multi-step flows are awkward or impossible to describe fully in OpenAPI. Those need prose.

The spec can go stale. If the spec is maintained separately from the implementation, it drifts just like hand-written docs. The mitigation is to generate the spec from code, or to test the implementation against the spec in CI.

Interactive consoles need care. A "try it" button that hits a production API with real credentials is a security and rate-limit problem. Point it at a sandbox, or disable it.

Deciding whether to adopt it

Adopt spec-driven reference documentation if most of these are true:

• Your API has more than a handful of endpoints, or changes frequently.
• You ship client SDKs or code samples in more than one language.
• Multiple teams consume the API and need a consistent, always-current reference.
• You already have, or are willing to maintain, an OpenAPI description.

Stay with hand-written docs, or a hybrid, if:

• Your API is small and stable, and the reference fits on one page.
• Your documentation is mostly conceptual and contains little endpoint-level detail.
• You cannot commit to keeping the spec in sync with the implementation.

A reasonable middle path: generate the reference from the spec, and hand-write the getting-started guide, authentication walkthrough, and error-handling page. Link the two directions so readers can move from concept to endpoint and back.

A minimal starting checklist

1. Produce one valid OpenAPI document for a single API version.
2. Add a linter with rules for descriptions, operation IDs, and error responses.
3. Wire the docs build into CI so a failing spec fails the build.
4. Render the reference and review it as a reader, not as the author.
5. Write the two or three conceptual pages the generator cannot produce.
6. Version the published docs alongside the API version.

The core idea is simple: describe the API once, in a format both machines and humans can read, and let the reference documentation fall out of that description. Everything else — tooling, hosting, interactivity — is a detail on top of that decision.

The tints.dev Palette API returns a full 50–950 Tailwind CSS color palette generated from a single hex value. You send one base color, and the API responds with the eleven stops that make up a Tailwind-style scale. It is built for design tools and workflows that need to turn one brand or base color into a complete palette without manual tuning. The important limitation: the API only returns a palette built from the base hex value, with no options for the HSL tweaks (hue shift, saturation shift, lightness distribution) that the on-page Palette Creator offers.

What the API returns

The output is a set of color stops labeled 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 — the same eleven-stop structure Tailwind CSS uses. The site's example output shows these values in oklch() format, which is what Tailwind CSS v4 uses by default:

@theme {
  --color-blue-50: oklch(0.965 0.015 273.9);
  --color-blue-100: oklch(0.924 0.033 272.8);
  --color-blue-200: oklch(0.847 0.071 271.55);
  --color-blue-300: oklch(0.771 0.108 268.07);
  --color-blue-400: oklch(0.701 0.144 265.29);
  --color-blue-500: oklch(0.623 0.188 259.81);
  --color-blue-600: oklch(0.532 0.171 258.32);
  --color-blue-700: oklch(0.426 0.139 258.76);
  --color-blue-800: oklch(0.33 0.107 258.44);
  --color-blue-900: oklch(0.234 0.077 258.58);
  --color-blue-950: oklch(0.189 0.063 258.86);
}

The generator also supports other output color modes — hex, hsl, and oklch — and a "Copy to Clipboard" action, so you can paste the result directly into a CSS file. The @theme block format is what you paste into a Tailwind CSS v4 stylesheet.

When to use the API instead of the Palette Creator

Use the API when you need palettes generated programmatically — for example, a design tool that lets a user pick one hex value and instantly produces a 50–950 scale, or a build step that generates theme tokens from a brand color.

Use the on-page Palette Creator when you want to tune the result by hand. The Creator exposes controls the API does not:

So if a base color has 100% saturation and you want to shift the hue to make the palette more interesting, or if a low-saturation base needs more saturation at the extremes, that work has to happen in the Creator — the API will not apply those adjustments.

How the palette is built

The generator works by taking your base hex as a reference stop (by default stop 500, though the Creator lets you set it to any stop from 50–950) and spreading the remaining stops toward white and black. The Creator's guidance describes the levers involved:

• Hue shift — useful when the base color is fully saturated; shifting hue up or down makes the palette less flat.
• Saturation shift — useful when the base color has little saturation; increasing saturation at the extremes keeps the palette from looking washed out.
• Minimum/maximum lightness (or luminance) — spreads the rest of the colors toward the extremes of white and black.
• Lightness vs. luminance mode — switching between them produces a different spread of colors at the extremes.

These principles are credited to the Refactoring UI book by Adam Wathan and Steve Schoger. The site notes that the same book actually recommends against automated palette tools — tints.dev exists to fast-track palette creation, not to replace design judgment.

Practical notes

• The API returns a palette from the base hex value only. If you need HSL tweaks baked in, generate the palette in the Creator first, then copy the CSS.
• The site is built with React Router, hosted on Cloudflare, with content in Sanity.io, and designed with Tailwind CSS (plus Headless UI and HeroIcons). It was made by Simeon Griggs.
• The page links to a launch blog post for full details on how the generation works — worth reading if you want to understand the math behind the stops.
• Pricing and authentication requirements are not stated on the page, so treat access terms as unconfirmed until you check the site directly.

Open tints.dev, enter a valid hexadecimal color as the initial Value, and the generator produces an 11-stop palette (50–950) you can copy as Tailwind CSS theme variables. By default that base color becomes stop 500, but you can assign it to any stop from 50 to 950. From there you refine the result with Hue Shift, Saturation Shift, Minimum/Maximum Lightness, and a Linear/Perceived toggle, then copy the output in your preferred color mode.

Step 1: Set the base color and its stop

The Palette Creator starts from a single hex value.

1. Enter a valid hexadecimal color in the Value field (or use the Open Color Picker).
2. Choose which stop that color represents. The default is Auto (500); you can change it to any stop from 50 to 950.

The base color anchors the palette. Every other stop is derived by spreading lightness toward white (100) and black (0) around it.

Step 2: Adjust Hue Shift and Saturation Shift

These two controls make a palette more interesting when a flat spread would look dull.

• Hue Shift — for colors that have 100% saturation, shifting the hue up or down adds variation across the stops instead of repeating one flat hue.
• Saturation Shift — palettes starting from a base color with little saturation become more interesting by increasing saturation at the extremes.

Both are optional. If your base color already reads well across the range, leave them at zero.

Step 3: Set Minimum and Maximum Lightness

The Lightness Distribution range runs 0–100, where 100 is white and 0 is black.

• Shift the Minimum and Maximum Lightness to spread the remaining colors out toward the extremes of white and black.
• A wider range pushes the lightest stops closer to white and the darkest stops closer to black; a narrower range keeps the palette more compressed.

Step 4: Switch between Linear and Perceived

Toggle between Linear and Perceived modes to produce a different spread of colors at the extremes. The two modes distribute lightness differently, so the same base color and range can yield noticeably different 50 and 950 stops. Try both and keep the one that matches how you want the ends of the scale to look.

Step 5: Copy the output

The generator outputs your palette as Tailwind CSS theme variables. Choose the color mode you want — oklch, hex, or hsl — then use Copy to Clipboard and paste into your CSS file. The output is formatted as a @theme block, for example:

@theme {
  --color-blue-50: oklch(0.965 0.015 273.9);
  --color-blue-100: oklch(0.924 0.033 272.8);
  --color-blue-200: oklch(0.847 0.071 271.55);
  --color-blue-300: oklch(0.771 0.108 268.07);
  --color-blue-400: oklch(0.701 0.144 265.29);
  --color-blue-500: oklch(0.623 0.188 259.81);
  --color-blue-600: oklch(0.532 0.171 258.32);
  --color-blue-700: oklch(0.426 0.139 258.76);
  --color-blue-800: oklch(0.33 0.107 258.44);
  --color-blue-900: oklch(0.234 0.077 258.58);
  --color-blue-950: oklch(0.189 0.063 258.86);
}

The site lists Tailwind CSS Version 4 as the output target.

Using the Palette API

If you need to generate a 50–950 palette from a single hex value inside a design tool, the Palette API can fetch any set of palettes. Note the current limitation: the API only returns a palette using the base hex value, with no options for HSL tweaks. The interactive Hue/Saturation/Lightness adjustments described above apply to the Palette Creator UI, not the API.

A note on the approach

The site states that these principles are inspired by Refactoring UI by Adam Wathan and Steve Schoger — and that the same book recommends against automated tools like this one. The tool is positioned as a way to fast-track creating new palettes, not to replace design judgment. Treat the generated scale as a starting point and adjust stops by eye where it matters.