Color Converter
Convert HEX, RGB, HSL, and OKLCH values, inspect alpha and WCAG contrast, or sample a color from a local image.
Colors and images are processed locally in your browser.
#426A9EFF#426A9E#426A9EFFrgb(66, 106, 158)hsl(213.9, 41.1%, 43.9%)oklch(51.87% 0.0945 255.52)Contrast is one accessibility check, not a complete accessibility evaluation.
No colors selected in this session.
How to use it
- Enter a HEX, RGB, HSL, or OKLCH value, or adjust the color controls.
- Copy a converted CSS value or compare the foreground and background contrast.
- Switch to Pick from image to upload, paste, or drop an image and sample a pixel.
Example
#0099FFB8Output
rgba(0, 153, 255, 0.722), hsla(204, 100%, 50%, 0.722), and an OKLCH equivalent.
Convert color formats
HEX is compact, RGB maps directly to screen channels, HSL expresses hue and lightness, and OKLCH is designed around perceptual lightness. Converted values may contain small rounding differences.
Pick a color from an image
Upload, drop, or paste a local PNG, JPEG, WebP, or GIF, then select a pixel. Large images are scaled to a bounded working canvas before sampling and never leave the browser.
Alpha transparency
Alpha controls opacity from fully transparent to fully opaque. The visible result depends on the surface beneath the color, so HEX8, RGBA, HSLA, and OKLCH alpha outputs preserve that value.
Contrast ratio
The checker calculates WCAG contrast after compositing transparent colors. Passing a contrast threshold helps with text readability, but it does not establish complete accessibility compliance.
Common questions
- Does the image color picker upload my image?
- No. The browser decodes the selected file into a bounded local canvas. The image and sampled colors are not sent to Naminc infrastructure or saved after reload.
- Why can converted values differ slightly?
- RGB uses integer channels while HSL and OKLCH use floating point values. Formatting and out-of-gamut channel clipping can introduce small rounding differences.
- What is the difference between RGB, HSL, and OKLCH?
- RGB describes display channels, HSL rearranges RGB into hue, saturation, and lightness controls, and OKLCH offers a more perceptually consistent lightness and chroma model.
- Does a passing contrast ratio make a design accessible?
- No. Contrast is one requirement. Typography, interaction states, semantics, keyboard access, motion, and content also affect accessibility.