Most color tools hand you five handsome swatches and wish you the best. This one keeps talking. It will tell you that your body text is sitting at 3.1:1. It will show you which two of your colors collapse into the same color for a viewer with red-green color blindness. And it will not hand you a gradient that turns the color of dishwater in the middle, which is what component-wise sRGB blending does to a blue and a yellow — their midpoint comes out #808080.

None of it blocks anything. You can overrule every warning on the page, and the warning will still be there when you come back.

Underneath the opinions there is arithmetic. Colors are handled in OKLCH rather than HSL, which gets that same blue and yellow wrong in its own way: HSL puts them at the same 50% lightness even though their measured luminance differs by roughly a factor of thirteen, so scales built in HSL come out uneven. A perceptual space fixes that. The generator also forces a dark tone and a light tone into every palette, because five midtones leave you nowhere to set text; that one is a decision rather than something the color space does for you.

Two things worth being precise about. The color vision preview simulates dichromacy — protanopia, deuteranopia and tritanopia — which is the case where colors genuinely merge, and which affects on the order of 2% of men. The milder anomalous forms are more common, they shift color rather than erasing it, and the preview does not model them. The gradient tool blends in OKLCH by default, and switching a gradient to sRGB blending is the fastest way to see what that is for.

Where this came from

Phenocolor started more than ten years ago as one HTML file, some JavaScript and a stylesheet. That was enough for what it did. It lived on the edge of a hard drive and got opened whenever a project needed five colors and the internet's suggestions were all beige.

Then it grew, the way tools do when you keep reaching for them. Saving palettes turned out to be worth the afternoon it cost. Gradients followed. The contrast figures and the color vision checks came last, after a project where the brand color had been signed off a year earlier and could not carry text at any size.

What finally pushed it onto the web was mundane. Once it was more than a couple of files, keeping the same version on the laptop and on the desktop became its own small chore, and copying folders between machines is a bad filing system.

The name came last. For a decade the folder was called palette-tool, which was accurate and nothing else. Phenocolor is half the company name and half the obvious noun. It also sounds like something that arrives in a metal case with a serial number on it, which I did not mind.

What is in it

Generate: A new palette flies in every time you hit the spacebar. Lock the ones worth keeping.
One color: A brand color becomes a 50–950 scale and a set of harmonies.
Gradient: Two to four stops, blended in OKLCH, with copy-ready CSS.
Contrast: Any pair against WCAG 2.1, and the nearest color that passes.
From an image: A photo becomes a palette, without the photo leaving your device.
Explore: A curated set to browse when nothing comes to mind.

About the beta

Phenocolor is in beta. Concretely: features are still moving, the curated collection is still small, and anything you have saved lives in your own browser rather than in an account.

Clearing your browser data clears your saved palettes. Every palette also has a link that encodes it, and that link is the copy that survives — mail it to yourself if it matters. The contrast maths follows the WCAG 2.1 formulas and is tested against the reference values in the spec, but if a number is going into a compliance audit, check it against a second implementation.

I would rather say that now than after you have lost a palette.

What might happen next

Roughly what is next, in no particular order and with no dates attached.

Self-hosted typefaces, so the one request that leaves for Google stops leaving.
Accounts, so a cleared browser stops taking your collection with it. Reluctantly: not asking who you are has been the point so far.
More export targets — Swift, Android, and design tokens in the formats design systems actually consume.
A report link and a review queue for published palettes, before the collection needs one.
APCA contrast shown alongside WCAG 2.1, once it is stable enough to sit next to the number people are audited against.

Some of this will not happen.

Terms of use

The colors are yours. Palettes, scales, gradients and CSS produced here carry no licence and no attribution requirement. Use them commercially, modify them, claim you thought of them. We make no copyright claim to any color value or to any combination of color values.

Provided as is. Phenocolor is provided without warranty of any kind, express or implied. It is a design aid. It is not an accessibility audit, and nothing on this site is legal advice about accessibility obligations. Contrast figures follow the WCAG 2.1 formulas; responsibility for what you ship remains with you.

Published palettes are public. A palette published to Explore is visible to everyone and cannot be unpublished from the interface. We may remove any published palette or name at our discretion and without notice, including anything that is not a palette.

Acceptable use. Do not send automated requests at a rate that degrades the service, scrape the collection wholesale, or attempt to access other users' data or the administrative interface.

Liability. To the extent permitted by applicable law, Phenomenal Development Oy is not liable for any direct, indirect, incidental or consequential loss arising from the use of Phenocolor.

Changes and governing law. These terms may change while the service is in beta, and a change takes effect when it appears on this page. Finnish law applies.

Privacy

No accounts. Phenocolor asks for no name, no email and no password. There is no advertising network, no third-party analytics script and no tracker of any kind on any page.

Page views, with consent. We keep our own record of which pages are opened and whether a browser is new or returning, so that we can see which parts of the tool are used. It runs on our own server and the figures never leave it. The banner asks first, and if you decline, no record is written. You can change your answer from the “Cookies” link in the footer of any page.

What the counting stores

A random token: A cookie holding a random string that means “same browser as before”. The value is generated by us and is not derived from anything about you or your device. It expires after a year.
The page and the referrer's host: Which page was opened, and the host of the site you arrived from. Only the host is kept, since a full referring address can carry search terms.
Device and browser family: Desktop, mobile or tablet, and Chrome, Safari, Firefox and so on. The full user agent string is read once to work this out and then discarded, since it is identifying on its own.

Not stored: IP addresses, location, user agent strings, or anything that could reassemble one person's path through the site. Raw page views are deleted automatically after 90 days.

What is stored, and where

In your browser (localStorage): Palettes you save, which curated palettes you have liked, and whether you prefer the light or dark surround. This never reaches the server, and clearing your browser data removes it.
A session cookie: One functional cookie holding the ids of palettes you have liked, so a like counts once. It carries no identifier for you and expires with the session.
Your cookie choice: A cookie remembering whether you allowed counting, so the banner stops asking. It lasts six months and is set either way, including when you decline.
On the server: Palettes you explicitly publish to Explore — the color values, an optional name and a like count — plus the visit counts described above, if you allowed them. No IP address is stored with either.
Images: Never uploaded. A photo you drop into the image tool is decoded and sampled by your own browser and is gone when you leave the page.

One third party. The typefaces on this site are served by Google Fonts, so loading a page makes a request to fonts.googleapis.com and fonts.gstatic.com. That request necessarily reveals your IP address to Google. It is the only outbound request Phenocolor makes, and we would rather it did not exist — self-hosting the fonts is on the list above.

Server logs. Like any web server, ours records requests, which can include IP addresses, for security and troubleshooting. These are kept no longer than necessary and are not used to build any profile of you.

The controller is Phenomenal Development Oy, Finland. Because no personal data is collected, there is usually nothing to request or erase. If you believe we hold something about you, or you want a published palette taken down, write to [email protected] and we will deal with it. Under the GDPR you also have the right to complain to the Finnish Data Protection Ombudsman.

Who made this happen

Mika Peltomaa Phenomenal Development Oy ↗

Designed and built Phenocolor. It began as a private tool for his own projects and stayed one for about a decade.

A color tool that argues with you