Colour picker tool makes it easy to create, adjust, and experiment with custom colours for the web. It also makes it easy to convert between various colour formats supported by CSS, including HEXA colours, RGB (Red/Green/Blue) and HSL (Hue/Saturation/Lightness). Control over the alpha channel is also supported on RGB (rgba) and HSL (hsla) formats. Each colour is presented in all 3 standard web CSS formats as you adjust it; in addition, based on the currently-selected colour, a palette for HSL and HSV, as well as alpha, is generated. The “eyedropper” style colour picker box can be toggled between HSL or HSV format.

Using colour in CSS (short for cascading stylesheets) is actually pretty easy. If you’re new to CSS, just search intro to CSS, there are lots of great tutorials out there. Hex colour codes are the most common method of adding colour to an HTML element using CSS. In your stylesheet, you can use the CSS colour property to change the default colour of your website’s text.

Using RGB values is all the rage these days, but it’s just as easy as Hex codes or colour names. Insert your RGB values within the rgb() parameter following the colour property. When using an RGB value in your website, you can also specify opacity. Instead of rgb() use rgba() – the a is for alpha, the colour channel that controls opacity – and after your three colour values add a fourth for opacity, on a scale from 0 – 1 (0 for completely transparent, 1 for fully opaque).
RGB values can also be used to add a background colour to HTML elements. Using the same style attribute like before, replace the HEX code or colour name with a properly formatted RGB value (be sure to enclose it in parentheses and prefix it with a lowercase ‘rgb’).

Facebook Comments