Hex Clock

The time of day is a colour: #HHMMSS. The swatch below ticks once a second, you can pin it to any time, paste a hex value, or type a decimal hour. The readout panel shows the same value as RGB, HSL, luminance, and the closest CSS named colour. Pure client-side, offline.

Mode

Live Pinned

Hours (0–23) : Minutes (0–59) : Seconds (0–59)

Or type a value

Now Sample Clear

Time as colour

The swatch is the time. The text colour flips to black or white depending on which has a higher WCAG contrast ratio against the swatch.

—:—:—

#000000

Readouts

Decimal (HH:MM:SS)

—

Hex (#HHMMSS)

—

Decimal hour (0–24)

—

Closest named colour

—

RGB · HSL · Luminance

The same value, broken into the three colour channels and the WCAG relative luminance. Contrast ratios against pure black and pure white are the AA/AAA gating check.

R 0

G 0

B 0

H 0°

S 0%

L 0%

rgb(r, g, b)

—

hsl(h, s%, l%)

—

Relative luminance

—

Contrast vs black / white

—

Preset times

One-click samples across the day, from a midnight black swatch to a noon near-white swatch.

The hex clock is a 1990s web-design tradition: the time of day, written as a CSS colour, fills the screen. The math here is the same as any colour picker — six hex digits decode to three 8-bit channels, the channels decode to HSL via the sRGB transform, and the WCAG relative luminance is the standard weighted sum 0.2126 R + 0.7152 G + 0.0722 B after a piecewise-linear sRGB decode. The page uses that luminance to pick a high-contrast overlay text colour so the time stays readable on every swatch. All math runs in your browser; nothing is uploaded.