Reference examples for blendMode() need distinct colors to highlight differences

[aleannab]

Most appropriate sub-area of p5.js?

• [X] Accessibility
• [X] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [X] Other (specify if possible)

p5.js version

v1.10.0 (latest)

Web browser and version

Firefox v130.0, though would affect all.

Operating system

Windows, though would affect all.

Steps to reproduce this

Steps:

1. Go to https://p5js.org/reference/p5/blendMode/
2. View example images for each of the blend modes.
3. Many of the blend modes result in identical hex codes.

See p5.js sketch

Background color: #c8c8c8

Blend Mode	Colors
BLEND & HARD_LIGHT	#0000ff and #ff0000
BURN, MULTIPLY & DARKEST	#0000c8 and #c80000
LIGHTEST, SCREEN, ADD & DODGE	#c8c8ff and #ffc8c8
DIFFERENCE & EXCLUSION	#c8c837 and #37c8c8
SOFT_LIGHT	#9d9de2 and #e29d9d
OVERLAY	#9191ff and #ff9191

.

Solution:

Update the colors for the blendModes() examples.

In the image below, I used #1a85ff and #d41159. I chose these colors from the suggested accessible palettes in the article 'Coloring for Colorblindness' by David Nichols. I also made the background color slightly darker, so the lighter results stand out more.

There are still a couple modes that look similar, but it is an improvement on its current state.

See p5.js sketch

Background color: #b4b4b4

Blend Mode	Colors
BLEND	#1a85ff and #d41159
HARD_LIGHT	#25b7ff and #e6187e
BURN	#006fb4 and #a50028
MULTIPLY	#125eb4 and #96187e
DARKEST	#1a85b4 and #b41159
SOFT_LIGHT	#8ab6d6 and #cb86a4
LIGHTEST	#b4b4ff and #d4b4b4
SCREEN	#bcdbff and #f2b9ce
ADD	#ceffff and #ffc5ff
DODGE	#c8ffff and #ffc1ff
OVERLAY	#78b7ff and #e6739d
DIFFERENCE	#9a2f4b and #20a35b
EXCLUSION	#a97d4b and #a97d4b

I'd be happy to work on this once colors are approved.