Convert HEX, RGB, HSL, HSV, CMYK and OKLCH
A color code converter expresses a selected color in different coordinate systems. HEX encodes red, green, and blue channels as hexadecimal digits, while RGB writes the screen channels numerically. HSL separates hue, saturation, and lightness; HSV, also called HSB, uses hue, saturation, and value or brightness. Editing any supported model recalculates the other representations from the current color. Invalid partial input remains editable and shows a validation message while the last valid preview stays available. The tool accepts opaque colors rather than guessing how an alpha channel would blend against an unspecified background.
CMYK describes cyan, magenta, yellow, and black ink components, but a simple formula does not simulate a particular printer. This converter uses an unprofiled RGB-to-CMYK approximation and the corresponding inverse formula. A printed result depends on inks, substrate, printer calibration, and an ICC color-management workflow. A screen color that appears vivid may not have an equivalent on the chosen press. Use these numbers as a starting reference, then request a managed conversion and proof for production work. The tool does not claim that equivalent-looking numeric values guarantee an identical physical result.
Modern color coordinates and useful palette variations
OKLCH expresses perceptual lightness, chroma, and hue and can describe colors outside the sRGB gamut used by ordinary HEX values. The OKLCH field and primary preview retain the entered color. If it lies outside sRGB, the tool identifies that condition and shows channel-clipped approximations for RGB-based formats and palettes. This clipping is a disclosed fallback, not a sophisticated perceptual gamut-mapping algorithm. The appearance of a wide-gamut color also depends on display capabilities and browser rendering. Copy the OKLCH representation when the destination supports it and evaluate suitable fallbacks for other contexts.
Complementary, analogous, triadic, and split-complementary palettes rotate the selected sRGB color’s HSL hue by familiar angular offsets. Tints blend toward white, shades toward black, and tones toward middle gray in ten steps. These are convenient exploration tools rather than guarantees of accessibility or visual harmony. Click a swatch to copy its HEX value, and check text/background contrast separately. Screen picking uses the browser EyeDropper only after a deliberate button click on supported secure pages. Where that API is absent or cancelled, the native color picker and editable fields remain available.
Quick reference comparison
| Color model | Primary gamut / basis | Code syntax example | Recommended industry |
|---|---|---|---|
| HEX | sRGB | #336699 | Web |
| RGB | sRGB | rgb(51, 102, 153) | Web / digital art |
| HSL | sRGB | hsl(210, 50%, 40%) | Web |
| HSV / HSB | sRGB here | hsv(210, 67%, 60%) | Digital art |
| CMYK | Device dependent | cmyk(67%, 33%, 0%, 40%) | Print, with profile verification |
| OKLCH | Perceptual coordinates; can exceed sRGB | oklch(0.5 0.1 250) | Modern CSS / design |
How to use Color Code Converter (HEX, RGB, HSL, CMYK)
1. Choose your input
Choose a color model and enter an opaque value in the displayed notation, or use the native picker. For HSV and CMYK, use percentages for channels other than hue; OKLCH lightness accepts a normalized number or percentage.
2. Inspect the result
Review synchronized fields and any out-of-sRGB notice. Treat CMYK as an unprofiled estimate. The copy button uses the last valid converted value, so finish or correct incomplete input before copying a result.
3. Apply or compare
Explore hue harmonies and ten-step tints, shades, and tones. Copy swatches into your design and check the real destination, including accessibility and print proofing where applicable. Screen sampling is optional and browser-dependent.
Key features and technical specifications
Interactive local interface
The browser updates controls and results without uploading your files. Network probes contact the chosen endpoint only when started.
Explicit boundaries
Visible limits and explanations distinguish computed representations, extracted content, and network observations from guarantees.
Use the result with its limits in mind
Compare results using consistent settings, and check the relevant limitations before applying them in another environment.
Inspect before applying
Use previews, reference values, and contextual labels to understand the result before saving it or changing another system.
Compare alternatives
Change one setting at a time and keep the conditions comparable so the difference has a clear interpretation.
Frequently asked questions
Why do RGB and CMYK colors shift?
Screens emit light while printed inks absorb it. Their available color ranges and reproduction conditions differ. A formula-only conversion cannot account for a specific printer, ink, paper, or profile, so production printing requires managed conversion and an appropriate proof.
Why use OKLCH in modern CSS?
It separates perceptual lightness, chroma, and hue, making some design adjustments easier to reason about than RGB channel edits. It can describe colors beyond sRGB, but a particular display may not reproduce them and a suitable fallback may still be necessary.
What happens to an out-of-gamut color?
The original OKLCH value is retained. Formats tied to sRGB use a channel-clipped approximation and the page displays a warning. That means the HEX result may differ visibly from the original; do not mistake the fallback for a lossless wide-gamut conversion.
Why is Pick Color from Screen unavailable?
EyeDropper support varies by browser and context and requires a secure page and user action. Some frames or browser policies can prevent opening it. Use the native color input or type a code when screen sampling is not available.
Are harmony palettes automatically accessible?
No. Hue relationships say nothing by themselves about readable text contrast, focus visibility, or color-vision accessibility. Test each foreground/background pair with the color contrast checker and evaluate the complete interface in its actual states and themes.