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();

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 runs

RGBa

213K/s

RGB

121K/s

HSL

112K/s

Hex

110K/s

Fastest: RGBa (1.9x faster)

View exact numbers

✓ RGBa: 212,531 ops/sec
• RGB: 120,672 ops/sec
• HSL: 111,536 ops/sec
• Hex: 110,319 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year 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

RGB

403K/s

RGBa

302K/s

Hex

196K/s

HSL

193K/s

View exact numbers

Test name	Executions per second
✓ RGB	403,000 Ops/sec
RGBa	302,322 Ops/sec
Hex	195,724 Ops/sec
HSL	192,699 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.

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

Go to the latest result

RGBa

RGB

Hex

HSL

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

RGBa

RGB

Hex

HSL

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `RGBa vs RGB vs Hex vs HSL`