Color Tools for Design, Print & Code

How the tools fit one color workflow

Start with a role, not a hex. A signature color, a body-text color, a surface, and a chart series are different jobs. If you do not have a seed color yet, the random color generator can propose a HEX, a five-color palette, or a two-color linear gradient. The color wheel and the palette generator propose hues from a harmony rule. The named color index is the place to look up a CSS keyword or a common neutral and see the same color as HEX, RGB, HSL, HSV, CMYK, and OKLCH.

After the hues exist, check the pairs you will actually ship. The contrast checker reports WCAG ratios for text on a background. The color blindness simulator previews protanopia, deuteranopia, and tritanopia so you can see hues that collapse. Simulation is not a diagnosis and it does not replace a label when meaning depends on color. The compare colors tool reports a Delta E 2000 distance when you need a number for two close swatches.

Gradients are a separate step. Build stops in the CSS gradient generator, then read the CSS gradients guide and how to choose color stops. A gradient does not have one contrast ratio. Sample the light and dark ends under the text.

Screen numbers and print numbers are not interchangeable. The print gamut checker and the format converters show a simple CMYK conversion so you can see a shift before you talk to a printer. They do not apply a press profile. The screen-to-press guide is the workflow around those tools. Scales for an interface live in the tint and shade generator. Photos can be sampled with palette from image, which runs in the browser and returns the most frequent color buckets, not a brand match.

Hue relationships — complementary, analogous, triadic, and the rest — are explained in color theory 101. Use that article when the wheel markers are clear and the reason to pick one scheme is not.