Cascading Colors

Dynamic & interactive color palettes using CSS

by Miriam, Jonny, & Erica since 2019

Generate dynamic and interactive color palettes. Define custom themes with CSS custom properties, allow user-adjustments with a bit of light-weight JS, and customize the underlying system with Sass.

OddSite Colors

We use Cascading Colors on this site, with user-settings available in the top banner “colors” menu. The default system is generated from a primary hue of 195 (our brand blue).

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.

Light & Dark Modes:

The system includes a light and dark mode, along with an invert option which results in the opposite of the currently active mode:

light
invert
dark

Generated Palettes

prime

```
--ccs-prime--bg6
```
```
--ccs-prime--bg5
```
```
--ccs-prime--bg4
```
```
--ccs-prime--bg3
```
```
--ccs-prime--bg2
```
```
--ccs-prime--bg1
```
```
--ccs-prime
```
```
--ccs-prime--fg1
```
```
--ccs-prime--fg2
```
```
--ccs-prime--fg3
```
```
--ccs-prime--fg4
```
```
--ccs-prime--fg5
```
```
--ccs-prime--fg6
```

```
--ccs-prime--bg6-fade
```
```
--ccs-prime--bg5-fade
```
```
--ccs-prime--bg4-fade
```
```
--ccs-prime--bg3-fade
```
```
--ccs-prime--bg2-fade
```
```
--ccs-prime--bg1-fade
```
```
--ccs-prime--fade
```
```
--ccs-prime--fg1-fade
```
```
--ccs-prime--fg2-fade
```
```
--ccs-prime--fg3-fade
```
```
--ccs-prime--fg4-fade
```
```
--ccs-prime--fg5-fade
```
```
--ccs-prime--fg6-fade
```

accent

```
--ccs-accent--bg6
```
```
--ccs-accent--bg5
```
```
--ccs-accent--bg4
```
```
--ccs-accent--bg3
```
```
--ccs-accent--bg2
```
```
--ccs-accent--bg1
```
```
--ccs-accent
```
```
--ccs-accent--fg1
```
```
--ccs-accent--fg2
```
```
--ccs-accent--fg3
```
```
--ccs-accent--fg4
```
```
--ccs-accent--fg5
```
```
--ccs-accent--fg6
```

```
--ccs-accent--bg6-fade
```
```
--ccs-accent--bg5-fade
```
```
--ccs-accent--bg4-fade
```
```
--ccs-accent--bg3-fade
```
```
--ccs-accent--bg2-fade
```
```
--ccs-accent--bg1-fade
```
```
--ccs-accent--fade
```
```
--ccs-accent--fg1-fade
```
```
--ccs-accent--fg2-fade
```
```
--ccs-accent--fg3-fade
```
```
--ccs-accent--fg4-fade
```
```
--ccs-accent--fg5-fade
```
```
--ccs-accent--fg6-fade
```

special

```
--ccs-special--bg6
```
```
--ccs-special--bg5
```
```
--ccs-special--bg4
```
```
--ccs-special--bg3
```
```
--ccs-special--bg2
```
```
--ccs-special--bg1
```
```
--ccs-special
```
```
--ccs-special--fg1
```
```
--ccs-special--fg2
```
```
--ccs-special--fg3
```
```
--ccs-special--fg4
```
```
--ccs-special--fg5
```
```
--ccs-special--fg6
```

```
--ccs-special--bg6-fade
```
```
--ccs-special--bg5-fade
```
```
--ccs-special--bg4-fade
```
```
--ccs-special--bg3-fade
```
```
--ccs-special--bg2-fade
```
```
--ccs-special--bg1-fade
```
```
--ccs-special--fade
```
```
--ccs-special--fg1-fade
```
```
--ccs-special--fg2-fade
```
```
--ccs-special--fg3-fade
```
```
--ccs-special--fg4-fade
```
```
--ccs-special--fg5-fade
```
```
--ccs-special--fg6-fade
```

neutral

```
--ccs-neutral--bg6
```
```
--ccs-neutral--bg5
```
```
--ccs-neutral--bg4
```
```
--ccs-neutral--bg3
```
```
--ccs-neutral--bg2
```
```
--ccs-neutral--bg1
```
```
--ccs-neutral
```
```
--ccs-neutral--fg1
```
```
--ccs-neutral--fg2
```
```
--ccs-neutral--fg3
```
```
--ccs-neutral--fg4
```
```
--ccs-neutral--fg5
```
```
--ccs-neutral--fg6
```

```
--ccs-neutral--bg6-fade
```
```
--ccs-neutral--bg5-fade
```
```
--ccs-neutral--bg4-fade
```
```
--ccs-neutral--bg3-fade
```
```
--ccs-neutral--bg2-fade
```
```
--ccs-neutral--bg1-fade
```
```
--ccs-neutral--fade
```
```
--ccs-neutral--fg1-fade
```
```
--ccs-neutral--fg2-fade
```
```
--ccs-neutral--fg3-fade
```
```
--ccs-neutral--fg4-fade
```
```
--ccs-neutral--fg5-fade
```
```
--ccs-neutral--fg6-fade
```

Featured Workshop

Mia from behind,
standing at a laptop -
speaking to a conference audience
and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

by Miriam

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Webmentions

Miriam Eric Suzanne

August 7, 2022 from www.miriamsuzanne.com

Erin & I had a lovely vacation last month, driving around southwest Colorado – Bishop Castle, the Great Sand Dunes, Chimney Rock, the Durango-Silverton Railroad, the (terrifying) Million Dollar Highway, the Black Canyon of the Gunnison, and so on. It was absolutely beautiful.

This post isn’t about our vacation, or…

Open Source Sponsors

Current Sponsors

A huge thank you to the individuals and organizations sponsoring OddBird’s open source work!

Blue-Footed Boobies

Common Loons

Sponsor OddBird’s OSS Work

We love contributing back to the languages & tools that developers rely on, from CSS & Sass to browser polyfills and Python. Help us keep that work sustainable and focused on developer needs!