Color palettes made from hydrant :)

How to handle CSS color with the new CSS color functions instead of SASS?

The best seems to be color().
There is also rgba(), hsla() and color-mix()

• color()

It’s evident that there is a growing array of new CSS capabilities that can handle many tasks we previously relied on Sass for.

Yes indeed. Also I agree: it's a per project decision to make.

Pick a collection of color and share the URL

Other color palettes: Fluorescent, Cool and refined, Warm, Refresh bright, Friendly, neutral / natural, gentle, calm.

Rob Knight blogged about it

The colors are inspired by the midliners pen https://www.zebrapen.com/pages/discover-mildliner

There is always color definitions, then semantic colors such as --color-primary-muted, --color-primary-vivid and then css variables used by the components.

A generator is available as snippet on https://codepen.io/cferdinandi/pen/dPojzmN

rgba(from currentColor r g b /. 35
or for better support:
color-mix(in srgb, currentColor 35%, [#0000)](https://shaarli.lyokolux.space/./add-tag/0000))

display-p3 will become a new standard

colour space (such as RGB or sRGB) will become required in the future.

oklch is a better color space than RGB or HSL. It has caveats: all color can not be displayed properly in the Display P3 colour space.

An open source toolbox for colors

A complete color palette ready to use

Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.

Where is the line between blue and green?

Different patterns: monochromatic, complementary, split complementary, analogous, tetradic, freestyle :)

Key takeaways:

• if someone wants high-contrast on some websites, does it mean for every websites?
• go for the accessible version first: high-contrast except for @media (prefers-contrast: less)
• why not fixing color contrast by default?

Some browsers implements customization such as Arc https://resources.arc.net/hc/en-us/articles/19212718608151-Boosts-Customize-Any-Website

A color palette

It could be nice for the #pses website

Each theme provides an accent, special, and neutral palette with 6 tints and 6 shades for a total of 13 generated colors each. Some themes use preset hues for each color, and others are generated based on color-theory.

A dark mode with an invert option is provided.

A contrast checker that can also convert colors to new CSS units.
Made by oddsbird.com