Free Online Colour Blending (Lerp) Tool

about.

toby Hi, I'm Tobias Loader. I'm a student at the University of Oxford studying Maths and CompSci and I love building fun coding projects. Check out my LinkedIn and Github if you'd like more info.

Although I've done a fair amount of frontend dev over the years I've often found it difficult to choose colours for my designs. So this year I decided to build a simple and relatively intuitive blending tool that would help me find inspiring colours more easily. Colourblender.io was the result and I've actually found it quite useful, so I hope you do too :)

If you have any feature requests, bug reports, etc, you can get in touch via .

I'm keen to keep developing this project and have plans in the pipes for user accounts to save your colour palettes, a transparency feature (e.g. RGBA) and introducing new colour spaces like HSL, CYMK, LCh etc.

show colour css.

Below is the css for the colour you've selected. This is a linear interpolation (lerp) of your two chosen colours at a given percentage between the left hand and the right hand colour. 0% would represent all of the left colour and none of the right, whilst 100% would represent none of the left colour and all of the right.

You can use the toggle in the top right of the window to switch between hex and rgb colour encodings as required...

show gradient css.

Here is the css for recreating the linear gradient in the background you created on the home page (and this page). In case you would like to use it on your own site, it's good to know that 94% of users' browsers support the modern css standard below:

Compatability: IE 10+, Edge, Firefox 16+, Chrome 26+, Safari 6.1+, Opera 12+, iOS Safari 7.1+, Android Browser 4.4+, Chrome for Android 46+

However, for maximum compatibility with older browser versions you can use the following css instead. If required you can always switch between hex and rgb encodings using the toggle in the top right of the window.

Compatability: IE 6+, Edge, Firefox 3.6+, Chrome 10+, Safari 5.1+, Opera 12+, iOS Safari 5.1+, Android Browser 4+, Chrome for Android 46+

privacy info.

I'm collecting some usage info (with Google Analytics 4) to enable visitor traffic to the site to be analysed so I can better understand how my site is used, and give me an indication as to which of my projects to prioritise.

Optional Cookies

Cookie Name	Set By	Description
users_cookie_choice	ColourBlender.io	I store this cookie if you clicked 'yes' to indicate that you are 'ok with cookies'. It then removes the cookie notice from the website.
_ga	Google Analytics	Used to distinguish users.
_ga_<container-id>	Google Analytics	Used to persist session state.

Essential Cookies - only "coffee?" page

Cookie Name	Set By	Description
stripe.csrf, cid, locale, __stripe_orig_props, site-auth, __stripe_mid, private_machine_identifier, machine_identifier	Stripe.com	These cookies are only installed when you visit the "coffee?" (donate) page. These cookies are strictly necessary for that page as it enables the Stripe payment system to function. Stripe is a payment processing service that processes all tips on our site. These are thrid party cookies installed by Stripe that I cannot customise. Read about Stripe's privacy policy.
SOCS, __Secure-ENID, CONSENT, AEC, NID	Google.com	These cookies are only installed when you visit the "coffee?" (donate) page. These cookies are strictly necessary for that page as it enables Google Pay to function through Stripe (Google installs these through Stripe api even if your device does not support Google Pay, sorry). Read about Google's privacy policy.