C4OP: CSS Colour Code Colour Output Preview
What is That?
A tool to preview the output colour from the CSS colour code you type (and / or slide).
How to Use
First, select or pick the colour model to activate.
Then type or do the equalisation using the slider (RGB / HSL / RGBA / HSLA).
If the colour code is valid, you will see the output colour. If it is invalid, the background-color will be transparent — and you can see the default checkered background-image.
If you want to equalise the colour using different colour model, copy the earlier reference, then switch to another model, and paste it, and equalise some more.
For example, you've found keyword / hexadecimal colour you like, but it wasn't bright enough. You can switch to RGB / HSL model, then modify it per part.
If you need to convert it to HSL, copy the HSL equivalent of that keyword / hexadecimal, switch to HSL model, then further modify it.
Similar method for RGB.
Because RGBA and HSLA have Alpha (transparency), therefore, for instance, you need to switch RGB ➡️ RGBA, put 1 on the A (Alpha) part of the RGBA.
But it cannot be the other way around with RGBA ➡️ RGB.