Use the tool
Showing September 18 as an example. Choose a date to see another.
Pine Conscience · #356544
Partners
Tints
Shades
| Pairing | Ratio | Grade |
|---|---|---|
| Dark ink on the color | 2.76:1 | Fails AA |
| Cream ink on the color | 6.78:1 | AA |
| The color as text on its lightest tint | 4.00:1 | AA (large text) |
| Deepest shade as text on the lightest tint | 8.43:1 | AAA |
A date gives you a hue, not a scheme
Every date has one color, and that color has a hue, a saturation and a lightness. A palette is what you build when you decide which of those three to move and which to hold. The tool below does the arithmetic on the date's hex: it rotates the hue by the classic harmony angles, walks lightness for tints and shades, and leaves the hue alone when it mutes the color.
The angles are not a matter of taste. Complementary is 180 degrees around the wheel, split-complementary is 150 and 210, triadic is 120 and 240, analogous is minus 30 and plus 30. Designers argue about which to use, not about the arithmetic. You can verify every value the tool prints by converting the hex to HSL and doing the same rotation yourself.
The four partners, and when each one works
A complementary pair is the loudest option: two hues opposite each other, maximum separation. It is good for a poster, a sports team, a single accent that has to be seen from across a room, and bad for a long document where both colors compete for attention.
Split-complementary takes the two hues either side of the opposite point. It keeps most of the contrast and loses the vibration, which makes it the safer choice for a website or a room. Triadic gives three evenly spaced hues; it is lively and hard to balance, so one of the three usually has to become the quiet one. Analogous stays within 60 degrees and reads as a family, which is why it suits interiors, textiles and anything that should feel calm.
Tints, shades and the muted version
The palette also walks the color toward the site's paper and its darkest ink. The four lighter steps are tints, the four darker steps are shades, and the muted version keeps the hue while pulling saturation down. A tint is not a lighter color in the sense of a different name - it is the same hue with less pigment, which is exactly what you want for a background behind the original.
Lightness is where most palettes fail. A deep navy and a near-white can both be "blue", but they cannot swap roles: text that reads on one disappears on the other. The tool prints the measured contrast of four real pairings rather than asserting that the palette is accessible.
Check the contrast before you check the vibe
WCAG 2.1 sets 4.5:1 for normal body text, 3:1 for large text (18pt, or 14pt bold) and 3:1 for the visible parts of interface components. 7:1 is the enhanced AAA level. Those numbers are ratios of relative luminance, not opinions, and the day page computes them from the actual hex values.
The practical order is: choose the base color from the date, choose a partner for the job, then test the text pairing you intend to use. If the ratio fails, the fix is usually to move the text to the darkest shade or to a paper surface, not to abandon the palette. A color that fails at 12px can pass at 28px bold - the threshold depends on the size you actually set.
A worked example
September 18 is Pine Conscience, a green at the darker end of the palette. Its complementary partner sits opposite on the wheel and reads as a warm rose; the split pair is quieter; the analogous pair stays in the green-teal neighbourhood. The tints step toward paper and make plausible backgrounds for a card; the shades step toward ink and make plausible text.
The same date shows why the tool matters more than a mood: the interesting decision is not "what color is my birthday" but "which of these six roles does my project need". A wedding invitation and a dashboard can start from the same green and end up with different palettes, because one needs a paper background and the other needs a dark interface.
Putting it to use without overdoing it
A useful rule of thumb is 60-30-10: about sixty percent of the visible surface in the quiet color, thirty in the supporting one, ten in the accent. It is a heuristic from interior and graphic design, not a law, and it fails on pages that are mostly text. For a room, the 60 is usually the wall; for a slide, it is the background; for an outfit, it is the largest garment.
Keep one thing fixed. If the base color is the point - a birthday, a brand, a gift - let it be the only saturated element and make the partners quieter. The tool will happily give you five loud colors; that is a demonstration of range, not a recommendation.
A worked brief: card, room, screen
Take a birthday card, a room and a dashboard that all start from Pine Conscience. For the card, the green can be the background and a tint the panel behind the message; the ink is the darkest shade. For the room, the green belongs on one wall or one textile, the neutral on the larger surfaces, and the accent on a small repeated object. For the dashboard, the green is a header or a chart series, the surface is a near-neutral, and the accent marks the one action. Same hex, three role assignments.
The differences are not decoration. A card is read at arm's length under unknown light; a room is seen at a distance and changes with daylight; a screen emits its own light and is often viewed for minutes. The palette gives you candidates, and the medium decides which candidate gets the largest area.
One honest limitation: the tool rotates hue in HSL, which is a convenient model, not a perceptually uniform one. Two colors with the same HSL lightness can look different in brightness, and a 180-degree rotation can change apparent saturation. The values are exact and reproducible, but "harmonious" is still a judgment you make by looking. A perceptual space such as OKLCH or CIELAB would distribute lightness more evenly; this site does not claim to use one, and the tool should not be read as a color-science authority.
Questions
How does the tool choose the complementary color?
It converts the date's hex to HSL, adds 180 degrees to the hue and converts back. Split-complementary uses 150 and 210 degrees, triadic 120 and 240, and analogous minus 30 and plus 30.
Are tints and shades just lighter and darker versions?
They are the same hue mixed toward the site's paper or its darkest ink, so yes in effect - but the tool prints the exact hex values, and the contrast table shows which of them can carry text.
Can I use these palettes commercially?
A hex value is not copyrightable, so you can use the colors. The color names and the readings belong to this site; take the hex values, not the copy.