Hue Hop

Give each letter of a heading or name its own color, stepped from one color to another. The text stays real, so selection, find-in-page and screen readers all work. No spans, no images, no build step.

Try it Docs Studio

reef Try your own

Ether

Still Selectable Searchable Read aloud

Try It

Type your own words and pick one of the seven hues. Move the faders, then copy the markup, or take it all to the Studio for custom colors and the rest of the controls.

Dusk —

Halftime

Hues

Curve 1.0

Shift 0

Lift 0.021

Open in Studio

For custom ends, accents, and per-letter contrast.

Markup

In the Wild

Hue Hop is for short text that names something: a title, a name, a number worth noticing. Flip the side to see every one of these light and dark.

Feature

Midnight Marauders

A Tribe Called Quest's third album, all fourteen tracks, in the order they were cut.

By the music desk · 12 min read

Magazine deck

1994

Illmatic
Ready to Die
Southernplayalisticadillacmuzik

A year

T he Low End Theory runs fourteen tracks, opens with Excursions and closes with Scenario. Play it front to back at least once.

Drop cap

Now playing Aquemini

OutKast, 1998

2:41 5:19

One color, auto end

Spottieottiedopaliscious

A line, set large

Nas
Lauryn Hill
MF DOOM
De La Soul
Mos Def

Tag chips

03:14:52

hours min sec

Countdown

~/hue-hop ❯ npm run size
  hue-hop.js  2407/2560  ok
  drift.css    299/400   ok
~/hue-hop ❯ npm test
  3 passing
~/hue-hop ❯

Terminal prompt

Quickstart

Three steps from npm to a colored heading. No framework, no config.

01 Install

npm

CDN

npm install hue-hop

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/hue-hop@0.1/dist/hue-hop.js"
></script>

No bundler. One tag in your page, so skip step 02.

02 Import
```
import 'hue-hop';
```
03 Drop One In
```
<hue-hop hue="reef">Aquemini</hue-hop>
```
Result
Aquemini

Hue Hop

Try It

In the Wild

Quickstart

01 Install

02 Import

03 Drop One In