Screenshot of Colour Gradient Explorer #1 View Demo

Colour Gradient Explorer #1

A simple tool to create colour gradients. There are a bunch of existing colour gradient tools online (CSS Gradient Generator, CSS Gradient etc), but they require the user to enter at least 2 colours to create a gradient. My demo is like the lazy man's gradient generator as it will attempt to create a nice gradient from a single base colour by incrementally adjusting the RGB values. Also, the generated gradients are displayed full-screen.

Once the gradient has been generated, the individual colour values used to make the gradient are made available (as Hex, RGB, and HSL) and can be copied to the clipboard with a single click, the same for the CSS rules. Also, clicking on a colour column will set it as the new base colour and regenerate the gradient.

Full length screenshot of the colour gradients demo.

colours gradients javascript

Comments

New Comment

If you have a comment you'd like to share, feel free to leave it below. I moderate all comments before they are published. Markdown is enabled. See syntax for help.

I'll never share your email with anyone else.

Web Demos

My web demos exist as a playground for creating experiments written in HTML, CSS and JavaScript.

I have previously used CodePen for experimenting with HTML/CSS/JavaScript, but in the spirit of IndieWeb POSSE, I decided to start hosting my demos myself.

Folksonomy

I like tag all content on my site. See below for all tags used within my web demos.

Subscribe

Click the link below to subscribe to my Demo feed in your favourite news reader client:

RSS feed

Philip Newborough and a donkey enjoying a beer.

About

My name is and I’m a full stack web developer living and working in Lincoln, England. This website (philipnewborough.co.uk) serves as my personal homepage. When I’m not working with tech, I love to ride bicycles with my wife and friends.

← An IndieWeb Webring 🕸💍 →