Sunday, December 20, 2015

C4OP: CSS Color Code Color Output Preview

Update Dec 24, 2015

TARGET ELEMENT BG COLOR OUTPUT
HEX/KEYWORD CONTROLLER
CSS Color Keywords List
RGB CONTROLLER
RGBA CONTROLLER
HSL CONTROLLER
HSLA CONTROLLER
CSS COLOR CODE OUTPUT
COLOR MODEL OPTION
C4OP

What is That?

It's sort of an application. A tool to preview the output color from the CSS color code you type (and/or slide).

The layout/control is inspired by our other tools interface.
Anyway, this is a pure browser sort of an application.

How to Use

First, select/pick the color model (on the bottom) to activate things.

Then type or do the equalization using the slider (RGB/HSL/RGBA/HSLA).

If the color code is valid, you'll see the output color. If not, the background-color will be transparent (and you can see the background-image) by default.

If you wanna equalize the color using different color model, copy the earlier reference, then switch to another model, and paste it, and equalize some more.

For example, you found keyword/hexadecimal color you like, but it isn't bright enough. You can switch to RGB/HSL model.
If you wanna HSL it, then copy the HSL equivalency of that keyword/hexadecimal, switch to HSL model, and equalize some more on it.
Same method for RGB.

Because RGBA and HSLA have "Alpha" (transparency), then, for instance, you wanna switch to RGBA from RGB, put 1 on the A (Alpha) part of the RGBA.
But it cannot be the other way round with RGBA to RGB. Because RGB doesn't have transparency argument.

Purpose

This might be useful to see the color output of certain color code. And to edit it, of course.
The tool has a background image for testing the color transparency (RGBA/HSLA).
As you'll notice then, HSL model is very "intuitive" for one color editing (if you have the first reference). And RGB is good for switching between different colors. The last, color keyword (and shorthanded hexadecimal color code) are the most memorable color codes.

Credit

  1. A lengthy, yet readable HSL, HSI, and HSV color coordinate models concept and conversion to RGB (and vice versa) on Dear Wikipedia

    The conversion arithmetic on this tool is pretty much like the well-written article (translated to JavaScript - approximated, hopefully there'll be no apparent conversion bug - it's usually related to rounding up/down result).

  2. "Checkered Background" is taken from gl-checker-background npm package demo output example at www.npmjs.com/package/gl-checker-background

Behavior

It is updated to have "boundary" when traversing the DOM elements, somewhat. You can compare it on Firefox and Chrome — it's the "different" new HTML5 slider element and/or the input event register implementations.
Or it was just our crummy coding. Yumyum. Crumbs.

| | |