OBS Studio: Color Space, Color Format, Color Range settings Guide. Test charts.

Introduction.
For higher compression rate, video encoders usually use methods of representation of each video frame as 3 separate channels: one for luminosity and two for color. This allow to compress color info separately from the luminance. Special math and quantization of this channels bring to us YUV (Y - luma, like "luminance/light"; U and V - chroma, like "chrominance/color").
Human eye is less sensible to color than to brightness of the visual signal, thus chroma info (UV) require less detail and may be compressed higher (with loss). Higher compression of the chroma possible through U and V downscale (by horizontal or vertical). This method is called chroma subsampling.

Quality.
Chroma depend on luma in math calculations, so if you loss some color info - you slightly alternate luminance in some part of the result image. This is noticable on transformations: original_RGB -> compressed_YUV -> restored_RGB, when color sub-sampling take place in the middle of the process.
Additional error introduced by gamma and different standards (BT.601, BT.709 etc.) applied to the encoding and decoding. If video encoded by BT.601 and viewed as BT.709 (i.e. without proper matrix) then you'll get color error ("darker" green than it actually should, and "over-bright" green vise versa).

OBS Studio settings
In OBS Studio (v0.15.4) you can specify:

Color Format - this is equal to the chroma subsampling;
YUV Color Space* - this is standard** of the color video you are working with;
YUV Color Range - this is video range of the resulting footage.

All this settings applies on encoding. To view created footage in the right way (true color) you must ensure that all stages of the post production (including web hosts) doesn't introduce color error in your videos. Professional studios places color bars at the beginning of the video for this purposes. Unfortunately, color bars are hard to understand by casual users. That's why I made this new test charts for OBS Studio.

Test charts (and test videos)
a) Color space, chroma subsampling, color range test charts
b) All charts in one 7z file (~23.1 MB)

How to use these test charts
All color test charts designed to be viewed in native resolution (scale 1:1 or 100%).

Download the test chart (.png image) with resolution equal or less than monitor resolution. For example 1920x1080 [here and further insert your value instead].
Set OBS Studio Settings>Video>Base (Canvas) Resolution to the test chart resolution [1920x1080]
Set OBS Studio Settings>Video>Output (Scaled) Resolution to the test chart resolution [1920x1080]
Add 'Image Source' to the scene. Select downloaded test chart as input image.
Make sure that image positioned at the top left corner of the OBS Studio Preview window.
Make recording or streaming.
Watch recorded or streaming video 100% scale. Do not scale it up or down! For your [1920x1080] monitor you may watch [1920x1080] video full screen.

Results and test chart readings
Color charts

The central part of the test chart has four rows of color marks, by looking on the left color sign you can visually determine what chroma subsampling value has your video source. First row is for 4:4:4 subsampling detection, second - 4:2:2, third - 4:1:1, fourth - 4:2:0. When mark is visible - subsampling is take place. Only one mark at the time can be true. Try to disable hardware acceleration of the video player before watch this test marks (some installations OS+Video+Player+Display+etc due to optimizations forces its own subsampling, hopefully, each user should see the same 'accelerated' picture:).

Each sign on the left has reference, to compare it to, on the right:

Note: by default, some players could playback 4:4:4 videos as 4:2:2; jpeg and mjpeg can use 4:1:1 (very rare setting, 4:2:0 and 4:2:2 are more common); all my software players playback videos as 4:2:0 by default.

At the bottom of the test chart you can see encoding matrix and sampling origin detection test. This test only applies to the videos with 4:2:0, 4:2:2, 4:1:1 subsampling. The upper part of the test square can has vertical gray stripes or solid gray plate. In case of two thick color stripes, probably you are working with other subsampling or at different scale. Two colored vertical stripes about 2 pixels wide. The greenish for centered sampling (JPEG) and reddish for co-sited to odd columns sampling (MPEG2). These 2 stripes points to used chroma sampling technique. The stripes matches to the corresponding triangle pointers only one at the time. The match ensures that the named sampling technique is in use. The test based only on horizontal position of the sampling point, it may not work for complex filtering like bilinear, bicubic etc. when these filters applies to the color planes.

chroma_origin_encoding_matrix_601_709-png.48305

BT.601 coefficients on encode, 4:2:0 subsampling. Chroma sample aligned to odd columns (left picture, MPEG2 sampling) or centered in 2x2 box (right picture, JPEG sampling):

BT.709 coefficients on encode, 4:2:0 subsampling. Chroma sample aligned to odd columns (left picture, MPEG2 sampling) or centered in 2x2 box (right picture, JPEG sampling):

Note: this test is useful for re-encoding (if you scale or crop - this test fails). If you see two stripes co-siting under the both JPEG and MPEG2 pointers - you got a baby... Sure, the test picture was shifted horizontally, check the test image alignment.

