Color Blender
Enter two HEX colours, choose how many steps you want, and the Color Blender shows the start colour, the end colour, and the evenly spaced colours between them. It is useful for quick UI ramps, gradient planning, icon states, and checking the exact HEX stops before you move into CSS or a design file.
How the HEX blend is calculated
-
1
Enter two HEX colours
Use 3- or 6-digit HEX, with or without #. Examples: #FF6B35, #1E3A8A, F60.
-
2
Choose 2-20 steps
The first swatch is the first colour and the last swatch is the second colour; the middle swatches are calculated between them.
-
3
Interpolate RGB channels
The tool converts HEX to red, green and blue channel values, interpolates each channel linearly, then rounds to the nearest integer.
-
4
Read the HEX stops
Each swatch is shown with an uppercase 6-digit HEX code you can select and reuse in your design or stylesheet.
What this tool does
Color Blender works with standard HEX colour notation only. It accepts short HEX such as #F60 and full HEX such as #FF6B35, normalizes the values internally, and outputs every result as a 6-digit uppercase HEX code.
The blend is a simple linear interpolation in RGB/sRGB channels:
- Convert each HEX colour into
R,GandBvalues from 0 to 255. - For each step, calculate
tfrom0to1. - For each channel, use
start + (end - start) * t. - Round each channel to the nearest whole number and convert the result back to HEX.
Because the endpoints are included, 2 steps means “start and end only.” With 7 steps from #FF6B35 to #1E3A8A, the output is:
| Step | Position | HEX |
|---|---|---|
| 1 | 0% | #FF6B35 |
| 2 | 16.67% | #DA6343 |
| 3 | 33.33% | #B45B51 |
| 4 | 50% | #8F5360 |
| 5 | 66.67% | #694A6E |
| 6 | 83.33% | #44427C |
| 7 | 100% | #1E3A8A |
Good uses
- UI state ramps: create a few in-between colours for hover, active, selected, or disabled states.
- Gradient planning: decide exact HEX stops before writing a CSS gradient in another tool.
- Icon and illustration variants: keep a small set of related colours consistent.
- Design QA: compare the exact channel-based midpoint instead of guessing by eye.
Limits to keep in mind
This blender does not accept rgb(), hsl(), named colours, alpha values, or 8-digit HEX. It does not export RGB, HSL, LAB, LCH, CSS snippets, contrast checks, or accessibility ratings. If you need those, use a dedicated converter, contrast checker, or gradient generator after you have the HEX stops.
Frequently Asked Questions
Use HEX only: 3 digits or 6 digits, with or without the leading #. The tool does not read rgb(), hsl(), alpha channels or named colours.
Yes. The first step is the first colour and the final step is the second colour. Any remaining steps are the interpolated colours between them.
The blend is calculated channel by channel in RGB/sRGB. That is predictable and easy to reuse in code, but it is not the same as perceptual LAB or LCH interpolation.
No. It shows swatches and HEX codes only. Use the generated HEX values in your CSS or pass them to a contrast checker if accessibility ratios matter for your use case.
Related Tools
HEX Color Picker
Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.
ASCII Table Reference
Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.
Color Palette Generator
Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.
FPS Counter
Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.
JSON Formatter
Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.
Phone Validator
Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.