Gradient color stops generator
Get every color stop between a start and an end: from #FF0000 to #0000FF in 5 stops gives #BF0040 at 25%, #800080 at 50% and #4000BF at 75%, with both ends included. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Choose a start color, an end color, and the total number of stops.
From two colors to a full set of stops
A gradient often begins as a simple design instruction: move from one brand color to another using a certain number of steps. Turning that instruction into reusable data can become tedious when every intermediate color and position must be calculated consistently. This generator accepts a starting hexadecimal color, an ending hexadecimal color, and the total number of stops you want.
It includes the start at zero percent and the end at one hundred percent, then distributes every other stop at equal percentage intervals. Each result is normalized to uppercase six-digit hexadecimal notation, so shorthand input such as #f00 still produces a stable #FF0000 value. The returned array is ready to map into CSS gradients, SVG definitions, canvas code, chart configuration, or a token build process.
Understand the deterministic interpolation method
Colors are interpolated independently across the red, green, and blue channels. For each position, the generator calculates the proportional distance from the starting channel value to the ending channel value, then rounds the channel to the nearest valid integer from 0 through 255. That is commonly called linear RGB interpolation.
It is deliberately straightforward and reproducible: there is no randomness, color-profile lookup, browser rendering dependency, or external service involved. Percentage positions come from the stop index divided by the number of intervals, and repeating decimals are rounded to six decimal places. This gives useful positions for counts such as four, where the middle stops appear at 33.333333 and 66.666667 percent, without exposing distracting floating-point artifacts.
Linear RGB is not presented as a perceptually uniform color model; equal numeric steps may not look equally bright to the human eye.
What you can do with it
Build CSS gradient declarations
Generate normalized hex colors and positions that can be joined into a repeatable linear-gradient or radial-gradient declaration.
Populate SVG and canvas artwork
Use each color and percentage pair as a deterministic stop in generated illustrations, charts, and effects.
FAQ
What color space does interpolation use?
It uses direct linear interpolation of the red, green, and blue channel values, rounding each resulting channel to the nearest integer.
Can I use three-digit hex colors?
Yes. Three-digit values such as #f00 are expanded to six digits before interpolation, and all returned colors use uppercase #RRGGBB notation.
How many stops can I request?
The count must be an integer from 2 through 256, inclusive.
How do I make a five-stop gradient from red to blue?
Enter #FF0000 as the start, #0000FF as the end and 5 as the count. You get #FF0000 at 0%, #BF0040 at 25%, #800080 at 50%, #4000BF at 75% and #0000FF at 100%.
Are the start and end colors included in the count?
Yes. The count covers both ends, so asking for 5 stops places them at 0, 25, 50, 75 and 100 percent. The smallest count is 2, which returns only the first and last color.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/color/gradient-stops \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"start_color":"#FF0000","end_color":"#0000FF","count":5}'const res = await fetch("https://api.kit.forhosting.com/color/gradient-stops", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"start_color": "#FF0000",
"end_color": "#0000FF",
"count": 5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/gradient-stops",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"start_color": "#FF0000",
"end_color": "#0000FF",
"count": 5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/gradient-stops", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"start_color":"#FF0000","end_color":"#0000FF","count":5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"start_color":"#FF0000","end_color":"#0000FF","count":5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/gradient-stops", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"start_color": "#FF0000",
"end_color": "#0000FF",
"count": 5
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.gradient_stops",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
max_stops | 256 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
The gradient color stops generator turns two endpoint colors into a complete, predictable sequence for CSS, design tokens, charts, canvas drawing, and programmatic artwork. The result includes both endpoints and every intermediate color, each paired with its percentage position. Strict validation catches malformed colors and unsafe stop counts before they enter a production workflow, while deterministic RGB interpolation ensures that identical input always produces identical JSON.
Create a complete stop list from two endpoints
Because the count includes both endpoints, requesting five stops means that the positions are 0, 25, 50, 75, and 100 percent. This convention makes the size of the response obvious and avoids hidden additions that could break downstream array indexing.
Validate inputs and integrate the returned stops
Whitespace around the value is removed, but embedded spaces, alpha channels, named colors, and non-hexadecimal characters are rejected. The stop count must be an actual integer between 2 and 256. Consumers can join those records into a CSS linear-gradient value, store them as design tokens, feed them into an SVG stop list, or use the percentages as normalized checkpoints in another renderer. Both endpoint fields accept either three or six hexadecimal digits and may include a leading hash. Requiring at least two stops guarantees that both endpoints have meaningful positions, while the upper bound keeps output size and execution time predictable. A successful response repeats the normalized endpoints, reports the validated count, and provides a stops array whose records contain color and percentage fields. The endpoint records are computed by the same bounded algorithm as intermediate records, and integer arithmetic in the channel numerator reduces avoidable floating-point drift.
Integration use cases
Create design token scales
Turn approved endpoint colors into a fixed-length token sequence for themes, components, or data visualization.
Technical questions
Are the endpoint colors included?
Yes. The first stop is the normalized start color at 0 percent, and the final stop is the normalized end color at 100 percent.
What does an API request cost?
The API price is $0.002 per request. The same deterministic calculation can also run free in the browser on this page.