Color Grading

A
L
T
E
R
E
D
V
E
R
S
I
O
N
Slider Ranges
Brightness
Min:
Max:
Contrast
Min:
Max:
Saturation
Min:
Max:
Hue
Min:
Max:
Various images
Various images

Color Grading

You too can have a much brighter future in the emerging field of Photographic Color Grading! As a professional Photographic Color Grader, you will correct images for high-end fashion websites and the like. Big-box, image-oriented websites need Photographic Color Graders today! The opportunities are almost limitless. And most Photographic Color Graders wrap up their day’s work before lunchtime, and have the entire afternoon off! Let this interactive testing page help launch your lucrative and relaxing career as a professional Photographic Color Grader.

Here’s how this testing page works

There are two identical images displayed side-by-side directly above the 'Brightness,' 'Contrast,' and 'Saturation' sliders. [On smaller-screen devices, the images will be displayed top-to-bottom, above the sliders.] The image on the right side (or on the bottom, on smaller screens) has been 'altered' in appearance through the application of what are called 'CSS Filters' visual effects—effects that change the 'altered' image’s 'brightness,' 'contrast,' and 'saturation' levels. [These three 'color-grading' levels are discussed in detail in the web-page articles linked-to at the end of this section.]
Your goal is to move the 'Brightness,' 'Contrast,' and 'Saturation' sliders to the left-and-right until the 'altered' image on the right looks the same as the original image on the left (or the original image above it, on smaller screens), by removing the applied 'CSS Filters' visual effects from the 'altered' image.
Once you believe you have moved the sliders so that both of the images look the same, you should observe your screen from slightly different angles to double-check the images' similarity to each other, from those different perspectives, before clicking on the 'Show P/D' button (which stands for 'Show Percentage/Degree'). The 'Show P/D' button will display 'percentages' to the left of each slider that will indicate how close you are to a '100%' (100-percent) slider location for the 'Brightness,' 'Contrast,' and 'Saturation' levels of the 'altered' image. A '100%' slider location indicates that the 'altered' image now has all of the 'CSS Filters' visual effect associated with that slider removed.

Opening the 'Hue' Slider

When the 'Hue' slider is opened (via the 'Show Hue' button), a '0-degrees' slider-location will initially indicate that no CSS Filters 'hue visual effect' has yet been applied to the 'altered' image. But once you click on the 'Reset CSS' button, a CSS Filters 'hue visual effect' will be applied to the 'altered' image—in addition to a new set of 'brightness,' 'contrast,' and 'saturation' visual effects. (Of course, you can manually add a 'hue visual effect' to the 'altered' image once the 'Hue' slider has been opened, by moving the 'Hue' slider left-and-right.) [The reason for the 'degrees' measurement-designation for the 'Hue' slider will become evident shortly.]
Note: You may find that moving the 'Brightness,' 'Contrast,' and 'Saturation' sliders to '100%' setting-positions can be a little daunting when the sliders' 'percentages' read-outs are turned off (by toggling the 'Show P/D' button). And when you add the 'Hue' slider to the mix—and you try positioning the 'Hue' slider to a '0-degrees' setting-position—well, that additional slider can make your task even more daunting! To that end, clicking the 'Hide Hue' button removes any CSS Filters 'hue visual effect' that has been applied to the current 'altered' image, if any.
Luckily for us, today’s photo/video editing software comes equipped with space-age looking 'waveform scopes' and 'video scopes' and other electronic gizmos that can show you if your slider positions are in the ballpark in regards to properly adjusting your images!
Note: Each 'Brightness, 'Contrast,' and 'Saturation' slider's 'range' scale starts from a stationary 'minimum value' of '0' (on the left end of the slider), then increases up to a dynamically-changing 'maximum value' for each slider, on the right end. Each 'range' scale gets updated with a new, random maximum ('max' attribute) value whenever the 'Reset CSS' or 'New Image' buttons have been clicked ... so that the location of the '100%' setting on the 'Brightness,' 'Contrast,' and 'Saturation' sliders constantly changes, to keep things challenging. The 'range' scale of the 'Hue' slider gets updated with both a new, random minimum ('min' attribute) value and new, random maximum ('max' attribute) value.
Clicking on the 'Show Diag' button (short for 'Show Diagnostics') will display a mini-panel on the right side of the 'altered' image. The mini-panel will show the randomly-created 'max' attribute-values for the 'Brightness,' 'Contrast,' and 'Saturation' sliders, as well as showing the randomly-created 'min' and 'max' attribute-values for the 'Hue' slider.
Clicking the 'Reset CSS' button will apply a new set of random-value 'CSS Filters' visual effects to the currently displayed 'altered' image, in addition to updating 'min'/'max' values. Clicking the 'New Image' button displays a new original image on the left (or top), and an associated 'altered' version of that original image on the right (or bottom)—with a new set of random-value 'CSS Filters' visual effects applied to the 'altered' version.
Credit: This web page is fashioned after a 'demo' web page that is linked-to from this awik.io web-article about 'CSS Filters' visual effects, written by Andreas Wik.
Note: In lieu of moving the four visual-effects sliders to the left-and-right on smaller screens, where each slider's width has been greatly reduced, you can 'move' the sliders remotely using the '+/-' (plus/minus) buttons to the left of each slider. And a stylus pen for 'clicking' the '+/-' buttons while working on this web page on smaller-screen devices is strongly suggested.
Also note that the rules for 'color grading' are not set in stone; but are in fact quite subjective; and so your ideas of what constitutes a good-looking image may differ substantially from the original images' settings presented on this web page.

Hue Demonstration Panel

Below is a 'Hue Demonstration Panel' that demonstrates how a CSS Filters 'hue visual effect' can change the various colors of a 'Hue Scale' and 'Hue Color Circle.'
To activate the CSS Filters 'hue visual effect,' just rotate with your cursor and mouse the 'circular slider' on the lower-left of the Hue Demonstration Panel in a 'clockwise' or 'counterclockwise' direction ... and you will witness the colors of the 'Hue Scale' change!
The 'Hue Scale' is the rainbow-looking rectangle on the lower-right of the Hue Demonstration Panel (or, on the center-bottom on smaller screens), and it has a smaller 'control-duplicate' Hue Scale directly beneath it. (On smaller screens, the 'circular slider' will be located center-middle on the Hue Demonstration Panel.)
You will also see the color changes that occur to the 'Hue Color Circle' located at the top of the Hue Demonstration Panel, as you rotate the 'circular slider.'

Hue Demonstration Panel

...
Image without a 'Hue' visual effect applied
Image altered by CSS Filters 'Hue' effect
Slider1
The two 'Reset' buttons above on the 'Hue Demonstration Panel' will return the 'circular slider' back to a '0-degrees' setting when clicked.
The 'Hue Color Circle' images on the demonstration panel above come from this medium.com article that gets into the minutia of what 'hue' is. The 'Hue Scale' images on the demonstration panel come from this wikimedia article. The 'circular slider' on the lower-left of the panel is called a Round Slider, and is one of many, free circular-slider designs available from the Round Slider website.
For those interested in learning the basics of 'Brightness,' 'Contrast,' 'Saturation,' and 'Hue'—with the aid of lots of diagrams and easy-to-understand explanations—here are a few website articles that delve into the particulars of 'color grading':

Testimonial

“Ever since becoming a professional Photographic Color Grader, I have been invited to all the right parties, and have a lot more friends. Thanks, testing page.”
— Millie, President, Color Graders Inc.