CSS color-contrast() – Target Contrast Ratio Demo

Nice demo by Daniel Yuschick, showing how color-contrast() does its thing. Using the controls you can change the target contrast using a keyword or a custom value. Good use of Custom Properties there as well! 👨‍🔬 To check this demo you’ll need Safari Technology Preview 122+ with the CSS color-contrast() Experimental Feature enabled.

Chromium Eye Dropper Browser Extension

Leveraging Chromium’s built-in EyeDroper API —which I wrote about earlier this year— Patrick Brosset created an extension for Chromium that allows you to pick a color from anywhere on your screen. In an accompanying blogpost he also explains how he built it: Back when I worked on the [EyeDroper API] article, I got interested in …

Pick Colors from websites your entire screen with the JavaScript EyeDropper API

Mid-August the WICG published a (unofficial) specification for a Native Eye Dropper — a tool you can use to get the color from the pixel that’s underneath the cursor — on the web. Let’s take a look … Usage The proposal is pretty straightforward: This API enables authors to use a browser supplied eyedropper in …

HSL: a color format for humans

Over at the Cloud Four blog, Paul Hebert digs into HSL colors Colors on the web are confusing — but they don’t have to be! The HSL format makes it easy for humans and computers to work with color. Included are some nice CodePen-hosted Color Pickers, such as this one: See the Pen HSLA Color …