Color Picker
Pick a color and instantly read its HEX, RGB, HSL, HSV and CMYK values. Build palettes and check WCAG contrast in one place.
Conversions and palettes run in your browser. Nothing is uploaded.
Palettes
Click any swatch to load it as the main color. Tints add white, shades add black, harmonies rotate the hue.
WCAG Contrast Checker
The foreground uses your current main color. Pick a background to evaluate the pair against WCAG 2.1 contrast guidelines.
How Color Models Work
Every color you see on a screen can be described by several different number systems, and each system was designed for a different job. HEX is just a compact way of writing red, green and blue values in hexadecimal so they fit nicely into CSS and HTML. RGB writes those same three channels in plain decimal from zero to two hundred fifty-five. HSL and HSV reorganize those channels around how humans actually think about color, splitting it into hue (the position on the color wheel), saturation (how vivid it feels) and lightness or value (how bright it is). CMYK is a print-oriented model that subtracts ink from white paper and is used by professional printers and packaging vendors. This color picker shows all five formats at once so you can copy whichever one your tool, design system or printer expects.
When to Use HEX, RGB, HSL or HSV
For day to day web work, HEX is fine for static colors and RGB is the right choice when you need an alpha channel. HSL becomes invaluable when you want to build a consistent palette by rotating the hue or making a color a few percent lighter for a hover state. HSV is popular inside design tools because the value channel maps cleanly to how a color picker square is drawn, with saturation running horizontally and value running vertically. CMYK matters when you are sending artwork to a printer because vivid screen colors often fall outside the printable range and need to be adjusted ahead of time. Knowing which model fits which task saves you from awkward conversions later.
What WCAG Contrast Means
The Web Content Accessibility Guidelines define a contrast ratio between two colors as a number between one and twenty-one, where one means the colors are identical and twenty-one means pure black on pure white. To pass WCAG AA for normal body text the ratio must be at least four point five to one. Large or bold text only needs three to one. The stricter AAA level requires seven to one for body text and four point five to one for large text. The checker above computes the relative luminance of both colors using the official WCAG formula and shows pass or fail badges for each level so you can see at a glance whether a brand color is safe to use for body copy or only for buttons and headlines.
Building Harmony Palettes
The palette generators above use color theory rules from the traditional color wheel. A complementary palette pairs your color with the hue exactly opposite, which produces high contrast and energy. Analogous palettes shift slightly to either side, which feels calm and natural. Triadic palettes pick three hues that are evenly spaced, making a balanced trio that still keeps individual colors distinct. Tetradic palettes pick four hues at right angles for richer combinations that work well in editorial layouts and dashboards. Tints and shades take a single color and build a vertical scale by mixing it with white or black, which is exactly how most design system color ramps are produced.
Frequently Asked Questions
Are my colors and palettes saved on a server?
No. Everything happens locally in your browser using JavaScript. The current color, the palettes that get generated, and your recent colors list are all stored either in memory or in your browser’s localStorage on your own device. Nothing is sent to a server, which means you can safely use the tool for unreleased brand colors or internal design work.
Why does my HEX value sometimes round when converted to other formats?
HEX values describe each channel with two hexadecimal digits, which gives exactly two hundred fifty-six possible values per channel. HSL, HSV and CMYK use percentages and degrees that need to be rounded to whole numbers for readability. The picker rounds those values for display but uses the precise underlying numbers for any palette or contrast calculation, so you never lose accuracy in the math.
What does a contrast ratio of 4.5:1 actually feel like?
4.5:1 is the WCAG AA threshold for normal body text. In practice it means that black text on a medium grey background, or white text on a medium green button, is just barely readable for users with mild vision loss. If you want your text to feel comfortable rather than just legal, aim for seven to one or higher, which is the AAA standard. Headlines and large buttons can safely use lower ratios because their size compensates for some of the lost contrast.
How do tints and shades differ from lightness in HSL?
Tints are the result of mixing a color with pure white. Shades are the result of mixing it with pure black. Adjusting the L channel in HSL produces a similar effect but the math is different: HSL keeps the hue and saturation constant and changes the lightness uniformly, while a true tint physically averages the RGB channels with white. The two approaches usually look close, but a designer might prefer one over the other when matching a printed swatch book or producing a visual scale that feels physically intuitive.
Can I use the generated palettes commercially?
Yes. Color values are not copyrightable, and the palettes the tool produces are mathematical results derived from the color you input. There are no licensing fees, watermarks or attribution requirements. Use the HEX values in your own design files, websites, marketing materials or printed products without restriction.
Why are some palette swatches identical to my main color?
The harmony palettes always include the base color so that you can see the full set in one row, which makes copying easier when you want to keep the original alongside its siblings. Tints exclude pure white and shades exclude pure black to keep the gradient useful, but the original color appears as the first or last swatch depending on the row.
Does the picker work in Safari, Firefox and on mobile?
Yes. The tool relies only on standard browser features such as the native color input, clipboard write access, and CSS variables. It runs in current versions of Safari, Firefox, Chrome and Edge on both desktop and mobile. The native color input opens the platform’s own color dialog, so the picker will look slightly different depending on whether you are on macOS, iOS, Windows or Android.