Choose the right color format for the job.
HEX, RGB, HSL, HSV, CMYK and OKLCH explained, with practical notes on CSS gradients and print conversion.
HEX and RGB describe the same sRGB color
A six-digit HEX code contains three byte values: red, green and blue. Each pair runs from 00 to FF. For example, #FF0000 maps to rgb(255, 0, 0). A three-digit shorthand repeats each digit: #369 becomes #336699. Both formats describe the same RGB channels.
The converter accepts HEX with or without #, standard rgb() values and percentage channels, hsl() values with percent saturation and lightness, and the CSS names displayed in the tool. Alpha, wide-gamut color() syntax and arbitrary expressions such as var() are not parsed. Invalid or out-of-range inputs remain visible so you can fix them.
HSL and HSV are useful controls, not perceptual rulers
HSL expresses hue, saturation and lightness. Hue wraps around a 360-degree circle. HSV uses value instead of HSL lightness and is included as an output for applications that use that model. Equal HSL lightness numbers do not mean that two hues look equally bright.
The shade scale varies HSL lightness while preserving hue and saturation. It is a fast starting point for surface and text variants. It is not an automatically accessible design system: test the pairs you actually use with the contrast checker.
OKLCH helps describe perceptual relationships
OKLCH represents lightness, chroma and hue using the Oklab model. PaletteTidy converts its sRGB input to OKLCH for display and JSON export. The tool does not parse arbitrary OKLCH input or extend a color beyond sRGB. Near-neutral colors have very low chroma, so hue becomes less meaningful.
When adopting OKLCH in production CSS, verify the browsers your audience uses and test your gamut choices. Keep a consistent color management workflow for assets, UI styles and screenshots. A code value alone does not make every display look identical.
CMYK needs a printing condition
The displayed CMYK percentage is a simple profile-free mathematical conversion. Real printing depends on the printer, paper, inks and ICC profile, so these percentages are approximate. Do not treat them as a press-ready specification or a Pantone match.
For production print work, take the original design into a color-managed application, use the printer’s requested profile, inspect a soft proof and obtain a physical proof when needed. A browser palette is most reliable as a digital sRGB reference.
Export the gradient you can inspect
Choose two to five stops in Gradient, adjust their colors, and switch between a linear or radial layout. Linear gradients expose a direction angle; radial gradients use a centered circle. Stops are evenly spaced and their percentages are included in the generated CSS.
Use palette copies up to the first five colors into the gradient editor. The preview uses the browser’s CSS rendering, so it matches the emitted gradient syntax in that browser. Place an opaque text surface over a busy gradient, or verify the lowest contrast along the text area before using it as a background.