Skip to main content

Exploring CSS: mix-blend-mode

Overview​

Inspired by Felipe Pantone's kinetic color wheel installations, I wanted to build a pedagogical tool that mimics a similarly playful, colorful experience in the browser.

RoleCreator, developer
Inspired ByFelipe Pantone
Linkhttps://mrwayman.com/color-wheel
TechReact.js, HSL Color, CSS mix-blend-mode, Web Browser

Interactive Browser Color Wheels​

Check out the all-in-one Interactive Browser Color Wheel UI.

Interactive browser color wheel web UI

Concept​

Let's start with a basic HSL color wheel over an HSL color square.

HSL color wheel over an HSL color square

Mix Blend Modes​

Let's explore all the browser-native mix-blend-modes.

Multiply​

css mix-blend-mode multiply

Screen​

css mix-blend-mode screen

Overlay​

css mix-blend-mode overlay

Darken​

css mix-blend-mode darken

Lighten​

css mix-blend-mode lighten

Color-Dodge​

css mix-blend-mode color-dodge

Color-Burn​

css mix-blend-mode color-burn

Hard-Light​

css mix-blend-mode hard-light

Soft-Light​

css mix-blend-mode soft-light

Difference​

css mix-blend-mode difference

Exclusion​

css mix-blend-mode exclusion

Hue​

css mix-blend-mode hue

Saturation​

css mix-blend-mode saturation

Color​

css mix-blend-mode color

Luminosity​

css mix-blend-mode luminosity