Hex Color Picker & Converter (RGB, HSL, HSV, CMYK, OKLCH)
Convert any color to HEX, RGB, HSL, HSV, CMYK, and OKLCH, check contrast, copy harmony swatches, and export CSS or JSON—right in your browser.
Enter hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch(), or a CSS color name. Invalid values keep the last good conversion.
Closest CSS name: royalblue
Conversions
On white background
3.68:1
Passes WCAG AA (large text only)
On black background
5.71:1
Passes WCAG AA (normal text)
Export swatches
Pick or paste any color format, convert to HEX, RGB, HSL, HSV, CMYK, and OKLCH, check WCAG contrast, generate harmony swatches, copy values, and export CSS or JSON. Free, fast, and runs entirely in your browser.
How to use this color picker
Type or paste any supported color format, adjust opacity, or use the native picker. The page converts to HEX, RGB, HSL, HSV, CMYK, and OKLCH instantly, shows WCAG contrast against white and black, generates harmony swatches and a tint/shade strip, and keeps everything copy-ready. Share your setup with the URL—state is stored in the query string.
HEX, RGB, HSL, HSV, CMYK, and OKLCH reference
Hex is a compact RGB encoding. RGB describes red/green/blue channels. HSL expresses hue, saturation, and lightness; HSV uses hue, saturation, and value (brightness). CMYK models print ink percentages. OKLCH is a perceptually uniform CSS color space. This tool uses deterministic math in your browser—no uploads and no external APIs.
Complementary, analogous, triadic, split-complementary, tetradic, and monochromatic
Complementary rotates hue 180°. Analogous steps hue by a fixed angle around your base. Triadic uses 120° offsets. Split-complementary adds two hues near the complement. Tetradic uses 90° rectangle offsets. Monochromatic holds hue and varies lightness. Count controls apply to analogous and monochromatic modes.
CSS variables and JSON export
Export produces :root custom properties with stable names (for example --color-base, --color-analogous-1) and JSON with baseHex, alpha, namedColor, harmony mode, contrast ratios, and swatch lists for scripts or design tokens.
WCAG contrast checker
Contrast ratio is computed from relative luminance per WCAG 2.x. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1. Use these previews when picking text or UI colors on light or dark backgrounds.
Frequently Asked Questions
What color formats can I enter?
Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch(), and all standard CSS named colors such as cornflowerblue or rebeccapurple.
Does #ABC expand to six digits?
Yes. Three-digit hex is expanded per digit pair, so #ABC becomes #AABBCC.
What happens if my color is invalid?
You see an inline error. The last valid color stays in the conversion rows, picker, and exports until you enter a valid value again.
How does the WCAG contrast checker work?
It calculates the contrast ratio between your color and pure white or black using relative luminance. Results show whether the color passes AA or AAA thresholds for normal or large text.
How are harmony colors calculated?
They are deterministic: complementary is a 180° hue shift; analogous uses fixed hue steps; triadic uses 120° offsets; split-complementary uses hues near the complement; tetradic uses 90° rectangle offsets; monochromatic varies lightness while keeping hue and saturation from the base.
What is in the JSON export?
Stable keys: baseHex, alpha, namedColor, harmony, harmonyCount where applicable, harmonySwatches, tintShadeStrip, stripCount, and contrast ratios—suitable for tooling or documentation.
Can I share my colors?
Yes. The URL updates with hex, alpha, harmony mode, counts, and strip size so you can bookmark or share an exact setup.