Related Tools
Color Contrast CheckerWCAG AA & AAA compliance
Color Palette GeneratorHarmony-based palettes
Gradient GeneratorCSS gradient builder
Glassmorphism GeneratorFrosted glass effect builder
Mesh Gradient GeneratorSVG mesh gradient builder
Box Shadow GeneratorCSS shadow studio
CSS Filter GeneratorVisual image filters
Font Pairing ToolGoogle Font combinationsColor Picker & Converter Online — HEX, RGB, HSL, HSV, OKLCH, CMYK
What's included
Features
About this tool
Convert Any Color Between HEX, RGB, HSL, OKLCH, and CMYK — Paste Any Format
You have a color in HEX from a design mockup and you need it in HSL for a CSS variable, or OKLCH for a modern design token, or CMYK for a print vendor. Paste it here and get all six formats at once — HEX, RGB, HSL, HSV, OKLCH, and CMYK — with one-click copy for each. Or just pick a color using the OS color picker and all six outputs update instantly.
The smart paste field accepts any color format and figures out which one it is automatically: six-digit HEX (#3b82f6), three-digit shorthand (#fff), RGB, RGBA, HSL, HSLA, OKLCH, and all 140 CSS named colors including "royalblue", "coral", and "rebeccapurple". Paste from a stylesheet, a design tool export, a documentation page, or an API response — no need to manually select the input type.
Each format serves a different purpose. HEX (#3b82f6) is the default in browser DevTools, Figma, and most design tools. RGB maps to the native screen color model (0–255 per channel). HSL is the most designer-friendly CSS format — you can adjust lightness without changing hue by just changing the L value. HSV is used in Photoshop-style color wheels. OKLCH is the new CSS Color Level 4 perceptually uniform space — two colors at the same L value look equally bright regardless of hue, making it ideal for consistent design token palettes. CMYK is for print — it tells ink printers the exact ink percentages to use.
The WCAG contrast panel at the bottom shows whether your color passes accessibility thresholds against white and black backgrounds. WCAG Level AA (4.5:1 for normal text) is the minimum standard required by accessibility laws in most jurisdictions. Checking contrast while picking colors catches failures at the design stage — before they require a costly redesign. If a combination fails AA, adjust the L value in HSL or OKLCH to find a passing value while keeping the same hue.
Step by step
How to Use
- 1Pick a color using the native color picker or swatchesClick the large color swatch on the left side of the tool to open the native OS color picker. Drag or click to any color and all six format outputs on the right update instantly. Or click any preset swatch to load a common design color, or hit Random for inspiration.
- 2Enter a precise color valueClick directly in the HEX field below the swatch and type or paste a hex value. The tool accepts both 6-digit (#3b82f6) and 3-digit shorthand (#fff) hex codes. All six format outputs update as soon as you finish typing.
- 3Paste from any color formatUse the "Paste any format" field to convert from any starting point. It accepts HEX (with or without #), RGB, RGBA, HSL, HSLA, OKLCH, and all 140 CSS named colors like "royalblue", "coral", or "rebeccapurple". The format is detected automatically.
- 4Copy any output formatEach of the six output format rows on the right shows the color value in that format. Click any row to copy that format's value to your clipboard — a green checkmark confirms the copy. Toggle Uppercase to switch HEX output between lowercase and uppercase.
- 5Check WCAG contrast accessibilityThe WCAG Contrast section at the bottom shows three contrast ratios: your color on white, your color on black, and white text on your color as a background. Each ratio shows AA and AAA pass/fail badges for normal and large text. If a color fails AA, adjust the L value in HSL or OKLCH to find a passing value.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Paste your HEX value (with or without the # symbol) into the smart paste field or type it directly in the HEX input below the color swatch. All six formats — HEX, RGB, HSL, HSV, OKLCH, and CMYK — update instantly. Click any format row to copy that value. A 6-digit HEX like #3b82f6 maps to rgb(59, 130, 246) — the first two digits are the red channel (3b hex = 59 decimal), the middle two are green (82 = 130), and the last two are blue (f6 = 246).
OKLCH is a perceptually uniform color space in the CSS Color Level 4 specification. It represents colors as Lightness (0–1), Chroma (colorfulness), and Hue (0–360°). Unlike HSL, OKLCH is perceptually uniform — two colors with the same L value look equally bright to human vision regardless of hue. This makes it ideal for design tokens (all "level 500" colors look equally prominent), smooth gradients (no muddy midpoints), and accessible color palettes. Native browser support landed in Chrome 111, Firefox 113, and Safari 15.4.
Both are cylindrical ways to represent RGB colors, but they define brightness differently. In HSL, pure white is L=100% and pure black is L=0% — making it easy to lighten or darken a color by changing just the L value. In HSV, white is V=100% S=0% and black is V=0%. HSV is used in Photoshop, Illustrator, and graphic application color pickers because it maps more directly to how artists think about paint mixing. HSL is the standard for CSS and is more intuitive for making programmatic adjustments in stylesheets.
Pick or paste your color and scroll to the WCAG Contrast panel at the bottom. It shows three ratios: your color on white, your color on black, and white text on your color as a background — with AA and AAA pass/fail badges for normal text (4.5:1 and 7:1) and large text (3:1 and 4.5:1). If a combination fails AA, try adjusting the L value in the HSL or OKLCH output to a darker or lighter shade until it passes — the other format values update in sync.
CMYK (Cyan, Magenta, Yellow, Black) is the subtractive ink model used in color printing. You need it when preparing files for business cards, brochures, packaging, or offset printing. Screen colors in RGB have a wider gamut than CMYK inks can reproduce — colors that look vivid on screen may appear duller in print. Getting the CMYK values before sending to a print vendor lets you verify the ink percentages and anticipate how the color will look on paper.
The smart paste field auto-detects: 6-digit HEX (#3b82f6), 3-digit shorthand (#fff), rgb(59, 130, 246), rgba(59, 130, 246, 0.8), hsl(217deg 91% 60%), hsla values, oklch(0.630 0.205 262.1), and any of the 140 CSS named colors including "royalblue", "coral", "rebeccapurple", and "hotpink". No need to select the input type — just paste whatever you have.
Free, no sign-up required. All color math runs entirely in your browser — nothing is sent to any server. Safe for proprietary brand colors, client palette specifications, or any color values you wouldn't want shared with a third-party service. Works offline once the page has loaded.
The conversion follows Björn Ottosson's original OKLCH specification using standard ICC matrix transforms: sRGB → Linear sRGB → XYZ D65 → OKLab → OKLCH. Accurate to 3 decimal places for L and C, and 1 decimal place for H. Minor rounding of ±1 in RGB values may occur when converting back from OKLCH due to floating-point limits — this is within the precision range of CSS color handling in browsers.