Benchmark: RGB vs RGBa vs HSL vs Hex using Canvas

HTML Preparation code:

<canvas id="canvasOne" width="400" height="400"></canvas>
<canvas id="canvasTwo" width="400" height="400"></canvas>
<canvas id="canvasThree" width="400" height="400"></canvas>
<canvas id="canvasFour" width="400" height="400"></canvas>

Script Preparation code:

var canvasOne = document.getElementById("canvasOne");
var ctxOne = canvasOne.getContext("2d");

var canvasTwo = document.getElementById("canvasTwo");
var ctxTwo = canvasTwo.getContext("2d");

var canvasThree = document.getElementById("canvasThree");
var ctxThree = canvasThree.getContext("2d");

var canvasFour = document.getElementById("canvasFour");
var ctxFour = canvasFour.getContext("2d");

Tests:

RGBa
ctxTwo.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctxTwo.fillRect(0, 0, 400, 400); ctxOne.beginPath(); ctxOne.fillStyle = 'rgba(231, 76, 60, 0.1)'; ctxOne.arc(200, 200, 100, 0, Math.PI * 2, true); ctxOne.fill();
RGB
ctxTwo.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctxTwo.fillRect(0, 0, 400, 400); ctxTwo.beginPath(); ctxTwo.fillStyle = 'rgb(249, 206, 201)'; ctxTwo.arc(200, 200, 100, 0, Math.PI * 2, true); ctxTwo.fill();
Hex
ctxThree.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctxThree.fillRect(0, 0, 400, 400); ctxThree.beginPath(); ctxThree.fillStyle = '#f9cec9'; ctxThree.arc(200, 200, 100, 0, Math.PI * 2, true); ctxThree.fill();
HSL
ctxThree.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctxThree.fillRect(0, 0, 400, 400); ctxThree.beginPath(); ctxThree.fillStyle = 'hsl(15, 90%, 64%)'; ctxThree.arc(200, 200, 100, 0, Math.PI * 2, true); ctxThree.fill();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
RGBa
RGB
Hex
HSL

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
RGBa	302322.0 Ops/sec
RGB	403000.0 Ops/sec
Hex	195724.1 Ops/sec
HSL	192698.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is tested?**

The provided benchmark tests different ways to set the fill style for a 2D context in JavaScript, specifically for drawing a circle using the `fillStyle` property. The test cases cover:

1. RGBa (with alpha channel)
2. RGB (without alpha channel)
3. Hexadecimal color code
4. HSL (Hue, Saturation, Lightness) color model

**Options compared**

Each test case compares two or more options for setting the fill style:

* Context 1 (`ctxOne`) uses a hexadecimal color code.
* Context 2 (`ctxTwo`) uses an RGBa color code with alpha channel.
* Context 3 (`ctxThree`) uses a Hexadecimal color code.
* Context 4 (`ctxFour`) uses an HSL color model.

**Pros and cons of each approach**

1. **RGBa**: Pros: allows for transparent background, flexible alpha values. Cons: requires additional parsing for alpha channel values, can be slower due to extra calculations.
2. **RGB**: Pros: fast and lightweight, no need for alpha channel parsing. Cons: limited transparency options, less flexible than RGBa.
3. **Hexadecimal**: Pros: widely supported and understood, easy to read and write. Cons: color space is limited to sRGB, requires additional conversions for other colors.
4. **HSL**: Pros: provides a high degree of color customization, useful for design and graphics applications. Cons: can be less predictable than RGB or Hexadecimal, requires understanding of the HSL color model.

**Library usage**

None of the provided test cases rely on external libraries for their functionality.

**Special JavaScript features or syntax**

The benchmark makes use of:

1. `rgba()` function (for RGBa)
2. `rgb()` function (for RGB)
3. Hexadecimal color code (`#f9cec9`)
4. HSL color model (`hsl(15, 90%, 64%)`)

These features are standard in modern JavaScript and don't require additional setup or libraries.

**Other alternatives**

For a more comprehensive understanding of fill style options, you might want to explore:

1. `cmyk()` function for CMYK (Cyan, Magenta, Yellow, Black) color model.
2. Color management systems like ICC (International Color Consortium) for precise color reproduction.
3. CSS color functions, such as `var()`, `calc()`, or `mix()`, which provide additional color manipulation options.

Keep in mind that these alternatives might be overkill for simple 2D graphics and may introduce additional complexity to your codebase.

Related benchmarks:

RGB vs RGBa vs HSL vs Hex using Canvas (version: 0)

Comparing performance of: RGBa vs RGB vs Hex vs HSL

Created: 7 years ago by: Guest

Jump to the latest result

RGBa

RGB

Hex

HSL

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):