Left to the subsampling detection there is decoding matrix test. This test only applies to the videos with 4:1:1, 4:2:2, 4:4:4 subsampling. You are viewing at the right decoding if image has bright gray vertical rectangle at the middle of the square test sign. The pink or green tint says that wrong matrix is applied on decode (you need to adjust your player settings). Horizontal color stripes or dark gray rectangle says that you are working with other subsampling or at different scale.

Video is decoded with BT.601 coefficients while it was encoded with BT.709:

Video is decoded with BT.709 coefficients while it was encoded with BT.601:

Top left corner of the test chart has scale test sign. It consist of white and black stripes of 1 and 2 pixels width (16 and 8 stripes accordingly). When image scaled right - you can see all stripes at maximum contrast and minimal width. When image wrongly scaled - strips can loss the contrast, have smoothed edges, you can see gradients over whole sign or double width stripes.

You see wrongly scaled image on the right:

There is another one scaling test at right top corner of the test chart. Normal state for the sign is pink circle on white, and magenta square at background. If circles are too dark or image covered with moire then probably you are running test at wrong scale.

You see wrongly scaled image on the right:

Bottom left corner of the test chart has standard color bars at 75% level for both full range videos (PC) and partial range videos (TV). The noticeable difference in color is seen between green and magenta when wrong decoding is used - one color dimmed other has over-bright.

Wrongly decoded BT.601:

Wrongly decoded BT.709:

With color sign at bottom you can test detail loss. When subsampling or high compression applied to the video, some details may gone forever. For example, horizontal gray strips over color gradients may disappear.

Gray strips vanished on the last green:

The text blocks lies on the right half of the test chart. It helps to determine contrast loss, brightness shift and readability of the text when different subsampling and encoding options applied to the video.

Color spill and blur (4:1:1 format):

At bottom right corner of the test chart you can find sharpness test. The sign itself is a 2 crossed lines of the black color on the gray background. The right sharpness level applied to the monitor if both lines doesn't have white contour (outline).

Note: this test is useful for analog connections from PC to the display device (D-Sub VGA)

There is geometry test at the center of the test chart. At the background of the main test there is white circle. If image displayed with the right aspect ratio then this sign is round (no stretching).

Gray charts

Color Range test chart has row of squares, gray steps from 240 to 255, to compare it side-by-side to rectangles that has fixed 234 bright. Well scaled up Partial (TV) range video displayed on Full (PC) range monitor has gradations through all this 240...255 steps compared to fixed 234 (algorithms may vary a bit but overall "feel" is almost the same - no drops, bright gradation is present, 255 white is very bright and not shaded).

Color Range test chart has row of squares, gray steps from 0 to 15, to compare it side-by-side to rectangles that has fixed 16 bright. Well scaled up Partial (TV) range video displayed on Full (PC) range monitor has gradations through all this 0...15 steps compared to fixed 16 (algorithms may vary a bit but overall "feel" is almost the same - no drops, bright gradation is present).

Note: because of small amount of light energy emission from the dark grey you can try 'Black and White fast test' (see below), where squares are larger in size (more light quantum will be detected by eye).

There is fast detection test for video Color Range in the next test sign. The detection sign contain "black" rectangles (large size) 16; 14; 12; 10; 8; 4; 0 of bright, and "white" rectangles (large size) 234; 236; 238; 240; 244; 248; 252; 255 of bright. For well scaled videos (Full or Partial range), almost all gradations of bright are visible. Scaling required because Partial (TV) color range videos at 8-bit has 16-235 of luma versus 0-255 in Full (PC). At this test, not scaled videos (Full or Partial range) wrongly displayed as two large squares of black and white with a numbers or shaded a lot. Full/Partial range conversion (scaling) usually performed by software or hardware automatically (on the fly) and end users do not change this.

Full range video represented on full range monitor without proper scaling are black and white except 234 (wrongly scaled by software as partial range video, adjustment is needed):

Partial range video represented on full range monitor without proper scaling are shaded a lot (wrongly scaled by software as full range video, adjustment is needed):

Note: about half of the display devices I saw, had very high brightness (it is adjustable but users do not lower it for some reason, maybe fear to adjust expensive device or don't understand what brightness do). Both contrast and brightness settings of the display device can alter the results of the test.

Note: Take in mind, that when tests performed by TFT displays - try to move your head up or down to change viewing angle, color and contrast could change a bit.

_______________________________________________

Suggestions
Best compatibility for YouTube service is:

Color Format - NV12 (or 4:2:0 subsampling);
YUV Color Space - 709 (or BT.709);
YUV Color Range - Partial (or TV).

(this info is subject to change: services are changing...)

On my PC I see that all YouTube videos has 4:2:0 subsampling.
On my PC I see that all videos uploaded to YouTube by myself is decoded as BT.709 (chrome browser, acceleration is ON, default and someway popular setting among users). I see that all this videos, scaled down by YouTube itself, still uses BT.709 for both encode & decode.
TV range uses less bandwidth. Quality difference: in my browser... I don't see it.

Some applications or services may force to perform video so if as it was encoded in BT.709 standard when size of the image larger than 720 pixels by vertical (progressive frames).

Actually, this affects as many applications as I know ^_^ And many of them just ignore any info about the encoding video standard stored in the file by myself. So, you can change encoding matrix on your wish and videos larger than 720p will use BT.709 on decode; videos smaller 720p will use BT.601 on decode. This info useful for 4:2:0 videos. Yes, in some cases you can step aside (BT.601 has info only about 4:2:2 and 4:4:4). For other types of subsampling - it is better to always follow the standard (720p -> BT.709 on encode; less size -> BT.601 on encode - here I mean, if you working with old + new hardware; usually, you choose only one standard for your production, no matter what size is, this all depends on your target device - where content will be viewed).

Q: Where to find suggestions for other services?
A: Trust to your own feelings when working with color. YouTube is popular, I mentioned it for example only, you can make your own tests and share results too. There are a lot of services and applications available for the encoding/decoding. You can test anything, even JPG-converter application from the camera software bundle. Sometimes, it is hard to understand where error is - on converting or on displaying.

Take in mind:

NV12, I420 in OBS Studio is equal to 4:2:0 chroma subsampling (formats differ in hw data storing order, addressing).
I444, RGB in OBS Studio is equal to 4:4:4 chroma subsampling (no subsampling).
For streaming, OBS Studio always forces subsampling 4:2:0. If you setup other subsampling - conversion turned on automatically.
RGB doesn't have hw acceleration for conversions (there is warning message about this in OBS Studio log, it's normal).
Devices that has TV-out (of any kind) usually has partial range output or configurable parameter for this (look for the device manual). Set OBS Studio's input source settings according to the device setting. If possible, try upload test image to the device and view it 1:1 to determine the output range.

Conclusion
Color tests harder to pass - it depends on person and installation. Of course, you can playback predefined videos from the tests to make sure that you have adjusted equipment and trained eyes. All videos should playback without brightness drops and color shift.
From now on you able to test all compatibility settings for your lovely service/application by yourself.

* YUV (Y'CbCr in our case), it may transform into RGB and vise versa through BT.601 or BT.709 standards. All digital videos stored as Y'CbCr, nonlinear values (gamma applied).

** Since v26.0.0 of OBS Studio new value was added for selection to the Color Space field: sRGB - this is only "name" and means that the BT.709 standard is in use but with sRGB gamma function (TRC tagged as sYCC) applied instead of native BT.709 one. Rubbish? Maybe, but for PC screen capture it's OK. Why it was added? Because most displays itself are sRGB devices and content displayed on PC usually adapted for them (on the fly as well). Usually, users make edits of theirs recordings, thus the final video may get completely different characteristics. This all depends on your post-production (software and ways you edit your lovely videos).

Human eye is less sensitive to small color inaccuracies if side-by-side comparison doesn't take place. Soft image look better.
Human eye can get tired of the saturated colors. If you look at solid color too long, then you'll get color blind for this color for a few seconds (you'll see bright objects with different color tint).
Human eye most sensitive to wavelengths near 555 nm (feel of the "green" color).
Human eye may have color blindness of any kind from the born.

In FFmpeg chroma subsampling usually named "pixel format" (yuv420p, yuv444p, yuv422p etc.)

Optionally, you can make your own test movies with ffmpeg. By default encoded as BT.601, partial range:

ffmpeg -loop 1 -i "640x480_chroma_subsampling_test_chart.png" -c:v jpeg2000 -t 10 -pix_fmt yuv411p out_colorsub_test411.avi
ffmpeg -loop 1 -i "640x480_chroma_subsampling_test_chart.png" -c:v libx264 -t 10 -pix_fmt yuv422p out_colorsub_test422.mp4

Some useful color correction LUTs in PNG format (and few info on them) you can find at this post: https://obsproject.com/forum/threads/chroma-shifting-for-video-game-capture.69337/#post-299246

Original test videos was rendered with OBS Studio v24.0.0.

Designed to view on devices with color temperature ~6500K, gamma ~2.2, RGB 8-bit per channel.

Reactions: centineo, Gamer80, fenghuyu and 7 others

OBS Studio: Color Space, Color Format, Color Range settings Guide. Test charts.

More resources from Suslik V

Share this resource

Latest updates

Bugfix update for Color test charts

Latest reviews